Webpack DevServer HMR 不适用于 ngrok->docker

Question

我正在尝试让 Webpacks DevServer HMR 功能在我的设置中运行。它看起来像这样：

QuasarJS CLI 在本地 Docker 容器中为 MYAPP 运行 Webpack DevServer
Docker容器通过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

有什么想法吗？

Answer 1

在文档中找到：

To get protocol/hostname/port from browser use 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",
  },
},

有效！

Webpack DevServer HMR 不适用于 ngrok->docker

Webpack DevServer HMR not working with ngrok->docker

webpack

quasar-framework

ngrok