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

問題

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

localhost:8080 を建てる

webpack-dev-server

localhost:8080 を外部に xxxxxxxx.ngrok.io というホストで公開

ngrok http 8080

>
> ![「Invalid Host Header」と怒られる](https://qiita-image-store.s3.amazonaws.com/0/84144/2c498764-04f7-4e5a-94ee-1f853b18b592.png)

## 解決

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

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

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