让我们从为生产提供react应用程序开始，我推荐以下教程：https://dev.to/thexdev/dockerize-production-reactjs-3ai9
因此，您可能需要以下Dockerfile.prod：

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable
EXPOSE 80
COPY ./your/path/default.conf /etc/nginx/conf.d/default.conf # That file needs to be created, you can adjust the first path to yours
COPY --from=build /app/dist /usr/share/nginx/html  # Please have a look if its /app/dist or /app/build

字符串
您需要创建的default.conf文件应该如下所示：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

型
我还建议在Dockerfile所在的目录下创建一个.dockerignore文件，内容如下：

node_modules

型
这样您就不会将该文件夹复制到映像中-它是由npm i命令自己创建的。
这样你就有了一个生产React应用程序。
然后你应该编辑你的docker-compose.prod.yml：

version: '3'
services:
  nginx:
    image: nginx:stable
    container_name: nginx
    depends_on:
      - api
      - client
    restart: always
    volumes:
      - ./sites-enabled:/etc/nginx/conf.d
    ports:
      - "3000:80"
  api:
    container_name: api
    build:
      dockerfile: Dockerfile
      context: ./backend
    volumes:
      - '/app/node_modules'
      - './backend:/app'
    command: npm start
    expose:
      - 3001
  client:
    container_name: client
    build: 
      dockerfile: Dockerfile.prod
      context: ./frontend
    expose:
      - 80

型
这样你就有了一个nginx示例，它应该作为一个代理，将你的请求路由到API或客户端容器。
要做到这一点，你需要创建sites-enabled目录，你的docker-compose.prod.yml文件就在其中（这样它就可以作为卷挂载到nginx容器中）。在该文件夹中，您需要创建一个包含以下内容的<anyname>.conf文件：

server {
    listen 80;
    
    location / {
        proxy_pass http://client:80;
    }

    location /api/ {
        proxy_pass http://api:3001$request_uri;
    }
}

型
这将是一个生产设置。每个服务都有一个镜像和一个nginx容器，它接收请求并将其路由到相应的服务。你不应该在客户端容器中使用nginx示例来将请求路由到API容器，这是不好的做法。您的客户端镜像中的nginx仅用于使此容器成为独立容器，它不应与外部交互。

我想先说@Geilmaker的答案是正确的答案。不过，我也想给予额外的细节，以防任何人有类似的设置。
正如Geilmaker指出的，主要问题是我实际上有两个nginx镜像（一个包含React部分的构建内容）。第一个是在Dockerfile.prod为前端创建的，另一个是在docker-compose.prod.yml执行期间创建的：

nginx:
   depends_on:
     - api
     - client
   restart: always
   build:
     dockerfile: Dockerfile.prod
     context: ./nginx
   ports:
     - "3000:80"

字符串
但我没有暴露nginx镜像的构建内容。相反，我公开了一个只有默认配置的版本。此外，由于前端的Dockerfile.prod只运行了'npm run build'，因此React应用程序没有被提供服务& prod.conf被配置为默认为任何默认位置的index.html-此时只有欢迎页面。
因此，我必须做的是依靠为Dockerfile.prod创建的nginx代理来进行前端，并将用于prod.conf的一些配置添加到驻留在Frontend文件夹中的default.conf中（例如Express API的代理）。
结果如下：
前端/Dockerfile.prod

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
# Copy build assets from build/ folder & place them in nginx/html
COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

型
frontend/nginx/default.conf

upstream client { 
    server client:3000;
}
upstream api {
    server api:3001;
}

server {

    listen 80;
    
    location / { 
        root /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /sockjs-node {
        proxy_pass http://client;
        proxy_http_version 1.1;
        # setting 'Upgrade' allows a tunnel setup between client & proxied server http://nginx.org/en/docs/http/websocket.html
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api {
        proxy_pass http://api;
    }
}

型
docker-compose.prod.yml看起来像：

version: '3'
services:
  api:
    build:
      dockerfile: Dockerfile
      context: ./backend
    volumes:
      - '/app/node_modules'
      - './backend:/app'
    command: npm start
  client:
    build: 
      dockerfile: Dockerfile.prod
      context: ./frontend
    volumes:
      - '/app/node_modules'
      - './frontend:/app'
    environment:
      - WDS_SOCKET_PORT=0
    ports:
      - '3000:80'
    tty: true
    stdin_open: true

型
请注意'nginx'定义的删除&'client'定义中出现的端口Map。
执行时
docker-compose -f docker-compose.prod.yml up
我终于可以看到我的React应用程序了。再次感谢@Geilmaker🙏