如何在Nginx下部署多台Create React App开发服务器并实现热重载

云原生阿岚

2026-8-16

解决React Admin应用在Nginx反向代理下热重载失效的问题

问题根源

管理员端应用的WebSocket请求路径配置与Nginx代理规则不匹配：

你给管理员端设置了WDS_SOCKET_PATH=/adminws，但Nginx的location /adminws直接把请求转发到https://127.0.0.1:4000，而Webpack Dev Server（WDS）的WebSocket服务默认监听/ws路径，导致请求找不到正确的服务端点，进而热重载失败。

修复步骤

1. 调整管理员端.env配置

补充WDS_SOCKET_HOST确保WebSocket请求指向代理域名，避免直接访问后端端口：

HTTPS=true
WDS_SOCKET_PORT=443
WDS_SOCKET_HOST=localhost # 线上环境替换为example.com
WDS_SOCKET_PATH=/adminws
FAST_REFRESH=true

2. 修改Nginx代理规则

将/adminws的代理目标调整为WDS的WebSocket端点/ws，也就是在proxy_pass末尾追加/ws：

location /adminws {
        proxy_pass https://127.0.0.1:4000/ws;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}