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

More than 1 year has passed since last update.


問題

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


# localhost:8080 を建てる

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

「Invalid Host Header」と怒られる



解決

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とかも同じです。