webpack-dev-serverにIPアドレスからアクセスする

October 19

・javascript

webpackでの開発にwebpack-dev-serverを使用してサーバーを立ち上げている場合、サーバーを起動しているパソコンでは http://localhost:8080 にブラウザでアクセスすれば確認できますが、Android端末などからアクセスしたい場合の設定方法です。

実現したいこと

ローカルホスト以外からアクセスするにはIPアドレスからアクセスできるようにします。IPアドレスからアクセスするには --host 0.0.0.0 でwebpack-dev-serverを起動する必要があります。

2通りの方法があります。1つ目はpackage.jsonの scripts に追記する方法。2つ目はwebpack.config.jsの devServer に追記する方法です。

/** package.json */

"scripts": {
  "start": "webpack-dev-server --host 0.0.0.0",
}

または

/** webpack.config.js */

devServer: {
  host: '0.0.0.0',
}

ローカルのwebpack-dev-serverであっても悪意のある攻撃者からアクセスされる可能性があるため、 headers: { Access-Control-Allow-Origin: * } と disableHostCheck: true の設定はしないようにとのことです。

Access-Control-Allow-Origin: * は誰でもアクセス可能になり、コンパイルされたソースコードをリークするためです。

disableHostCheck を true にするとHOSTチェックをしなくなり、DNSリバインディング攻撃に脆弱となるため、公式サイトにも true の設定は推奨しないと記載があります。（webpack公式サイト : devServer.disableHostCheck）

詳しくはwebpackの公式ブログの記事「webpack-dev-server/middleware security issues」にありますが、記事が書かれた2017/4/25の時点でパッチバージョンとしてリリースすると記載があるため、現在のバージョンでは既に対応済みかもしれません。

設定ファイルの変更が終わったら、 npm run start でサーバーを起動します。

サーバーを起動しているパソコンのIPアドレスを調べ、Androidなど開発サーバーにアクセスしたい端末のブラウザで http://ご自身のパソコンのIPアドレス:8080 にアクセスすると、 http://localhost:8080/ と同じ画面が表示されます。