Dockerize React-Django App 并在 Nginx 服务器上服务错误：502 Bad Gateway答案

【问题标题】：Dockerize React-Django App and serving on Nginx server Error : 502 Bad GatewayDockerize React-Django App 并在 Nginx 服务器上服务错误：502 Bad Gateway
【发布时间】：2021-02-15 06:16:34
【问题描述】：

我有四个容器，我试图在 Nginx 服务器上为客户端提供服务，但我收到了502 Bad Gateway。我认为那是因为我的地址端口错误，但据我所知，我有正确的端口转发。我很感激这里的任何帮助，如何解决它。谢谢

docker-compose.yml

version: "3.7"

services:
  backend:
    container_name: backend
    build: ./backend
    command: >
      sh -c "python backend/manage.py makemigrations
      && python backend/manage.py runserver 0.0.0.0:8000"
    volumes:
      - ./backend:/app/backend
    environment:
      - "DATABASE_URL=postgres://postgres:postgres@db:5432/postgres"
    expose:
      - 8000
    stdin_open: true
    tty: true
    depends_on:
      - db
  
  db:
    container_name: db
    build: ./db
    ports:
      - 5432:5432
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    environment:
      - "POSTGRES_HOST_AUTH_METHOD=trust"

  frontend:
    container_name: client
    build: ./client
    volumes:
      - ./client:/app/client
      - /app/client/node_modules
    expose:
      - 3000
    stdin_open: true
    tty: true
    environment:
      - NODE_ENV=development
    depends_on:
      - backend

  nginx:
    container_name: webserver
    build: ./webserver
    links:
      - frontend
      - backend
    depends_on:
      - frontend
      - backend
    ports:
      - "8080:80"
    

volumes:
  postgres_data:

Nginx - Dockerfile

FROM nginx

RUN rm /etc/nginx/conf.d/default.conf

COPY nginx-proxy.conf /etc/nginx/conf.d

nginx-proxy.conf

server {
    listen          80;
    server_name     localhost;

    location / {
        proxy_pass  http://client:3000;
    }

    location /api {
        rewrite ^/api(.*) $1 break;
        proxy_pass  http://backend:8000;
    }
}

结果

【问题讨论】：

标签： reactjs docker nginx nginx-reverse-proxy nginx-config

【解决方案1】：

应该是服务名称；前端，而不是 container_name 客户端

proxy_pass http://frontend:3000;

【讨论】：

感谢回复，不过改成服务名，好像没什么区别。
访问http://localhost:3000的结果是什么
http://localhost:3000 没有响应，因为我希望通过 Nginx 提供构建文件，但是如果我运行 react 应用程序，它会显示应用程序 ass，但不会按预期显示在 http://localhost:8080 上。