Plesk部署React+Express项目路由失效及504错误问题求助

配置调整方案 #

1. Plesk站点核心配置修正

• 确认已安装Plesk官方Node.js扩展，进入对应站点的「Node.js」设置页：
  • 应用根目录设置为 configurator/api
  • 启动文件设置为 app.js
  • 文档根目录设置为 configurator/api（所有请求会由Express统一处理，不需要让Apache直接暴露build目录）
  • 开启Node.js服务，确认进程启动成功无报错
• 删除站点目录下原来的.htaccess文件，避免重写规则和代理规则冲突
• 使用Plesk官方Node.js扩展时会自动生成反向代理规则，无需手动配置；若未使用扩展，可在站点的「Apache与Nginx设置」中添加如下Nginx附加规则：

location / {
    proxy_pass http://localhost:<你的Express监听端口>;
    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;
}

注意将<你的Express监听端口>替换为你app.js中实际监听的端口，如果你没有显式设置监听端口，需要在module.exports = app前添加代码 app.listen(process.env.PORT || 3000)

2. 代码逻辑修正

• 删除冗余CORS配置：你已经引入了cors中间件，无需额外手动设置响应头，同时将允许来源修改为你的线上域名，示例如下：

// 删除这段冗余代码
// app.use((req, res, next) => {
//   res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
//   next();
// });
// 替换cors配置
app.use(cors({
  origin: 'https://你的实际域名'
}));

• 保持当前/result路由在静态资源和React路由规则之前的顺序即可，确保接口请求不会被React路由接管。

3. 504超时问题排查

• 登录服务器后台，手动执行node app.js启动服务，确认无MongoDB连接报错、端口占用报错等启动异常
• 确认服务器安全组和Plesk防火墙已开放你Express使用的端口
• 若仍有超时，可在Plesk的「Apache与Nginx设置」中调大代理超时时间：

proxy_connect_timeout 600;
proxy_send_timeout 600;
proxy_read_timeout 600;
send_timeout 600;

4. React路由失效问题解决

按照上述配置调整后，所有非接口、非静态资源的请求都会被Express的app.get('*')规则匹配，返回index.html，React前端路由刷新不会再出现404。

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