React prod构建前端不使用代理访问后端

Question

我有一个反应应用程序，它在开发中正常运行，但是当我生产它时，前端获取请求不使用我在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"
  }
}

ui 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-撰写：

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"

我试过将完整地址放入获取调用中，但没有成功 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/;
    }
}

然后它将传递请求。这意味着您还需要将提取调用更改为

  const newData = await fetch("/api/login", {

由于您总是通过 nginx 容器访问 api 容器，因此无需将 api 容器端口映射到主机上的端口，您可以在 docker-撰写文件

  api:
    build: ./api
    depends_on:
      - mongo

React prod构建前端不使用代理访问后端

React prod build front end not using proxy to access back end

nginx

fetch

node.js

docker

reactjs