使用Nginx部署Next.js时构建资源加载异常排查

我使用Nginx部署带src/目录的Next.js项目，本地生产构建运行正常，但部署后大量静态资源出现404错误。以下是我的Nginx配置文件：

server {
  server_name my.yousico.com;

  gzip on;
  gzip_proxied any;
  gzip_types application/javascript application/x-javascript text/css text/javascript;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_min_length 256;
  client_body_buffer_size 20M;
  client_body_timeout 60s;
  client_max_body_size 20M;

  location /_next/static/ {
      alias /var/www/yousi-my/front/.next/static/;
      expires 365d;
      access_log off;
    }

  location / {
      proxy_pass http://127.0.0.1:3001;
      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;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/my.yousico.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my.yousico.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
 server {
    if ($host = my.yousico.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


  listen 80;
  server_name my.yousico.com;
    return 404; # managed by Certbot


}

从网络请求情况来看，404的资源集中在/_next/static/及图片优化相关路径，问题出在Nginx对Next.js静态资源的处理配置上，可按以下步骤修复：

• 检查静态资源路径映射：确认alias /var/www/yousi-my/front/.next/static/指向的目录真实存在，且Next.js构建后的静态文件（如js、css、fonts等）确实生成在此路径下。若项目构建后.next目录位置不同，需同步调整alias路径。
• 添加图片优化路径代理：Next.js的图片优化服务（/_next/image/）需要通过代理转发到Next.js服务，否则会返回404。在Nginx配置中新增以下location块：

location /_next/image/ {
    proxy_pass http://127.0.0.1:3001;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
}

• 修复文件权限：确保Nginx进程对/var/www/yousi-my/front/.next/目录拥有读取权限，执行以下命令调整：

chmod -R 755 /var/www/yousi-my/front/.next/

• 验证配置并重启Nginx：修改配置后先执行nginx -t检查语法是否正确，确认无误后重启Nginx服务：

systemctl restart nginx

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