dockernginxdocker-composenginx-reverse-proxy

Nginx reverse proxy configuration problem


I have the follwoing nginx configuration :

server {
    listen 80;
    server_name /*public ip address here , did not want to share it*/;
    # listen 80;
    # server_name _;

    Proxy requests to Nuxt SSR server
    location / {
        proxy_pass http://nuxt-frontend:3000/;  # Proxy requests to the Nuxt SSR server
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $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;
    }

    # Proxy API requests to ASP.NET backend
    # /api/
    location /api/ {
        proxy_pass http://backend:5043/;  # Proxy to .NET backend
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        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;
    }

    # location ~ ^/(en|fr) {
    #     proxy_pass http://nuxt-frontend:3000;
    # }

    # Cache static assets for faster performance
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|map)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }
}

The follwing docker-composer which unites both front-end and back-end :

version: '3.8'
services:

  nginx:
    image: nginx:1.21.1-alpine
    container_name: nginx
    restart: always
    depends_on:
      - nuxt-frontend
      - backend
    ports:
      - "3000:80"
      # - "3000:443"
      # - "8080:80"
      # - "8443:443"
    volumes:
    # host_path:container_path
      - ./frontend/nginx/default.conf:/etc/nginx/default.conf
    privileged: true

  migrations:
    container_name: migrations
    build:
      context: ./backend/C# projects/E_Commerce_BackEnd
      dockerfile: E_Commerce_BackEnd/Migrations.Dockerfile
    secrets:
      - aws_secrets
      - google_auth
    restart: "no"                # run once and exit

  backend:
    image: backend-final
    container_name: backend
    build:
      context: ./backend/C# projects/E_Commerce_BackEnd
      dockerfile: E_Commerce_BackEnd/Dockerfile
      target: final
    ports:
      # HOST_PORT : MACHINE_PORT
      - "5043:5043" 
    expose:
      - "5043"
    environment:
      - ASPNETCORE_ENVIRONMENT=Development
    secrets:
      - aws_secrets
      - google_auth
    depends_on:
      migrations:
        condition: "service_completed_successfully"
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:5043/healthz"]
      start_period: 1s
      timeout: 10s
      retries: 1
    restart: always
    privileged: true
   
  nuxt-frontend:
    image: frontend
    container_name: frontend
    build: 
      context: ./frontend
      dockerfile: dockerfile
    environment:
      - NUXT_HOST=0.0.0.0
      - NUXT_PORT=3000
      - NODE_ENV=development
    # ports:
    #   - "3000:3000"
    expose:
      - "3000"
    depends_on:
      - backend
    restart: "always"
    privileged: true


secrets:
  aws_secrets:
    file: ./secrets/aws_secrets
  google_auth:
    file: ./secrets/google_auth
    

    
  

Now let's say : I make a request to http://ip_address:3000/home` and i get this:

"GET /home HTTP/1.1" 404 153 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0" "-"
nginx       | 2025/03/02 10:39:20 [error] 26#26: *1 open() "/usr/share/nginx/html/home" failed (2: No such file or directory), client: *ip*, server: localhost, request: "GET /home HTTP/1.1", host: "*server_ip*:3000"

I need nginx to work as a reverse proxy. I cannot see the misconfiguration and why it is not working. What to do ? I am using Nuxt.js for front-end and .NET for back-end .

Changed the path from ./frontend/nginx/default.conf:/etc/nginx/default.conf to ./frontend/nginx/default.conf:/etc/nginx/conf.d/default.conf and now the coonfiguration got loaded . But now appeared another problem :

2025/03/02 11:25:57 [error] 31#31: *1 open() "/etc/nginx/html/_nuxt/BOPVxks_.js" failed (2: No such file or directory), client: ip_addr, server: ip_addr, request: "GET /_nuxt/BOPVxks_.js HTTP/1.1", host: "ip_addr:3000", referrer: "http://ip_addr:3000/home"
nginx       | 2025/03/02 11:25:57 [error] 31#31: *4 open() "/etc/nginx/html/_nuxt/pYChs-Yy.js" failed (2: No such file or directory), client: ip_addr, server: ip_addr, request: "GET /_nuxt/pYChs-Yy.js HTTP/1.1", host: "ip_addr:3000", referrer: "http://ip_addr:3000/home"

Looks like it cannot find the .js files from my build folder.


Solution

  • You're mapping your config file to a wrong location, so Nginx doesn't use your config. You have

     - ./frontend/nginx/default.conf:/etc/nginx/default.conf
    

    It should be

     - ./frontend/nginx/default.conf:/etc/nginx/conf.d/default.conf