在Docker中运行应用时，您需要将端口设置为后端服务而不是localhost。例如，检查以下Docker容器及其服务。我们在端口3000中运行前端，在端口5000中运行后端。因此，将localhost替换为"proxy": "http://backend:5000"

version: '3'

services:
  backend:
    build: ./backend
    ports:
      - 5000:5000
  frontend:
    build: ./frontend
    ports:
      - 3000:3000
    links:
      - backend
    command: npm start

字符串

"proxy": "http://localhost:5000"在开发阶段工作得很好，因为webpack DevServer会自己处理部署。一旦你部署了你的React应用程序，它停止运行。我在尝试让我的容器化React应用程序与容器化API对话时遇到了同样的问题。我使用Nginx作为Web服务器来服务React应用程序。我遵循此guide将Nginx与Docker集成容器。这是nginx.conf最初的样子：

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

字符串
但是在我做了一些调整之后，我想出了这个配置（我将在一点上谈论API代表什么）：

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /api {
    resolver 127.0.0.11;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://api:8000;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

型
什么改变了？我为API端点添加了一个根位置，因为它们都有一个共同的前缀/api。proxy_pass属性允许我们将所有到达/api的请求代理到通过端口8000公开的后端。api只是docker-compose.yaml中定义的容器的名称。
作为参考，这是我的React应用的Dockerfile：

# build environment
FROM node:15.2.1 as build
WORKDIR /app
COPY ./client ./
RUN yarn
RUN yarn build

# production environment
FROM nginx:stable-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.yaml）：

version: "3.8"

services:
  client:
    build:
      context: .
      dockerfile: client/Dockerfile
    container_name: $CLIENT_CONTAINER_NAME
    restart: unless-stopped
    env_file: .env
    ports:
      - "1337:80"
    networks:
      - my-network
    links:
      - api
  api:
    build:
      context: .
      dockerfile: server/Dockerfile
    container_name: $API_CONTAINER_NAME
    restart: unless-stopped
    env_file: .env
    ports:
      - "8000:8000"
    networks:
      - my-network
    links:
      - mongo
  mongo:
    image: mongo
    container_name: $DB_CONTAINER_NAME
    restart: unless-stopped
    env_file: .env
    environment:
      - MONGO_INITDB_ROOT_USERNAME=$MONGO_INITDB_ROOT_USERNAME
      - MONGO_INITDB_ROOT_PASSWORD=$MONGO_INITDB_ROOT_PASSWORD
      - DB_NAME=$DB_NAME
      - MONGO_HOSTNAME=$MONGO_HOSTNAME
    volumes:
      - ~/data/db:/data/db
    ports:
      - 27017:27017
    networks:
      - my-network

networks:
  my-network:
    driver: bridge

型

如果你使用的是Docker，在客户端的package.json中，将“proxy”：“http：//localhost：5000”改为“proxy”：“https：//<container_name>：5000”
例如，由于我将express容器命名为“express-server”，因此需要添加以下内容：

// in client-side's package.json
"proxy": "http://express-server:5000"

字符串
x1c 0d1x的数据

将localhost替换为服务器容器名称帮助了我。