Webpack DevServer HMR在ngrok转发Docker服务场景下无法工作如何解决

问题根因 #

当前WebSocket连接失败的核心原因是Webpack DevServer的客户端WebSocket配置错误：

• ngrok对外暴露的HTTPS服务默认使用443端口，你配置的webSocketURL.port: 8201会让浏览器请求wss://MYAPP.ngrok.io:8201/ws，但ngrok并未监听8201端口，导致连接被拒绝
• webSocketURL.hostname: 0.0.0.0是服务端监听地址，不适用于客户端场景

解决步骤 #

1. 修正DevServer配置 #

替换原有devServer配置为以下内容：

devServer: {
  // 服务端监听0.0.0.0，确保Docker容器外部可访问
  host: '0.0.0.0',
  port: 8201,
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
  client: {
    webSocketURL: {
      // 自动继承当前页面的域名、端口、协议，适配ngrok场景
      hostname: 'auto',
      pathname: '/ws',
      port: 'auto',
      protocol: 'auto'
    },
  },
  // 允许所有host访问，避免ngrok转发的域名被校验拦截
  allowedHosts: 'all'
}

2. 验证Docker端口监听 #

进入Docker容器执行命令netstat -tunlp | grep 8201，确认DevServer监听地址为0.0.0.0:8201，如果是127.0.0.1则说明上一步的host配置未生效。

3. 验证ngrok连通性 #

直接访问https://MYAPP.ngrok.io确认页面可正常加载，如果无法打开优先排查ngrok是否正常启动、Docker端口映射是否配置正确。

4. 校验WebSocket连接 #

重启DevServer后刷新页面，打开Chrome开发者工具的「网络」面板，筛选「WS」类型请求，确认WebSocket连接地址为wss://MYAPP.ngrok.io/ws（无8201端口），状态码为101 Switching Protocols即代表连接成功，HMR可正常使用。

异常兜底排查 #

如果修改配置后仍然无法连接，按以下顺序排查：

• 确认Webpack DevServer版本为v4及以上，和Webpack 5.59.1版本兼容
• 检查是否有浏览器代理插件、网络防火墙拦截WebSocket请求
• 确认ngrok配置未限制/ws路径的转发

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