CODEWITHSUNDEEP
reactjsdockernginxdocker-composereverse-proxy
yosemeti
yosemeti

Reputation: 228

Configuring React, NGINX, Docker-Compose

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.

Upvotes: 0

Views: 5440

Answers (1)

yosemeti
yosemeti

Reputation: 228

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

Upvotes: 1

Related Questions