Frontend and backend run on different ports gets 502 Bad Gateway

[thegenius314]

Hi Peoples
I'm currently running a container with my web application and it communicates through two ports,
for the frontend and backend.
When I run the docker compose file (which starts the app and the proxy) it gives me a 502 Bad gateway
when I run with only one port it serves that part of the app.
Im passing the port with the "VIRTUAL_PORT=80" is there a way to pass more than one port or if I make a separate container for the Frontend how would I get the proxy to speak to both containers with one request?
Thank in advance,

docker-compose

`reverseproxy:
image: jwilder/nginx-proxy

ports:
- "80:80"
- "8080:8080"
volumes:
- /var/run/docker.sock:/tmp/docker.sock

myapp:
depends_on:
- reverseproxy
build: ./app-files
environment:
- "VIRTUAL_HOST=my-domain.com"
- "VIRTUAL_PORT=80,8080"
expose:
- 80
- 8080`

[kamermans]

Hi,

is there a way to pass more than one port?

No, currently you can only expose one port per container.

if I make a separate container for the Frontend how would I get the proxy to speak to both containers with one request?

One request can only go to one place. I imagine in this scenario your browsers sends a request to the Frontend, and the Frontend needs to send a request to the Backend. It would be good practice to separate them anyway, and with nginx-proxy, the solution to this problem is to give the Frontend and the Backend different hostnames, like www.foo.com and backend.foo.com.

Here's an example (untested) based on your config:

myapp-backend:
    build: ./app-files
    environment:
        - "VIRTUAL_HOST=backend.my-domain.com"
        - "VIRTUAL_PORT=8080"
    expose:
        - 8080

myapp-frontend:
    depends_on:
        - myapp-backend
    build: ./app-files
    environment:
        - "VIRTUAL_HOST=my-domain.com"
        - "VIRTUAL_PORT=80"
    expose:
        - 80

reverseproxy:
    image: jwilder/nginx-proxy
    depends_on:
        - myapp-frontend
        - myapp-backend
    ports:
        - "80:80"
    volumes:
        - /var/run/docker.sock:/tmp/docker.sock

Note that in this example, my-domain.com and backend.my-domain.com would both resolve to the same IP, and the from the outside, the requests to both servers would go to port 80, but based on the hostname, the traffic would be passed to the appropriate container.

If the Frontend needs to talk to the backend directly, it can choose to do that via either myapp-backend:8080, or through nginx-proxy at backend.my-domain.com:80.

[Coinhexa]

@kamermans thank you for the example above. how would it work if your frontend and backend were separate vscode projects and each had their own docker-compose file?

[buchdag]

@Coinhexa you have to ensure that your various services (in this case, backend and frontend) are in the same Docker network. If they are in different compose files, that won't be the case by default. The recommended solution is to manually create a Docker network and use it in the various compose files, rather than letting compose automatically create and use a different network for each files.