部署至Plesk的Next.js应用请求静态资源返回500内部服务器错误

问题排查与解决方案 #

这是Plesk托管Next.js应用时的常见问题，可按以下步骤逐一排查解决：

1. 替换自定义启动脚本 #

你自行修改的Next.js启动脚本存在路径硬编码的潜在问题，优先使用官方启动方式：

• 在项目package.json的scripts字段中确认存在配置："start": "next start"
• 进入Plesk对应域名的「Node.js」设置页，将「应用启动命令」设置为npm run start，无需使用自行修改的启动脚本文件。

2. 配置静态资源直接由Nginx分发 #

默认Plesk的反向代理规则会将所有请求转发到Node.js进程，静态资源可直接由Nginx返回，避免Node处理异常：

• 进入Plesk对应域名的「Apache和Nginx设置」，在「附加Nginx指令」输入框中添加以下配置（注意替换路径为你的项目实际路径）：

location ^~ /_next/static/ {
    alias /var/www/vhosts/你的域名/httpdocs/.next/static/;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ^~ /public/ {
    alias /var/www/vhosts/你的域名/httpdocs/public/;
    expires 30d;
    add_header Cache-Control "public, immutable";
}

保存后重启Nginx生效。

3. 修正目录与文件权限 #

静态资源500错误大概率和权限有关：

• 确认项目根目录下的.next目录、public目录的权限设置为755，文件权限设置为644
• 确认上述目录的所有者为Plesk对应域名的系统用户（通常为域名关联的FTP账号用户），避免Web服务器或Node.js进程无读取权限。

4. 确认构建产物完整性 #

部署前必须执行生产构建命令：

• 在项目根目录执行npm run build，确保生成完整的.next目录，不要直接上传开发环境下生成的.next目录。
• 可直接进入服务器的.next/static/css目录下，确认报错的120f2e2270820d49a21f.css文件真实存在。

5. 查看具体错误日志 #

如果以上步骤都无法解决，可通过日志定位具体问题：

• 进入Plesk对应域名的「日志」页面，筛选HTTP 500错误的详情，确认是权限问题、文件不存在问题还是Node进程抛出异常。
• 查看Node.js应用的运行日志，确认请求到达Node进程时的具体报错信息。

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