帶有 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"],
},