Nginx routing setup within Docker container, request timing out with 502

Question

I have a React application where a user can enter in some number, there is an algorithm that runs some calculation and spits out a result, but before we get there, Nginx is looking at the request and deciding whether to route it to React or Express server.

Well when the number is submitted, there is an xhr request that remains pending until it just times out with a 502 bad gateway error.

All this is happening inside of a Docker container.

I ran a docker logs <container-id> and kept seeing this:

upstream server temporarily disabled while connecting to upstream

I thought it might be a typo in my Express server or in my worker process or even in the React application but I find none, so I am left wondering if the issue has to do with how I built my default.conf file:

upstream client {
    server client:3000;
}

upstream api {
    server server:5000;
}

server {
    listen 80;

    location / {
        proxy_pass http://client;
    }

    location /sockjs-node {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://api;
    }
}

I feel like my knowledge of Nginx configurations and upstream is limited to where something may not be correct about this setup. After running for awhile the whole application crashed.

To get this configuration to override the default default.conf inside of Nginx I setup a Dockerfile.dev inside of nginx/ folder:

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf

The application overall is using this docker-compose.yml file:

version: "3"
services:
  postgres:
    image: "postgres:latest"
  redis:
    image: "redis:latest"
  nginx:
    restart: always
    build:
      dockerfile: Dockerfile.dev
      context: ./nginx
    ports:
      - "3050:80"
  api:
    build:
      dockerfile: Dockerfile.dev
      context: ./server
    volumes:
      - /app/node_modules
      - ./server:/app
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379
      - PGUSER=postgres
      - PGHOST=postgres
      - PGDATABASE=postgres
      - PGPASSWORD=postgres_password
      - PGPORT=5432
  client:
    build:
      dockerfile: Dockerfile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
  worker:
    build:
      dockerfile: Dockerfile.dev
      context: ./worker
    volumes:
      - /app/node_modules
      - ./worker:/app

I am also wondering if the default.conf file is fine, but its my Express API that is taking too long to respond.

Then towards the bottom of the docker-compose.yml file I added some Redis environment variables I thought it may have needed below worker:

 worker:
    build:
      dockerfile: Dockerfile.dev
      context: ./worker
    volumes:
      - /app/node_modules
      - ./worker:/app
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379

I rebuilt the image with docker-compose up --build and restarted the application, and I can see the previous xhr requests still pending and they still give me a 502 and 504 error after a non-zero amount of time pending.

Answer 1

You will notice in this upstream block:

upstream api {
    server server:5000;
}

I called it api but then I say server server:5000;. That was the problem because I originally had it as:

upstream server {
    server server:5000;
}

but then thought that server might be a reserved operator in the Nginx world so I changed it to api but did not change it inside the block.

So it should have been:

upstream api {
    server api:5000;
}

After changing it, the xhr pending and timing out 502 errors went away.