Help us understand the problem. What is going on with this article?

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

More than 3 years have 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とかも同じです。

nju33
① JavaScript (TypeScript) ② Bash ③ Rust な感じでやってます。最近はブログの方がメインです。
https://nju33.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away