Connect simple docker compose to nginx?

Question

I have been at this for very long but I cant seem to solve this. I am really stuck ... so I turn to you guys.

I am trying something that is supposably simple. I want to use nginx as a reverse proxy to my front end.

Docker-compose

version: '3.7'

services:
  frontend:
    expose:
      - 9080
    build: "./"...""
    volumes:
      - ./"..."/build:/usr/src/kitschoen-rj/
  nginx:
    build: ./nginx
    volumes:
      - static_volume:/usr/src/"..."/staticfiles
    ports:
      - 8080:8080
    depends_on:
      - restapi

volumes:
  static_volume:

nginx.conf

upstream kitschoen_frontend {
    server frontend:9080;
}

server {

    listen 8080;

    location / {
        proxy_pass http://kitschoen_frontend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

}

I simply can't figure out, why I get an "Bad Gateway"-Error when I go to "localhost:8080".

Your frontend container is up and listening to 0.0.0.0:9080 inside the container? (not localhost). — codestation, Mar 15 '19 at 17:08
kitschoen_docker_frontend "nginx -g 'daemon of…" 19 minutes ago Up 4 seconds 80/tcp, 9080/tcp kitschoen_docker_frontend_1 — Xen_mar, Mar 15 '19 at 17:15
yes, as far as I can tell, the docker container is up and running, listening on port 9080. If I build the react image by itself it works without problems. I can see the pages ono the localhost. — Xen_mar, Mar 15 '19 at 17:16
It may be caused by nginx starting-up and trying to reach upstream before your API is ready. See this post: https://stackoverflow.com/questions/32845674/setup-nginx-not-to-crash-if-host-in-upstream-is-not-found Try `docker exec -it nginx sh` and run `getent hosts frontend`, it should return the IP of the frontend container you are trying to run. Verify it is responding using curl or wget (such as `curl frontend:9080`), if it does check the nginx error log to make sure it was able to join frontend on startup. — Pierre B., Mar 15 '19 at 17:41
Thanks for your answer. getent hosts frontend returned the ip. But running wget frontend: 9080 on the container returned: `Connecting to frontend:9080 (xxx.xx.x.x:9080) wget: can't connect to remote host (xxx.xxx.x.x): Connection refused`. I am not sure what this tells me — Xen_mar, Mar 15 '19 at 18:00

score 0 · Answer 1 · answered Mar 15 '19 at 18:30

After some serious troubleshooting I ended my torment. The problem was utterly stupid. I created a multi-stage build for my react application, that also served the react app with an nginx server (this really reduced the image size for react).

But the react nginx server exposed port 80 for the react app and is forwarding all requests accordingly.

So the solution was to change my nginx.conf to:

upstream kitschoen_frontend {
    server frontend:80;
}

server {

    listen 8080;

    location / {
        proxy_pass http://kitschoen_frontend;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

}

What a horrible day! If you read this post so far, and you are thinking that the approach to serve my frontend via a separate nginx server is really horrible design. Please feel free to tell me so ...

No I guess you are on the right track. We use nginx as a reverse proxy also to configure https automatically for multiple webapps. I already posted [the answer](https://stackoverflow.com/questions/52291042/angular-app-running-on-nginx-and-behind-an-additional-nginx-reverse-proxy/55088849#55088849) in another of your questions — Carlos Cavero, Mar 16 '19 at 13:03

Connect simple docker compose to nginx?

1 Answers1