Webpack DevServer HMR 不适用于 ngrok->docker

Posted 2023-04-18

【中文标题】Webpack DevServer HMR 不适用于 ngrok->docker

【英文标题】：Webpack DevServer HMR not working with ngrok->docker

【发布时间】：2021-12-11 14:02:03

【问题描述】：

我正在尝试让 Webpacks DevServer HMR 功能在我的设置上工作。它看起来像这样：

QuasarJS CLI 在本地 Docker 容器中为 MYAPP 运行 Webpack DevServer 通过 ngrok 隧道访问 Docker 容器

码头港口

0.0.0.0:8201->8201/tcp

ngrok 配置：

Forwarding   https://MYAPP.ngrok.io -> http://localhost:8201 

Webpack DevServer 配置（Webpack 版本：5.59.1）

devServer: 
  port: 8201,

  headers: 
    "Access-Control-Allow-Origin": "*",
  ,

  client: 
    webSocketURL: 
      hostname: "0.0.0.0",
      pathname: "/ws",
      port: 8201,
    ,
  ,
,

在 Chrome 浏览器开发工具中，我可以看到 MYAPP 正在尝试连接到本地 DevServer 但没有成功：

WebSocket connection to 'wss://MYAPP.ngrok.io:8201/ws' failed:

WebSocketClient @   WebSocketClient.js?8f51:13
initSocket  @   socket.js?d11d:15
eval    @   socket.js?d11d:34

有什么想法吗？

【参考方案1】：

在文档中找到它：

要从浏览器获取协议/主机名/端口，请使用 webSocketURL: 'auto://0.0.0.0:0/ws'。

https://webpack.js.org/configuration/dev-server/#websocketurl

现在我的 Webpack DevServer 配置如下所示：

devServer: 
  port: 8201,

  headers: 
    "Access-Control-Allow-Origin": "*",
  ,

  client: 
    webSocketURL: "auto://0.0.0.0:0/ws",
  ,
,

有效！

【讨论】：

对于 react（你无法轻松访问 webpack 配置），你还可以使用 env vars，例如：WDS_SOCKET_PORT、WDS_SOCKET_HOST 和 WDS_SOCKET_PATH。