0

I'm going crazy trying to have multiple containers communicating together. Let me explain my infrastructure and problem with this simple diagram.

My Docker containers setup

I can correctly access both my "DASHBOARD" container on localhost:3000 and my "API" container on localhost:800 through my browser but if I hit my reverse proxy through localhost:8088 I get a 502 error.

It seems that from the Reverse Proxy Nginx container I can't reach on its network the other container and that even with the different port it tries to connect to himself.

FYI, those 2 environments are built with 2 different docker-compose and I would like to keep those 2 apps separated.

What am I missing on the network side?

Here is my reverse proxy piece on the Nginx config

location /api/v1/ {
    proxy_pass http://localhost:8000/api/v1/;
    proxy_http_version 1.1;
    
    proxy_set_header    Connection            $connection_upgrade;
    proxy_set_header    Upgrade                $http_upgrade;
    proxy_set_header    Host                $host;
    proxy_set_header    X-Real-IP            $remote_addr;
    proxy_set_header    X-Forwarded-For        $proxy_add_x_forwarded_for;
}

Thanks for your help.

Alan Billi
  • 37
  • 4
  • 1
    In the diagram you have three separate things labeled `localhost`. Each of them thinks `localhost` is itself. Not counting the host system, the 6 containers there have 6 different `localhost`s. [Networking in Compose](https://docs.docker.com/compose/networking/) in the Docker documentation describes how to communicate between different containers. – David Maze Mar 31 '22 at 21:40
  • Thanks for pointing this out @DavidMaze I'm already doing this in my docker-compose building the dashboard containers `networks: frontend: driver: bridge api-server_default: external: true` But how can I tell to the other containers to also use the "api-server_default" network ? Thanks – Alan Billi Apr 01 '22 at 08:10
  • `localhost` still means "this container" and not one of the others. You need to use the other services' Compose names as host names in your Nginx configuration. (Also see [docker nginx appear "502".1 upstream server temporarily disabled while connecting to upstream](https://stackoverflow.com/questions/44994898/docker-nginx-appear-502-1-upstream-server-temporarily-disabled-while-connectin).) – David Maze Apr 01 '22 at 10:33
  • I've finally managed it!!! Thanks @DavidMaze – Alan Billi Apr 01 '22 at 12:41

1 Answers1

0

Thanks to the direction pointed by David here is the solution I've found.

First I've configured my API nginx container to connect on the same external network as my reverse proxy nginx container by adding these lines to the docker-composer.

networks:
      - api-server_default
      - default

....

networks:
   api-server_default:
      external: true

And then in my nginx.conf of the reverse proxy container I had to add some rules regarding the CORS restrictions.

proxy_pass ${REACT_APP_DEV_API_URL}/;
            proxy_http_version 1.1;
            proxy_redirect      off;
            proxy_set_header    Connection            $connection_upgrade;
            proxy_set_header    Upgrade                $http_upgrade;
            proxy_set_header    Host                $host;
            proxy_set_header    X-Real-IP            $remote_addr;
            proxy_set_header    X-Forwarded-For        $proxy_add_x_forwarded_for;
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,
                X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
                add_header 'Content-Type' 'application/json';
                add_header 'Content-Length' 0;
                return 204;
            }
            if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            }
            if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
            }
Alan Billi
  • 37
  • 4