Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Docker container running nginx serving static files and reverse proxy

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
like image 351
David Fedor Avatar asked Jul 11 '26 13:07

David Fedor


1 Answers

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.

like image 105
Rajat Hongal Avatar answered Jul 13 '26 15:07

Rajat Hongal



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!