0

I'm configuring a React application to work with NGINX and docker-compose - I'm getting either 502 Bad Gateway or 504 Timeout errors on NGINX

My docker compose file:

  frontend:
    build: 
      context: ../../
    restart: always
    volumes:
      - '../../:/app'
      - '/app/node_modules'
    ports: 
      - "3000:3000"
    depends_on:
      - "backend"
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    tty: true
  nginx:
    build:
      context: ../../nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - volume1:/usr/share/nginx/html
    links:
      - "backend"
      - "db"

My docker file for NGINX:

FROM nginx:latest
COPY . /usr/share/nginx/html
COPY nginx.conf /etc/nginx/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

My nginx.conf file:

events{

}

http{

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;

            location / {
                proxy_pass http://frontend:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
            }
    }
}

If I navigate to localhost I have in the console:

lightchan-nginx-1     | 2022/03/15 19:25:58 [error] 
32#32: *8 connect() failed (111: Connection refused) 
while connecting to upstream, 
client: 172.26.0.1, server: localhost, request: 
"GET / HTTP/1.1", upstream: "http://23.221.222.250:3000/", host: "localhost"

Which tells me that nginx is seeing the upstream (ie the internal ip address that docker-compose is using) from http://frontend. But I don't know why the connection is refused. Any ideas?

EDIT: Someone suggested in another thread to replace

        # proxy_set_header Connection 'upgrade';
        proxy_set_header Connection "";

Which seemingly just turns off websockets. I don't know why that should have any affect, but that hasn't worked either.

yosemeti
  • 206
  • 4
  • 15
  • What process is running in the `frontend` container? Is that process listening on `0.0.0.0:3000`? (Docker settings like `ports:` and the obsolete `links:` and `expose:` options shouldn't make a difference here.) – David Maze Mar 15 '22 at 22:18
  • I don't understand the question. `frontend` is referring to the docker service `frontend` and is redirecting to the IP address that is internal to Docker (like this question: https://stackoverflow.com/questions/47091356/docker-nginx-reverse-proxy-gives-502-bad-gateway - just to double check I replaced `frontend` in my NGINX with `localhost` and reran just now, still doesn't work). `http://localhost:3000` spins up my React application correctly. – yosemeti Mar 15 '22 at 22:29
  • The `links:` option is obsolete and unnecessary, but it could activate an archaic Docker networking mode. Does deleting that help? – David Maze Mar 15 '22 at 22:38
  • Huh? https://docs.docker.com/compose/networking/#links. The version number is 3.9 which is the latest. Why do you say it's obsolete? That's wrong. I don't know why deleting this should help. – yosemeti Mar 15 '22 at 22:43
  • See for example [Legacy container links](https://docs.docker.com/network/links/): "The `--link` option is a legacy feature of Docker. It may eventually be removed." You do not need Compose `links:` to communicate between containers and I'd recommend just removing this back entirely. – David Maze Mar 15 '22 at 23:41

1 Answers1

1

I needed

  nginx:
    build:
      context: ../../nginx
    restart: always
    ports:
      - "80:80"
      - "443:443" 
    volumes:
      - volume1:/usr/share/nginx/html
    links:
      - "backend"
      - "db"
      - "frontend" <-- this line.

Thanks to David Maze for the 'hint'.

yosemeti
  • 206
  • 4
  • 15