Dockerize React-Django应用程序并在Nginx服务器上提供服务错误:502错误的网关

时间:2020-11-02 15:09:17

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

我有四个容器,我正在尝试在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;
    }
}

结果enter image description here

1 个答案:

答案 0 :(得分:0)

它应该是服务名称;前端,而不是container_name客户端

proxy_pass http:// frontend:3000;