I’m facing a perplexing situation and could use some insight.

Here’s the context: I have a React application hosted in a Docker container, along with my backend and database, all managed via Docker Compose. Everything was functioning smoothly until we needed to deploy to production with SSL and a custom domain. To achieve this, I installed Nginx on the host machine and configured it as a reverse proxy. Initially, everything seemed fine, but after about an hour, it began returning a ‘bad gateway’ error when accessed via the web.

Any ideas on what might be causing this issue?

docker-compose.prod.yaml

version: "3.8"
services:
  frontend:
    build:
      dockerfile: Dockerfile.prod
    container_name: frontend
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    networks:
      - app-network
    depends_on:
      - backend

  backend:
    build:
      context: ./backend/
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
    working_dir: /var/www/html/
    volumes:
      - ./backend:/var/www/html/
    ports:
      - "8080:80"
    networks:
      - app-network
      - db
    depends_on:
      - appdb

  appdb:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
    volumes:
      - ./db-data:/var/lib/mysql
    ports:
      - 3306:3306
    networks:
      - db

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: unless-stopped
    environment:
      PMA_HOST: appdb
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    depends_on:
      - appdb
    ports:
      - 8443:80
    networks:
      - db
networks:
  app-network:
    driver: bridge
  db:

here is my Dockerfile.prod inside the frontend:

FROM node:18-alpine AS build
WORKDIR /frontend
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=build /frontend/build /usr/share/nginx/html

and here is my nginx config:

server {
    listen 443 ssl;
    server_name custom.domain.com www.custom.domain.com;

    ssl_certificate /etc/certs/custom.domain.crt;
    ssl_certificate_key /etc/certs/custom.domain.key;

    location / {
        proxy_pass http://localhost:3000; # Forward requests to your frontend
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location = /favicon.ico {
        return 204;
        access_log     off;
        log_not_found  off;
    }
}

I also tried to set the prox_pass to the container’s IP, but with no luck.

here is the nginx error log:

2024/05/10 00:01:19 [error] 587386#587386: *1 connect() failed (111: Unknown error) while connecting to upstream, client: <client_ip>, server: custom.domain.com, request: "GET / HTTP/1.1", upstream: "http://<localhost|containerip>:3000/", host: "custom.domain.com"

All the help will be much appreciated!
Thanks!