webpack-dev-服务器4(带有ngrok)

js81xvg6 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(168)

在旧版本的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一起工作？

webpack

来源：https://stackoverflow.com/questions/68950266/webpack-dev-server-4-with-ngrok

3条答案

按热度按时间

webghufk1#

您还需要提供端口和协议以使其工作。例如，

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

使用以上设置，您的网站可以在ngrok隧道中工作，但不能在localhost中工作。要连接到Web Socket而不考虑url，您可以将webSocketURL设置为auto://0.0.0.0:0/ws，它使用来自浏览器的协议、主机名和端口。doc
这应该也修复了热重新加载问题。

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

赞(0）回复(0）举报 2022-11-13

ffvjumwh2#

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

赞(0）回复(0）举报 2022-11-13

s5a0g9ez3#

我也遇到了同样的问题，但使用上面提到的任何方法都无法解决它。过了一段时间，我才偶然发现了这个简单的解决方案，但这似乎是可行的。希望它能有所帮助：

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

赞(0）回复(0）举报 2022-11-13

我来回答

webpack-dev-服务器4(带有ngrok)

3条答案

相关问题

热门标签

最新问答