使用ngrok的webpack-dev-server 4

Question

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

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

在像React这样的框架中开发应用程序时，我们可以从本地机器创建安全隧道到公共URL，以便轻松测试Web应用程序。

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

// WDS v4

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

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

有人知道解决这个问题的方法吗？以便ngrok再次与webpack-dev-server良好配合？

- wentjun

---

感谢您美丽的问题标题，点赞！ - AmerllicA

为什么不使用ngrok来服务于本地的localhost:3000？我猜这是一样的，对吗？ - Tasos

这实际上是一个很好的问题，但观众没有理解用例。@TasosBu，他试图通过让他的网站（例如：test.com）加载他的脚本test.com/script_built_by_webpack.js来使HMR工作，并从他的ngrok隧道进行热加载。 - Cristi Milea

Answer 1

你需要提供端口和协议使其可用。 例如，

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

通过上述设置，您的网站可以在ngrok隧道中工作，但在本地主机中无法工作。为了无论URL如何都能连接至Web套接字，您可以将webSocketURL设置为auto://0.0.0.0:0/ws，该设置使用浏览器的协议、主机名和端口号。文档

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

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

- jkpark

Answer 2

我不确定这是否是完整的解决方案，但对我有效。您可以将主机名设置为localhost，并根据需要选择某个端口。运行dev-server后，您可以使用ngrok http {port}暴露端口。 例如：ngrok http 3000。

- GmBodhi

Answer 3

我也遇到了同样的问题，无法使用上述任何方法解决。花了一点时间，才偶然发现这个简单的解决方案，但似乎它起作用了。希望能对您有所帮助：

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

- 2potatocakes