Hostinger VPS部署React网站时CloudPanel出现502 Bad Gateway(nginx)问题求助

1. 检查Node.js应用状态与端口配置 #

• 执行ps aux | grep node查看Node.js进程是否正常运行；若用PM2管理则执行pm2 list确认进程状态。
• 核对CloudPanel中应用设置的监听端口与代码中实际使用的端口是否一致（比如React开发环境默认3000，生产环境用Express托管时通常也是3000，需确保无端口冲突）。

2. 分析Nginx错误日志定位问题 #

• 查看Nginx错误日志，执行tail -f /var/log/nginx/error.log或tail -f /home/[你的域名]/logs/nginx.error.log（CloudPanel自定义日志路径），502错误日志会明确显示原因：比如connect() failed (111: Connection refused) while connecting to upstream说明Nginx无法连接后端服务端口。

3. 验证Nginx反向代理配置 #

• 检查CloudPanel生成的Nginx配置文件（通常在/etc/nginx/sites-available/[你的域名].conf），确认proxy_pass指向正确，比如http://localhost:3000，端口需与应用监听端口完全匹配。
• 确保配置中包含必要的代理头，避免后端服务拒绝请求：

  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;
  

• 执行nginx -t测试配置文件语法是否合法，若报错修正后执行systemctl reload nginx重载配置。

4. 确认React部署方式正确 #

• 若部署静态站点：确保已执行npm run build生成build文件夹，CloudPanel应用类型选择Static Site，并将根目录设置为build路径。
• 若用Node.js服务器托管静态文件：检查代码中是否正确指向build目录，比如Express中需添加：

  const path = require('path');
  app.use(express.static(path.join(__dirname, 'build')));
  

5. 防火墙与端口放行检查 #

• 检查Hostinger VPS防火墙是否放行应用监听的端口（如3000），可执行ufw status查看规则，若未放行则执行ufw allow 3000。
• 确认CloudPanel自带的防火墙规则未限制Nginx访问后端端口。

6. SSL配置验证 #

• 检查Nginx配置中ssl_certificate和ssl_certificate_key的文件路径是否正确，证书文件权限需设置为chmod 644确保Nginx可读取。
• 执行nginx -t验证SSL配置无语法错误，并重载Nginx服务。

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