Nginx反向代理配置故障排查：Nuxt静态资源404问题

环境配置 #

Nginx初始配置 #

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";
    }
}

Docker Compose初始配置 #

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

阶段一：Nginx配置未加载导致404 #

请求http://ip_address:3000/home时出现以下错误：

"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"

原因：Docker Compose中Nginx配置挂载路径错误，./frontend/nginx/default.conf:/etc/nginx/default.conf不符合Alpine版Nginx的默认加载逻辑，Nginx未加载自定义反向代理配置，而是使用默认配置尝试在本地静态目录查找资源。

临时修复：将挂载路径修改为./frontend/nginx/default.conf:/etc/nginx/conf.d/default.conf，Alpine版Nginx默认会加载/etc/nginx/conf.d/下的所有.conf文件，修改后配置成功加载。

阶段二：静态资源无法找到 #

配置加载后，页面能访问但静态资源（如_nuxt下的JS文件）出现404：

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"

原因：Nginx配置中静态资源的location规则未设置反向代理，导致Nginx直接在本地容器目录查找静态文件，而Nuxt SSR服务的静态资源由自身提供，并未挂载到Nginx容器中。

最终解决方案 #

1. 修正Nginx静态资源配置 #

修改静态资源location规则，将请求代理到Nuxt服务，同时保留缓存配置：

# 缓存静态资产并代理到Nuxt SSR服务
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|map)$ {
    proxy_pass http://nuxt-frontend:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    expires 6M;
    access_log off;
    add_header Cache-Control "public";
}

2. 完整修正后的Nginx配置 #

server {
    listen 80;
    server_name 你的公网IP;

    # 代理所有页面请求到Nuxt SSR服务
    location / {
        proxy_pass http://nuxt-frontend:3000/;
        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;
    }

    # 代理API请求到.NET后端
    location /api/ {
        proxy_pass http://backend:5043/;
        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;
    }

    # 缓存静态资产并代理到Nuxt SSR服务
    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|map)$ {
        proxy_pass http://nuxt-frontend:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }
}

3. 验证步骤 #

1. 重启Docker Compose服务：

   docker-compose down && docker-compose up -d
   

2. 访问http://ip_address:3000/home，检查页面及静态资源加载状态
3. 查看Nginx日志确认无404错误：

   docker logs nginx
   

内容的提问来源于stack exchange，提问作者makasa29