带有 ngrok 的 webpack-dev-server 4

Question

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

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

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

然而，在最新版本的 webpack-dev-server (v4) 中， public属性已被替换为client.webSocketURL object（ 来源）。 我无法找到任何资源来使它与 ngrok 一起工作，因为当我将devServer.client.webSocketURL.hostname指向我的 ngrok 隧道时，websockets 没有正确连接。

// WDS v4

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

上面的实现只是部分解决方案，因为websocket没有设置好，所以不会热重载。

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

Answer 1

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

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

通过以上设置，您的网站可以在 ngrok 隧道中工作，但不能在本地主机中工作。 要连接到 web 套接字而不考虑 url，您可以将webSocketURL设置为auto://0.0.0.0:0/ws ，它使用来自浏览器的协议、主机名和端口。 文件

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

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

Answer 2

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

Answer 3

我也偶然发现了同样的问题，并且无法使用上述任何方法解决它。 在我偶然发现这个简单的解决方案之前花了一些时间，但这似乎有效。 希望能帮助到你：

devServer: {
  allowedHosts: [".ngrok.io"],
},