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.

5
  • 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.) Commented Mar 15, 2022 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: stackoverflow.com/questions/47091356/… - 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. Commented Mar 15, 2022 at 22:29
  • The links: option is obsolete and unnecessary, but it could activate an archaic Docker networking mode. Does deleting that help? Commented Mar 15, 2022 at 22:38
  • Huh? 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. Commented Mar 15, 2022 at 22:43
  • See for example Legacy container 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. Commented Mar 15, 2022 at 23:41

1 Answer 1

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'.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.