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

## 実現したいこと

- パソコンで起動しているwebpack-dev-serverのサーバーに、別の端末からアクセスする

## IPアドレスからアクセスできるようにする

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

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

```json
/** package.json */

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

または

```js
/** 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](https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck)）

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

## 別の端末からアクセスする

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

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

## 参照

- webpack-dev-server/middleware security issues[https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a](https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a)（2019-10-19参照）


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

Tags