Nginx routes frontend API calls to wrong backend ports using Docker

  docker, nginx, port, routes

Having spent my last few days searching the i-net for a solution I hope for someone to spot the mistake. I have a Vue frontend (vite 2.0, vue 3.0) and a Golang backend (1.16) which is dockerized. Both the backend and frontend come up fine, but API calls from the frontend (which should be routed to port 8080) are still only working at port 3300. This means, I can call the API from postman using the 3300 port just fine. So how do I achieve localhost:3300/api/v1/foo to be routed to localhost:8080/api/v1/foo. Thanks!

Relevant parts of the config or explanations below. I limited them to the one’s interfering with Docker and/or Nginx.

docker-compose(partly):

version: '3'

networks:
  network:
    ipam:
      driver: default

services:

  frontend:
    build:
      context: ./
      dockerfile: ./frontend_dockerfile
    container_name: saas-frontend
    restart: always
    ports:
      - '3300:3300'
    depends_on:
      - backend
    command:
      - nginx-debug
      - '-g'
      - daemon off;
    networks:
      network:

  backend:
    build:
      context: ./
      dockerfile: ./backend_dockerfile
    container_name: saas-backend
    restart: always
    ports:
      - '8080:8080'
      networks:
        network:

Dockerfile (partly):

COPY docker/etc/nginx/nginx.conf.tpl /etc/nginx/nginx.conf.tpl
COPY --from=builder /frontend/dist/ /var/www/
ENV BACKEND_API ="http://localhost:8080/"
EXPOSE 80

frontend_dockerfile (partly):

FROM nginx:alpine

COPY .docker-compose/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=0 /saas_frontend/dist /usr/share/nginx/html
RUN cat /etc/nginx/nginx.conf
RUN cat /etc/nginx/conf.d/default.conf
RUN ls -al /usr/share/nginx/html
CMD ls -al /usr/share/nginx/html

backend_dockerfile (partly):

EXPOSE 8080

nginx.conf.tpl (full):

daemon on;
worker_processes  auto;

error_log  /var/log/nginx/error.log error;


events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile off;
    keepalive_timeout  65;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

server {

        listen 80;

        location / {
          root /var/www;
          try_files $uri /index.html;
          index  index.html;
        }

        location /v1/ {
          proxy_pass ${BACKEND_API} ;
        }

        default_type application/json; # If no content-type then assume JSON
        error_page 400 = @400;
        location @400 { return 400 '{"status":400,"message":"Bad request"}n'; }

        error_page 401 = @401;
        location @401 { return 401 '{"status":401,"message":"Unauthorized"}n'; }

        error_page 403 = @403;
        location @403 { return 403 '{"status":403,"message":"Forbidden"}n'; }

        error_page 404 = @404;
        location @404 { return 404 '{"status":404,"message":"Resource not found"}n'; }
}
}

default.conf (full):

server {
    listen       3300;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        try_files $uri /index.html;
    }

    location /api {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8080;
     }
 }

Source: Docker Questions

LEAVE A COMMENT