[英]React prod build front end not using proxy to access back end
I 've built a react app that runs noermally in dev but when I prod build it the front end fetch requests dont use the proxy I've specified in the package.json file.我已经构建了一个在 dev 中正常运行的 react 应用程序,但是当我 prod 构建它时,前端获取请求不使用我在 package.json 文件中指定的代理。
fetch request:获取请求:
export const verifyUser = async (user) => {
console.log(user);
const newData = await fetch("/login", {
method: "POST",
body: JSON.stringify({ name: user.username, password: user.password }),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
}).then((res) => res.json());
return newData;
};
package.json: package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "http://host.docker.internal:8080",
"dependencies": {
"@craco/craco": "^6.4.3",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-cli": "^9.1.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
}
}
ui Dockerfile:用户界面 Dockerfile:
# build environment
FROM node:14.18.1 as build
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm ci
RUN npm run build
# production environment
FROM nginx:1.21.4-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD [ "nginx","-g", "daemon off;"]
docker-compose: docker-compose:
version: "3"
services:
api:
build: ./api
ports:
- "8080:8080"
depends_on:
- mongo
ui:
build: ./my-app
ports:
- "80:80"
depends_on:
- api
mongo:
image: mongo
ports:
- "27017:27017"
I've tried putting the full address in the fetch call and it did not work nginx.config:我尝试将完整地址放入 fetch 调用中,但它不起作用 nginx.config:
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
You need to make Nginx pass the calls to your API through to your API container.您需要让 Nginx 将调用传递给您的 API 到您的 API 容器。 A common way to do that is to prefix all API requests with /api/, so your /login endpoint becomes /api/login.一种常见的方法是为所有 API 请求添加前缀 /api/,因此您的 /login 端点变为 /api/login。
If you change your nginx.conf to如果您将 nginx.conf 更改为
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/ {
proxy_pass http://api:8080/;
}
}
then it'll pass on the requests.然后它将传递请求。 That means that you also need to change your fetch call to这意味着您还需要将 fetch 调用更改为
const newData = await fetch("/api/login", {
Since you always access the api container through the nginx container, there's no need to map the api container port to a port on the host and you can remove that in your docker-compose file Since you always access the api container through the nginx container, there's no need to map the api container port to a port on the host and you can remove that in your docker-compose file
api:
build: ./api
depends_on:
- mongo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.