如何通过Nginx和PM2正确代理React Router服务端渲染应用

核心问题定位 #

直接用node server.js启动应用完全正常，但通过PM2启动后前端路径及静态资源请求全部返回404，排除Nginx配置问题后，重点排查PM2启动时的工作目录、环境变量及启动命令细节。

具体排查步骤 #

1. 指定PM2启动的工作目录

   • 直接执行node server.js时，工作目录是项目根目录，server.js中引用public目录的相对路径有效；但PM2直接指定文件绝对路径启动时，工作目录可能不是项目根目录，导致静态文件路径解析错误。
   • 修正启动命令：

     pm2 start /path/to/server.js --name AppName --cwd /path/to/project-root
     

   • 其中/path/to/project-root是包含public目录和server.js的项目根路径。

2. 验证进程环境变量一致性

   • PM2启动的进程环境变量可能与直接node启动时不同（比如NODE_ENV、静态资源路径配置等），导致服务端渲染时路径解析异常。
   • 查看PM2进程的环境变量：

     pm2 show AppName
     

   • 对比直接node启动时的环境变量（执行printenv查看），确保关键变量（如NODE_ENV=production）一致，必要时通过--env参数指定环境配置。

3. 确认PM2启动命令的准确性

   • 若启动命令中仅指定目录而非server.js文件，PM2可能无法正确识别入口文件，导致服务未按预期启动。
   • 确保命令明确指向server.js：

     pm2 start /path/to/server.js --name AppName
     

4. 查看PM2应用日志定位错误

   • 服务端渲染过程中的路径解析错误会输出到PM2日志中，通过日志可直接定位问题：

     pm2 logs AppName
     

   • 重点关注是否有文件不存在类的错误信息，确认静态资源路径是否正确。

5. 验证PM2进程监听端口

   • 检查PM2启动的进程是否监听了预期的PORT，避免端口不一致导致Nginx代理请求失败：

     pm2 monit
     # 或用netstat查看端口占用
     netstat -tulpn | grep node
     

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