nginx reverse proxy to backend inside docker

Question

I'm trying to deploy my app on a server with docker compose:

services:
  frontend:
    container_name: frontend
    depends_on:
      - backend
    build:
      context: frontend
      dockerfile: ./Dockerfile
    ports:
      - 80:80
    environment:
      NODE_EVN: production
    networks:
      - app-network

  backend:
    container_name: backend
    depends_on:
      - db
    build:
      context: backend
      dockerfile: ./Dockerfile
    ports:
      - 8000:8000
    environment:
      NODE_EVN: production
      DB_URL: mongodb://db/dbname
    networks:
      - app-network

  db:
    container_name: db
    image: mongo:latest
    ports:
      - 27017:27017
    volumes:
      - dbname:/data/db
    networks:
      - app-network

volumes:
  dbname:

networks:
  app-network:

My frontend container has ngingx installed to deliver compiled react app and serve as a reverse proxy to backend api. nginx.conf:


{
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api/v1/ {
        proxy_pass http://backend:8000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_redirect off;
        proxy_buffering off;
        proxy_cache off;
    }
}

Frontend works, but I'm getting 404 when trying to access backend:

frontend      | <my ip address> - - [30/Jul/2024:18:34:38 +0000] "GET /api/v1/ HTTP/1.1" 404 153 "-" "curl/8.5.0" "-"

I tried to docker exec to frontend container and curl http://backend:8000 from there - Ok, got 200 response. What am I doing wrong? How can I configure nginx to proxy /api/v1/ to backend ?

One small thing. My app is running under /myapp/, but on separate vm. So they reverse proxied to it:

location /myapp/ {
        proxy_pass http://<my vm IP-address>:80/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_redirect off;
        proxy_buffering off;
        proxy_cache off;
}

So it looks like -> reverse proxy to my vm : serve frontend from container and reverse proxy api requests to backend in another container.

I have tried to change locations in my nginx.conf to /myapp/ and /myapp/api/v1/ accordingly, but it didn't work.

error log from nginx:

2024/07/31 03:24:04 [error] 30#30: *7 open() "/usr/share/nginx/html/api/v1" failed (2: No such file or directory), client: <COMPANY NGINX> server: localhost, request: "GET /api/v1 HTTP/1.1", host: "www.company-web-site.com"

Looks like it trying to server /api/v1 from location /, not even looking at location /api/v1.

Maybe check the nginx logs to see what is happening for you to get a 404 — user655941
– user655941, Commented Jul 30, 2024 at 19:55
I have updated post with error log from nginx. Looks like it trying to server as another static site, not event considering proxy pass location. — lichb0rn
– lichb0rn, Commented Jul 31, 2024 at 3:41

lichb0rn · Accepted Answer · 2024-07-31 11:46:54Z

I couldn't make nginx work as a web server and as a reverse proxy, so went with a separate container with reverse proxy nginx in front of the app. docker compose:

services:
  reverse-proxy:
    image: nginx
    container_name: proxy
    depends_on:
      - frontend
      - backend
    volumes:
      - ./proxy/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
    restart: unless-stopped

  frontend:
    container_name: frontend
    depends_on:
      - backend
    build:
      context: frontend
      dockerfile: ./Dockerfile
    ports:
      - 8080:80
    environment:
      NODE_EVN: production
    restart: on-failure

  backend:
    container_name: backend
    depends_on:
      - db
    build:
      context: backend
      dockerfile: ./Dockerfile
    ports:
      - 8000:8000
    environment:
      NODE_EVN: production
      DB_URL: mongodb://db/dbname
    restart: on-failure

  db:
    container_name: db
    image: mongo:latest
    ports:
      - 27017:27017
    volumes:
      - spares:/data/dbvolume
    restart: on-failure

volumes:
  dbvolume:

proxy nginx.conf:

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
  worker_connections 1024;
}

http {
 server {
    listen 80;
    server_name localhost 127.0.0.1;

    location / {
      proxy_pass          http://frontend:80;
      proxy_set_header    X-Forwarded-For $remote_addr;
    }

    location /api/v1/ {
      proxy_pass          http://backend:8000/api/v1/;
      proxy_set_header    X-Forwarded-For $remote_addr;
    }

  }
}

frontend nginx.conf:

server {
    listen 80;
    server_name localhost ;

    include /etc/nginx/mime.types;

    location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try files $uri $uri /index.html;
    }
}

Not what I wanted, but that works.

Collectives™ on Stack Overflow

nginx reverse proxy to backend inside docker

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related