生产环境下React 18.2.0出现WebSocket连接失败错误求助

问题分析 #

你遇到的是Webpack Dev Server（WDS）热更新socket在生产环境下的连接超时问题——本地开发时WDS的socket能正常连接本地服务，但线上环境不需要这个热更新机制，或者配置不匹配导致延迟报错。

解决方案 #

• 部署生产构建产物
  不要直接把开发模式的代码部署到线上，执行npm run build（或项目对应的生产构建命令）生成静态资源包，再将构建后的dist（或build）目录部署到服务器，彻底规避WDS的开发相关逻辑。

• 强制关闭WDS的热更新socket
  如果必须在服务器上运行WDS（不推荐生产环境这么做），修改webpack配置：

  module.exports = {
    devServer: {
      hot: false,
      liveReload: false,
      client: {
        webSocketURL: {
          hostname: '0.0.0.0',
          port: 0,
          pathname: '/ws',
          protocol: 'auto',
        },
      },
    },
  };
  

  或者在启动命令中直接注入环境变量：

  WDS_SOCKET_PORT=0 NODE_ENV=production npm start
  

• 检查服务器代理/防火墙规则
  若使用Nginx等反向代理，确保配置中允许socket连接的转发；同时确认服务器防火墙没有拦截WDS尝试使用的端口。但优先推荐用生产构建的方式解决，而非开放端口。

• 修正环境变量配置
  如果是Create React App等脚手架项目，环境变量需要添加对应前缀（如REACT_APP_WDS_SOCKET_PORT=0），否则不会被识别。也可以在package.json的启动命令中直接附加变量：

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

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