带有 ngrok 的 webpack-dev-server 4答案

【问题标题】：webpack-dev-server 4 with ngrok带有 ngrok 的 webpack-dev-server 4
【发布时间】：2021-10-27 04:59:24
【问题描述】：

在旧版本的 webpack-dev-server（即 3 及以下）中，我们可以通过设置 devServer.public 的值来简单地使用 ngrok 隧道暴露 webpack 和 webpack-dev-server 的 websock，如下所示：

// WDS v3
devServer: {
  public: 'react-tunnel.ngrok.io',
  // other webpack devServer config
}

这对于在 React 等框架中开发应用程序特别有用，因为我们可以创建从本地机器到公共 URL 的安全隧道，以便轻松测试 Web 应用程序。

然而，在最新版本的 webpack-dev-server (v4) 中，public 属性已被替换为 client.webSocketURL 对象 (source)。我找不到任何资源来使用 ngrok 进行这项工作，因为当我将 devServer.client.webSocketURL.hostname 指向我的 ngrok 隧道时，websocket 没有正确连接。

// WDS v4

devServer: {
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
    },
  },
}

上述实现只是部分解决方案，因为 websocket 没有正确设置，因此它不会热重载。

有谁知道这个问题的解决方案是什么，这样 ngrok 才能再次与 webpack-dev-server 一起正常工作？

【问题讨论】：

up_V0te 为你漂亮的问题标题！
为什么不使用 ngrok 为您的 localhost:3000 提供服务？我猜是一样的，对吧？
这实际上是一个很好的问题，但观众没有得到用例。 @TasosBu，他试图通过让他的网站（例如：test.com）加载从他的 ngrok 隧道热加载的脚本 test.com/script_built_by_webpack.js 来让 HMR 工作

标签： javascript reactjs webpack webpack-dev-server ngrok

【解决方案1】：

您还需要提供端口和协议才能使其正常工作。例如，

devServer: {
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
      port: 0,
      protocol: 'wss',
    },
  },
}

通过上述设置，您的网站可以在 ngrok 隧道中运行，但在 localhost 中无法运行。要连接到 Web 套接字而不考虑 url，您可以将 webSocketURL 设置为 auto://0.0.0.0:0/ws，它使用来自浏览器的协议、主机名和端口。 doc

这也应该可以解决热重载问题。

devServer: {
  client: {
    webSocketURL: 'auto://0.0.0.0:0/ws'
  },
}

【讨论】：

【解决方案2】：

我不确定这是否是完整的解决方案，但这对我有用。您可以将主机名作为 localhost 和一些端口作为您的需要。运行开发服务器后，您可以使用ngrok http {port} 公开端口。示例：ngrok http 3000。

【讨论】：