部署Node.js与React.js至Nginx服务器时遭遇502 Bad Gateway错误求助

• 检查Node服务状态

  • 执行ps aux | grep node或pm2 list（用pm2管理时）确认Node进程是否在运行
  • 直接访问Node服务的本地端口（如http://localhost:3000），若无法响应，先排查Node启动问题：直接运行node app.js看终端报错，或通过pm2 logs查看服务日志

• 核对Nginx反向代理配置

  • 打开Nginx配置文件（通常在/etc/nginx/sites-available/或/etc/nginx/conf.d/目录下），确认proxy_pass指向的Node服务地址、端口完全正确，例如proxy_pass http://localhost:3000;
  • 修改配置后，先执行sudo nginx -t检查语法是否正确，再重启Nginx：sudo systemctl restart nginx

• 排查端口与防火墙问题

  • 用netstat -tulpn | grep [你的Node端口]查看端口是否被占用，或Node是否真的监听该端口
  • 临时关闭防火墙（如sudo ufw disable）测试是否能正常访问，若恢复则需配置防火墙允许Nginx访问本地端口

• 查看Nginx错误日志定位原因

  • 查看/var/log/nginx/error.log，日志会明确502的触发原因，例如connect() failed (111: Connection refused)说明Nginx无法连接到Node服务，针对性解决即可

• 处理React静态文件部署权限（前后端分离场景）

  • 若React是打包后的静态文件，Nginx配置需直接指向build文件夹，示例配置：

    server {
        listen 80;
        server_name your-domain.com;
        root /var/www/react-app/build;
        index index.html;
    
        location / {
            try_files $uri $uri/ /index.html;
        }
    
        # 如需转发API请求到Node服务
        location /api {
            proxy_pass http://localhost:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
    

  • 确保build文件夹权限正确，执行sudo chown -R www-data:www-data /var/www/react-app/build让Nginx能读取文件

内容的提问来源于stack exchange，提问作者Chiến Võ Quang