Webpack DevServer HMR 无法与 ngrok->docker 一起使用

Question

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

\n

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

\n

码头工人港口

\n

0.0.0.0:8201->8201/tcp\n

\n

恩格罗克配置：

\n

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

\n

Webpack DevServer 配置（Webpack 版本：5.59.1）

\n

0.0.0.0:8201->8201/tcp\n

\n

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

\n

WebSocket connection to \'wss://MYAPP.ngrok.io:8201/ws\' failed:\n\nWebSocketClient @   WebSocketClient.js?8f51:13\ninitSocket  @   socket.js?d11d:15\neval    @   socket.js?d11d:34\n

\n

有人有什么想法吗？

\n

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

作品！