Docker 中的 NGINX 和 Nuxt 问题：_nuxt 文件未找到 (404)

Question

我正在开发一个使用在 Docker 容器内运行的 Symfony（后端）和 Nuxt（前端）的项目。虽然 Symfony API 工作完美，但我遇到了一个问题，NGINX 不提供来自 Nuxt 的静态文件，特别是 _nuxt/ 目录中的静态文件，返回 404 错误。

设置如下：

• 后端：Symfony
• 前端：Nuxt 3（带 SSR）
• 网络服务器：NGINX
• 数据库：MariaDB

Symfony 的 API 通过 NGINX 正确提供，但 Nuxt 的静态文件（特别是 _nuxt/ 中的文件）返回 404 错误。我已经验证 Nuxt 文件正在构建并在 .output/public/_nuxt/ 文件夹中正确输出，但 NGINX 似乎无法正确提供它们。

这是我当前的配置：

1。 docker-compose.yml

version: '3.8'
services:
  db:
    image: mariadb:10.6
    container_name: "mariadb"
    command: ["--default-authentication-plugin=mysql_native_password"]
    ports:
      - "3306:3306"
    env_file:
      - ./.env.prod

  php:
    build: ./back/php-fpm
    container_name: "php"
    ports:
      - "9001:9001"
    volumes:
      - ../back:/var/www/symfony:cached
      - ../log/symfony:/var/www/symfony/var/log:cached
    env_file:
      - ./.env.prod

  nginx:
    build: ./back/nginx
    container_name: "nginx"
    ports:
      - "80:80"
    volumes:
      - ../back:/var/www/symfony:cached
      - ../front/.output:/var/www/html/nuxt/.output
    env_file:
      - ./.env.prod

  nuxt:
    build:
      context: ../
      dockerfile: infra/front/Dockerfile
    container_name: "nuxt"
    volumes:
      - ../front/.output:/var/www/html/nuxt/.output
    expose:
      - "3000"

networks:
  default:
    driver: bridge

nginx.conf：

user nginx;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 2048;
    use epoll;
}

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 15;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    access_log /dev/stdout;
    error_log /dev/stderr crit;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    open_file_cache max=1000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

3. config.conf（特定NGINX配置）

upstream php-upstream {
    server php:9001;  # PHP-FPM listening on this port for Symfony
}

server {
    listen 80;
    server_name localhost;

    # Proxy for Nuxt.js (frontend application)
    location / {
        proxy_pass http://nuxt:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_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;
    }

    # Handle _nuxt/ static files
    location /_nuxt/ {
        alias /var/www/html/nuxt/.output/public/_nuxt/;  # Absolute path to _nuxt files
        access_log /dev/stdout;
        error_log /dev/stderr;
        expires max;
        log_not_found off;
    }

    # Handle Symfony static files
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        root /var/www/symfony/public;  # Root for Symfony static files
        expires max;
        log_not_found off;
    }

    # Proxy requests to Symfony API through PHP-FPM
    location /api/ {
        root /var/www/symfony/public;  # Root for Symfony API
        try_files $uri /index.php$is_args$args;
    }

    # PHP-FPM handling for Symfony
    location ~ ^/index\.php(/|$) {
        root /var/www/symfony/public;
        fastcgi_pass php-upstream;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param HTTPS $https if_not_empty;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
    }

    # Redirect logs to stdout/stderr for Docker
    access_log /dev/stdout;
    error_log /dev/stderr;

    # Custom error pages
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
}

nuxt.config.ts：

export default defineNuxtConfig({
  ssr: true,
  target: 'static',
  build: {
    extractCSS: true,
  },
  generate: {
    dir: '.output/public',
  },
})

观察到的行为：

• Symfony API：工作正常，我可以通过 /api/test 上的curl 调用 API 并收到正确的响应。
• Nuxt 文件（_nuxt/）：请求 /BV9kNyU2.js 等静态文件时，出现 404 错误。

调试尝试：

• 卷检查：我验证了 nuxt 和 nginx 容器之间的卷是否已正确安装。检查容器时，Nuxt 文件位于 /var/www/html/nuxt/.output/public/_nuxt/。
• 日志：NGINX 或 Nuxt 日志中没有明显错误，表明存在路由或文件解析问题。
• Docker 网络：容器位于同一个 Docker 网络上，可以相互通信。 Symfony 的 API 按预期工作。

问题：

为什么 NGINX 无法从 Nuxt 提供静态文件，即使它们存在于容器中？我在配置中遗漏了什么吗？

谢谢您的帮助！

这应该为您提供一个结构良好的 StackOverflow 帖子，清楚地概述了问题和您正在使用的配置。您应该会收到有用的回复，以进一步解决问题。

Answer 1

检查NGINX容器内路径

/var/www/html/nuxt/.output/public/_nuxt/

中的文件。

并检查授予

/var/www/html/nuxt/.output/public/_nuxt/

的文件权限