React prod 構建前端不使用代理訪問后端

Question

我已經構建了一個在 dev 中正常運行的 react 應用程序，但是當我 prod 構建它時，前端獲取請求不使用我在 package.json 文件中指定的代理。

獲取請求：

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：

{
  "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"
  }
}

用戶界面 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：

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"

我嘗試將完整地址放入 fetch 調用中，但它不起作用 nginx.config：

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

Answer 1

您需要讓 Nginx 將調用傳遞給您的 API 到您的 API 容器。 一種常見的方法是為所有 API 請求添加前綴 /api/，因此您的 /login 端點變為 /api/login。

如果您將 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/;
    }
}

然后它將傳遞請求。 這意味着您還需要將 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

  api:
    build: ./api
    depends_on:
      - mongo