Dockerize React-Django App and serving on Nginx server Error : 502 Bad Gateway

Question

I have four containers and I am trying to serve the client on Nginx server, but I am getting 502 Bad Gateway . I would assume that'd be because my address port is wrong but I have correct port forwarding as far as I can tell. I'd appreciate any help here, how to resolve it. Thanks

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;
    }
}

Result

Answer 1

It should be name of service; frontend, not container_name client

proxy_pass http://frontend:3000;