React项目Docker构建后WebSocket连接失败，求禁用/解决方案

针对你遇到的WebSocket连接失败问题，以下是几种无需修改node_modules的可行解决方案：

1. 调整Webpack生产配置，移除热重载（HMR）相关的WebSocket逻辑 #

如果你的项目基于Webpack（包括Vue CLI、Create React App等脚手架），生产构建后出现WebSocket请求通常是因为热重载插件未被完全禁用，可通过修改配置彻底移除：

Vue CLI项目 #

在项目根目录的vue.config.js中添加配置：

module.exports = {
  configureWebpack: {
    devServer: {
      hot: false,
      liveReload: false
    }
  },
  chainWebpack: config => {
    // 删除热重载相关插件
    config.plugins.delete('hmr');
    // 移除HMR客户端入口
    config.entryPoints.delete('hot');
  }
};

Create React App项目 #

未eject的项目可使用react-app-rewired修改配置：

1. 安装依赖：npm install react-app-rewired --save-dev
2. 根目录创建config-overrides.js：

module.exports = function override(config, env) {
  if (env === 'production') {
    // 过滤掉HMR相关的入口和插件
    config.entry = config.entry.filter(entry => !entry.includes('hot'));
    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'HotModuleReplacementPlugin');
  }
  return config;
};

3. 修改package.json的build脚本：

"scripts": {
  "build": "react-app-rewired build"
}

原生Webpack项目 #

直接修改webpack.prod.js：

module.exports = {
  // ...其他生产配置
  plugins: [
    // 确保不包含HotModuleReplacementPlugin
  ],
  devServer: {
    hot: false,
    liveReload: false
  }
};

2. 检查并移除业务代码中的主动WebSocket连接 #

如果是项目业务代码里主动发起了WebSocket请求，直接定位并删除/注释相关代码，比如：

// 找到类似代码并移除
// const ws = new WebSocket('wss://sibautocom.net:3000/ws');
// ws.onopen = () => { /* ... */ };

3. 通过环境变量控制WebSocket启用逻辑 #

若需要保留代码但仅在开发环境启用，可通过环境变量判断：

// 仅在开发环境初始化WebSocket
if (process.env.NODE_ENV === 'development') {
  const ws = new WebSocket('wss://sibautocom.net:3000/ws');
  // ...后续逻辑
}

Docker构建时确保设置生产环境变量，可在Dockerfile中添加：

ENV NODE_ENV=production

或在npm脚本中指定：

"scripts": {
  "build": "NODE_ENV=production webpack --mode production"
}

4. 修改npm build脚本，强制禁用热重载 #

在package.json的build脚本中添加禁用参数，比如Webpack的--no-hot：

"scripts": {
  "build": "webpack --mode production --no-hot"
}

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