Webpack DevServer HMR 不适用于 ngrok->docker

Question

我正在尝试让 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

有什么想法吗？

Answer 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",
  },
},

有效！