使用Nginx自签名证书时React应用开发服务器无法热重载

问题原因 #

Create React App的热重载依赖WebSocket实现实时通信，当前Nginx配置未处理WebSocket的连接升级请求，导致客户端无法与开发服务器建立WebSocket连接，热重载功能失效。

解决方案 #

1. 修改Nginx配置，添加WebSocket支持 #

更新你的Nginx server配置，在location /块中添加WebSocket相关代理配置：

server {
    listen 80;
    server_name portal.clondon.vm.cinch.io;
    return 301 https://portal.clondon.vm.cinch.io$request_uri;
}

server {
    listen       443 ssl;
    ssl_certificate /etc/nginx/ssl/nginx.pem;
    ssl_certificate_key /etc/nginx/ssl/nginx.key;
    server_name  portal.clondon.vm.cinch.io;

    location / {
        proxy_pass         http://0.0.0.0:3000;
        proxy_redirect     off;

        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        
        # 新增WebSocket支持配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        # 设置长连接超时，避免WebSocket连接过早断开
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

修改完成后，重启Nginx生效：

sudo nginx -s reload

2. 配置React开发服务器的WebSocket连接地址 #

Create React App的Webpack Dev Server默认会使用内部地址作为WebSocket连接目标，需要指定外部域名让客户端能正确连接：

方法1：启动时指定环境变量

在启动开发服务器的命令中添加WDS_SOCKET_HOST和HOST变量：

WDS_SOCKET_HOST=portal.clondon.vm.cinch.io HOST=0.0.0.0 npm start

• WDS_SOCKET_HOST：指定WebSocket连接的主机域名
• HOST=0.0.0.0：让开发服务器监听所有网络接口，确保远程Nginx能访问

方法2：通过.env文件配置

在项目根目录创建.env.development文件，添加以下内容：

WDS_SOCKET_HOST=portal.clondon.vm.cinch.io
HOST=0.0.0.0

之后直接运行npm start即可，环境变量会自动生效。

3. 验证热重载功能 #

完成上述配置后，重启React开发服务器，修改任意React组件的代码，观察浏览器是否自动刷新并展示修改后的内容，确认热重载正常工作。

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