No live upstream while connecting to upstream jwilder/ngnix-proxy

The documentation is not clear to me, as well as this is my first deployment I keep getting error as 502 because of no live upstream.

This is the code.

docker.staging.yml

version: '3.8'

networks:
  public_network:
      name: public_network
      driver: bridge

services:
  web:
    build: 
      context: .
      dockerfile: Dockerfile.prod
    command: gunicorn djangotango.wsgi:application --bind 0.0.0.0:8000
    volumes:
      # - .:/home/app/web/
      - static_volume:/home/app/web/static
      - media_volume:/home/app/web/media 
     
    expose:
      - 8000
    env_file:
      - ./.env.staging
    

  db:
    image: postgres:12.0-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    env_file:
      - ./.env.staging.db
    depends_on: 
      - web
  
  nginx-proxy:
    build: ./nginx
    restart: always
    ports:
      - 443:443  
      - 80:80
    volumes:
      - static_volume:/home/app/web/static
      - media_volume:/home/app/web/media 
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
      - /var/run/docker.sock:/tmp/docker.sock:ro
    depends_on:
      - web
    networks:
      - public_network

  nginx-proxy-letsencrypt:
    image: jrcs/letsencrypt-nginx-proxy-companion
    env_file:
      - .env.staging.proxy-companion
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
    depends_on:
      - nginx-proxy
    networks:
      - public_network
    
   
volumes:
  postgres_data:
  pgadmin-data:
  static_volume:
  media_volume:
  certs:
  html:
  vhost:

.env.staging.db

VIRTUAL_HOST=djangotango.meghaggarwal.com
VIRTUAL_PORT=8000
LETSENCRYPT_HOST=djangotango.meghaggarwal.com

ngnix Docekrfile

FROM jwilder/nginx-proxy
COPY vhost.d/default /etc/nginx/vhost.d/default
COPY custom.conf /etc/nginx/conf.d/custom.conf

ngnix->vhost.d->default

upstream djangotango {
    server web:8000;
}

server {

    listen 80;
    listen 443;
    server_name djangotango.meghaggarwal.com

    location / {
        proxy_pass http://djangotango;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
     
    }

    location /static/ {
      alias /home/app/web/static/;
      add_header Access-Control-Allow-Origin *;
    }

        location /media/ {
        alias /home/app/web/media/;
        add_header Access-Control-Allow-Origin *;

}

}
      

custom.conf

client_max_body_size 10M;

Here my web is the container where app is running. I think I have misunderstood the concepts and have not configured the nginx default conf file properly. Jwilder reverse ngnix proxy is something I don't get.

Please help me out. I have gone through most documentations, but no luck..Thanks

I have shown the minimal code that is required here.

I found out the bug causing upstream error.

Since I was exposing port 8000 for web, my nginx was unable to talk to web container, since they didn't share the same network.

So, it's better to remove the network from compose, so that they can talk to each other, which is the default behaviour of container.