DigitalOcean部署Nuxt3+Laravel8时Nginx 502错误排查

一、502 Bad Gateway 错误排查 #

当前前端Nginx配置是反向代理到localhost:3000，502说明Nginx无法连接到Nuxt服务，按以下步骤检查：

1. 确认Nuxt服务是否在运行

   • 执行ps aux | grep node查看是否有Nuxt相关的Node进程
   • 执行ss -tlnp | grep 3000确认3000端口是否被监听，如果没有输出，说明Nuxt服务未启动或端口未绑定
   • 若服务未运行，进入前端项目目录cd /var/www/md-alluminio，执行生产启动命令：node .output/server/index.mjs（需先完成npm run build构建）；建议用进程管理器（如pm2）托管服务，避免终端关闭后进程终止：pm2 start .output/server/index.mjs --name nuxt-frontend

2. 查看Nginx错误日志定位具体原因

   • 执行tail -n 20 /var/log/nginx/error.log，日志中会明确显示502的触发原因（如connect() failed (111: Connection refused) while connecting to upstream，直接说明Nuxt服务未在3000端口运行）

3. 检查Nuxt服务绑定地址

   • 确保Nuxt服务绑定的是localhost或0.0.0.0，如果服务仅绑定了特定IP（如服务器外网IP），Nginx无法通过localhost访问；可在Nuxt配置文件nuxt.config.ts中设置server.host: '0.0.0.0'

二、移除location后出现403 Forbidden 错误排查 #

403说明Nginx有权限问题或找不到指定的索引文件：

1. 目录权限检查

   • Nginx默认以www-data用户运行，确保前端目录权限正确：

     chown -R www-data:www-data /var/www/md-alluminio
     chmod -R 755 /var/www/md-alluminio
     

2. 索引文件与目录指向检查

   • 你当前Nginx配置的root是/var/www/md-alluminio，但Nuxt3生产构建后的静态文件或服务入口不在项目根目录：
     • 如果是静态部署（无需Node服务）：需先执行npm run generate生成静态文件到.output/public，然后修改Nginx的root为/var/www/md-alluminio/.output/public
     • 如果是Node服务模式：不需要指向静态目录，必须保留反向代理的location配置

三、推荐配置示例 #

1. Nuxt3 Node服务模式配置 #

适合需要SSR/SSG动态渲染的场景，需保持Node进程运行：

server {
    listen 80;
    listen [::]:80;
    server_name 157.230.109.19;

    location / {
       proxy_pass http://localhost: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;
       proxy_cache_bypass $http_upgrade;
    }
}

2. Nuxt3 静态部署模式配置 #

适合纯静态站点，无需Node进程：

server {
    listen 80;
    listen [::]:80;
    index index.html index.htm;
    root /var/www/md-alluminio/.output/public;
    server_name 157.230.109.19;

    location / {
        try_files $uri $uri/ /index.html; # 处理SPA路由
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

四、配置验证与重启 #

每次修改Nginx配置后，先验证配置合法性：

nginx -t

如果输出test is successful，再重启Nginx使配置生效：

systemctl reload nginx

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