502 Bad Gateway, connect failed (refused) while connecting to upstream, Can't Load Either Frontend nor Backend

[khalidrizki01]

Checklist

• Have you pulled and found the error with jc21/nginx-proxy-manager:latest docker image?
  • Yes
• Are you sure you're not using someone else's docker image?
  • Yes
• Have you searched for similar issues (both open and closed)?
  • Yes (Haven't found similar issues)

Describe the bug I'm still new to nginx and full stack web deployment. I'm encountering a 502 Bad Gateway error every time I attempt to load both the frontend and backend. I've dockerized my application into frontend (React Vite) and backend (FastAPI Python) containers, then deployed them on a VPS. I've configured the proxy host using Nginx Proxy Manager. The configuration for the frontend proxy host is as follows:

server {
  set $forward_scheme https;
  set $server         "frontend";
  set $port           5173;

  listen 80;
  listen [::]:80;

  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  server_name myweb.mydomain.com;

  # Let's Encrypt SSL
  include conf.d/include/letsencrypt-acme-challenge.conf;
  include conf.d/include/ssl-ciphers.conf;
  ssl_certificate /etc/letsencrypt/live/npm-1/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/npm-1/privkey.pem;

  # Block Exploits
  include conf.d/include/block-exploits.conf;

  # Force SSL
  include conf.d/include/force-ssl.conf;

  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection $http_connection;
  proxy_http_version 1.1;

  access_log /data/logs/proxy-host-1_access.log proxy;
  error_log /data/logs/proxy-host-1_error.log warn;

  location / {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    proxy_http_version 1.1;

    # Proxy!
    include conf.d/include/proxy.conf;
  }

  # Custom
  include /data/nginx/custom/server_proxy[.]conf;
}

And here's the configuration for the backend proxy host:

server {
  set $forward_scheme https;
  set $server         "backend";
  set $port           8000;

  listen 80;
  listen [::]:80;

  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  server_name api.myweb.mydomain.com;

  include conf.d/include/letsencrypt-acme-challenge.conf;
  include conf.d/include/ssl-ciphers.conf;
  ssl_certificate /etc/letsencrypt/live/npm-2/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/npm-2/privkey.pem;

  include conf.d/include/block-exploits.conf;

  include conf.d/include/force-ssl.conf;

  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection $http_connection;
  proxy_http_version 1.1;

  access_log /data/logs/proxy-host-2_access.log proxy;
  error_log /data/logs/proxy-host-2_error.log warn;

  location / {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    proxy_http_version 1.1;

    # Proxy!
    include conf.d/include/proxy.conf;
  }

  # Custom
  include /data/nginx/custom/server_proxy[.]conf;
}

My Docker Compose file looks like this:

version: "3"
name: "jawabot-development"
services:
  backend:
    restart: always
    build: 
      context: ./backend
      dockerfile: Dockerfile
    env_file:
    - ./backend/dev.env
    networks:
      - nginx-proxy
      - jawabot-dev-network
    command: uvicorn main:app --reload --port 8000 --proxy-headers
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    depends_on:
      - backend
    networks:
      - nginx-proxy
      - jawabot-dev-network
    command: npm run dev -- --port 5173

networks:
  nginx-proxy:
    name: nginx-proxy
    external: true
  jawabot-dev-network:
    name: jawabot-dev-network

The error logs for both frontend and backend show a connection refused error with an upstream IP address of https://172.#.#.#. However, my VPS IP is 203.#.#.#. Below are the logs:

frontend proxy host error logs: `

2023/10/12 23:59:47 [error] 771#771: *2578 connect() failed (111: Connection refused) while connecting to upstream, client: my-local-pc-ip-addr, server: myweb.mydomain.com, request: "GET / HTTP/2.0", upstream: "https://172.~.~.~:5173/", host: "myweb.mydomain.com"

2023/10/12 23:59:47 [error] 771#771: *2578 connect() failed (111: Connection refused) while connecting to upstream, client: my-local-pc-ip-addr, server: myweb.mydomain.com, request: "GET /favicon.ico HTTP/2.0", upstream: "https://172.~.~.~:5173/favicon.ico", host: "frontend.myweb.mydomain.com", referrer: "https://myweb.mydomain.com/"

backend proxy host error logs:

2023/10/13 00:27:01 [error] 805#805: *2717 connect() failed (111: Connection refused) while connecting to upstream, client: my-local-pc-ip-addr, server: api.myweb.mydomain.com, request: "GET / HTTP/2.0", upstream: "https://172.~.~.~:8000/", host: "api.myweb.mydomain.com"

2023/10/13 00:27:01 [error] 805#805: *2717 connect() failed (111: Connection refused) while connecting to upstream, client: my-local-pc-ip-addr, server: api.myweb.mydomain.com, request: "GET /favicon.ico HTTP/2.0", upstream: "https://172.~.~.~:8000/favicon.ico", host: "api.myweb.mydomain.com", referrer: "https://api.myweb.mydomain.com/"

Thank you for your help!

Nginx Proxy Manager Version 2.10.4

To Reproduce Steps to reproduce the behavior:

1. docker compose -f docker-compose.dev.yml
2. set up the nginx proxy host configurations (for frontend and backend) through nginx proxy manager
3. Load the frontend or backend from my local pc through a web browser

Expected behavior Can load the frontend and backend from local pc

Screenshots 502 bad gateway

backend proxy host configuration:

frontend proxy host configuration:

Operating System Ubuntu 22.04.1 LTS

Additional context Additionally, I've included CORS settings in the backend and an API URL in the frontend as follows:

backend (fastapi python):

app = FastAPI()

origins = [
    "http://frontend:5173",
    "https://frontend:5173"]

app.add_middleware(
    CORSMiddleware,
    allow_origins = origins,
    allow_credentials = True,
    allow_methods=['*'],
    allow_headers=['*'],
)
...

frontend (react vite)

const API_URL="https://backend:8000"

function App() {
...
  async function processMessageToJawabot(chatMessages){
    await fetch(`${API_URL}/ask`,{
      method: 'POST',
      mode: 'cors',
      headers: {
        "Content-Type" : "application/json"
      },
      body : JSON.stringify({"question": chatMessages[chatMessages.length-1].message})
    }).then((response) => {
      return response.json()
    })
...
  }
}

Below is the docker compose for my nginx proxy manager:

version: '3.8'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
    networks:
      - nginx-proxy

networks:
  nginx-proxy:
    name: nginx-proxy
    external: true

[1xtr]

If you use backend behind NPM you don't need https Here is my config for one simple service. NPM redirect request to container by container name.

But I'm here because custom locations don't work for me. Here is props Nginx logs say that upstream don't exist

How I can solve this ?

[Meticulous7]

Also here for this issue. OP, ever find a solution?

[github-actions[bot]]

Issue is now considered stale. If you want to keep it open, please comment :+1: