Docker container running nginx serving static files and reverse proxy

Question

I'm trying to split FE (angularjs) from BE (nodejs) so the UI will be served from a different container as the backend. The setup is pretty simple but I'm absolutely new to NGINX and even though I went through a lot of posts and tried several configurations, I'm not achieving it to be working as expected.

When I spin up the containers and hit the localhost in the browser it starts loading of index.html but actually to load the full UI, first waits for the response of the configuration from the backend. API call to backend for the configuration is http://localhost/configuration and this will fail on http status code 502 Bad Gateway:

192.168.192.1 - - [12/Jun/2021:21:18:42 +0000] "GET /configuration HTTP/1.1" 502 559 "http://localhost/"

I can not figure out how to make it working. Below are listed some details about the setup.

Three containers

Postgres
Backend (nodejs)
Frontend (nginx serving static files + act also as a reverse proxy)

docker-compose.yml

version: '1'
services:
  backend:
    build: .
    depends_on:
      - postgres
    ports:
      - '8085:80'
  postgres:
    image: postgres
    ports:
      - '35432:5432'
    volumes:
      - ./core/db/initdb.sql:/docker-entrypoint-initdb.d/init.sql
    environment:
      POSTGRES_PASSWORD: ****redacted**** 
  frontend:
    build:
      context: .
      dockerfile: Dockerfile_UI
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - '80:80'
    restart: always

NGINX config

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /configuration {
        proxy_pass http://app:8085/;
    }
    location /cm/2 {
        proxy_pass http://app:8085/;
    }
}

Examples of API call to backend:

http://localhost:8085/cm/2/purpose
http://localhost:8085/configuration

user_12386847 · Answer

location /location/ {
        rewrite ^/location/(.*) /$1 break;
        proxy_pass http://localhost:5008;
}

I hope this script helps, the default path "/" works fine as you have written, but for specific paths like "/api" or "/location" you need to use the rewrite keyword with regular expression so that the previous path remains the same "http://localhost/" and the forwarding path followed by matching path "/location/somepath" is to be written on the default path.

Docker container running nginx serving static files and reverse proxy

1 Answers