生产环境create-react-app自动生成WebSocket连接失败求助

算力阿峰

2026-6-18

解决生产环境下Create-React-App残留WDS WebSocket连接报错问题

核心问题分析

生产构建后仍出现Webpack Dev Server（WDS）的WebSocket请求，本质是项目未以生产模式运行，或者构建时未彻底禁用WDS的热重载相关配置。

具体解决步骤

1. 确保正确的构建与启动流程

必须执行生产构建命令：
```
npm run build
```
生产环境不能用npm start启动（这是开发模式，会自带WDS），需用静态文件服务器托管build目录，比如：
```
# 先全局安装serve
npm install -g serve
# 启动静态服务器
serve -s build -l 3000
```

2. 强制禁用WDS的WebSocket配置

在项目根目录创建.env.production文件，添加以下内容彻底关闭WDS的Socket功能：

WDS_SOCKET_PORT=0
WDS_SOCKET_HOST=localhost

或者直接修改package.json的build脚本，嵌入环境变量：

"scripts": {
  "build": "WDS_SOCKET_PORT=0 react-scripts build"
}

注意：Windows系统需调整为：
"build": "set WDS_SOCKET_PORT=0 && react-scripts build"

3. 修正Nginx配置（无需反向代理WDS）

如果用静态文件服务器托管build目录，Nginx无需配置/ws或/wss，直接指向静态文件即可：

server {
    listen 80;
    listen [::]:80;
    server_name domain.com www.domain.com;

    # 指向项目build目录的绝对路径
    root /usr/local/your-project/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:9999;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

如果坚持反向代理到静态服务器（如serve的3000端口），确保serve是生产模式，且删除Nginx中/ws、/wss的配置项——生产静态文件不存在WDS的WebSocket请求。