CODEWITHSUNDEEP
dockernginxdocker-composeaxios
tobilocker
tobilocker

Reputation: 981

NGINX: Connect to backend with service name over Docker Compose's network from frontend

I have a simple dockerized flask backend that listens on 0.0.0.0:8080 and simple dockerized react frontend that sends a request to localhost:8080/api/v1.0/resource. Now i want to run those containers in docker compose and issue the request to the service's name backend The compose file looks like this:

version: '3'
services:
  backend:
    ports:
      - "8080:8080"
    image: "tobiaslocker/simple-dockerized-flask-backend:v0.1"
  frontend:
    ports:
      - "80:80"
    image: "tobiaslocker/simple-dockerized-react-frontend:v0.1"

The NGINX configuration that works for requests to localhost:

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  }
}

The frontend sends the request axios.get('http://localhost:8080/api/v1.0/resource')

My questions:

  1. How do i have to configure NGINX to be able to use the service name (e.g. backend)
  2. How do i have to issue the request to match the configuration.

I am not sure how the proxy_pass will take effect when sending the request from the frontend and found it hard to debug.

Regards

Upvotes: 0

Views: 1678

Answers (1)

tobilocker
tobilocker

Reputation: 981

My Answers:

  1. How do i have to configure NGINX to be able to use the service name (e.g. backend)
server {
    listen 80;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://backend:8080;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

Taken from here. Not sure if all settings are relevant but only setting proxy_pass didn't work for me.

  1. How do i have to issue the request to match the configuration.

Same as before: axios.get('http://localhost:8080/api/v1.0/resource'), which makes sense, since it works locally and proxied with NGINX.

Upvotes: 1

Related Questions