WebpackDevServer で建てたサーバーが ngrok から見れない時

問題

WebpackDevServerを何もせずに叩くとlocalhost:8080でサーバーが建ちます。そして、そのポートをngrokで指定したら普通に見れそうなんですが、「Invalid Host Header」と怒られ見れません。

# localhost:8080 を建てる
webpack-dev-server
# localhost:8080 を外部に xxxxxxxx.ngrok.io というホストで公開
ngrok http 8080

解決

devServer.publicを設定する必要があります。

webpack.config.jsをこんな感じに設定するか、

{
  // ...
  devServer: {
    public: xxxxxxxx.ngrok.io,
  }
  // ...
}

cliの--publicフラグで指定してサーバーを建てます。

webpack-dev-server --public xxxxxxxx.ngrok.io

こんなログが出てれば多分OKです。

Project is running at http://xxxxxxxx.ngrok.io/

---

localtunnelとかも同じです。