webpack-dev-serverでモバイルからアクセス可能なローカル開発サーバーを立ち上げる(in vue-cli)


# はじめに
vue-cliで生成したアプリ原型を元に開発をしてて、そのアプリの性質上モバイルデバイスでの確認を簡単に行いたい、しかしデフォルトの```npm run dev```で立ち上がる開発サーバーではモバイルチェック（wifiによるアクセス）はできない、という状態になりました。

broswer-syncを使った解決方法は一応知っていましたが、一から構築するのはかなり骨が折れるので、なるべくvue-cliデフォルトのwebpack-dev-serverを使った設定を流用したいところでした。

そこで色々いじってみたところ、とりあえずうまくいったのでその方法を書いておきます。

なおタイトルにvue-cliと書いたものの、基本的にはwebpack-dev-serverの設定によるものです。特有なのは設定ファイルの位置だけです。

#### 環境・前提
windows 10 64bit
webpack-dev-server v2.9.1
vue-cli v2.8.2
iOS 10.3
android 5.1

# サーバー設定を修正
デフォルトではホスト名は`localhost`となっていますが、まずこれを変えます。

config/index.jsを開き、ホストを`0.0.0.0`に書き換えます。

```config/index.js
module.exports = {
  dev: {

    /* 中略 */

    // Various Dev Server settings
    // host: 'localhost', // can be overwritten by process.env.HOST
    host: '0.0.0.0', // <- 'localhost'から書き換える
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

    /* 中略 */
  }
  /* 中略 */
}
```

そして```npm run dev```でサーバーを立ち上げ、ターミナルに

```Your application is running here: http://0.0.0.0:8080```

と出ればOKです。

### （追記）useLocalIpオプションについて

本稿を執筆した当時のwebpack-dev-serverには確か無かったはずですが、現行バージョンには`useLocalIp`というオプションがあります。これをオンにしてサーバーを立ち上げると、

```Your application is running here: http://192.168.mm.nn:8080```

という風に最初からローカルIPアドレスを割り当てた状態のURLを表示してくれるため、自分でURL置換をする手間が省けます。

```config/index.js
    // Various Dev Server settings
    // host: 'localhost', // can be overwritten by process.env.HOST
    host: '0.0.0.0', // <- 'localhost'から書き換える（こちらも依然設定する必要あります）
    useLocalIp: true, // <- 追加
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

```

dev-serverのバージョンが古いなどで、このオプションが使えない場合は次項の方法でローカルIPアドレスを確認します。


## ローカルIPアドレスを確認・置換する
このまま`http://0.0.0.0:8080`にアクセスしてもエラーページが表示されるだけです。（少なくとも自分のwin環境ではそうでした）

ここで一旦コマンドプロンプト等で`ipconfig`と打ち、出力の「イーサネット アダプター ローカル エリア接続」の「IPv4 アドレス」を見てみます。すると`192.168.nn.mm`的な数字が書かれていると思います。

先程のURLの`0.0.0.0`のところをこのipアドレスに置き換えます。
例えば`192.168.11.8`であれば`http://192.168.11.8:8080`が対象URLになります。

サーバーを立ち上げた端末（PC）と同一ネットワーク（wifi含む）に接続しているデバイスならばこのURLにアクセスすることでアプリが開けます。
（ファイアウォールの設定によってはここで引っかかる可能性もありますが、詳細はここでは割愛。プライベートネットワークでのアクセスを許可してれば問題ないと思われます。）

ちなみにサーバー設定で`host: '192.168.11.8'`のように直接ipアドレスを設定することでも同様の結果が得られます。
ただ、ipアドレスは環境によって変わったりするのであまりおすすめはしません。


# 【別問題】es2015コードが引っかかった
サーバーホスト問題は上記で解決し、この段階でandroid（google chrome）でアクセスしてみると正しく読み込めました。
しかしiOS safari（chromeも同様）ではなぜかまっさらなページが表示されるだけ…。（正確にはindex.htmlそのものは読み込めているが、アプリ本体であるapp.jsが何らかの不具合で動いていない状態）

調べてみるとこれは[webpack-dev-serverの吐き出すスクリプトにes2015コードが含まれているのが原因とのこと](https://github.com/vuejs-templates/webpack-simple/issues/148)。
チェックに使ったiOS 10.3では一部未対応だったため、エラーになっていたようでした。
（確認してませんが、es2015未対応の古いブラウザでも同様のことが起きると考えられます）

これはbuild/webpack.base.conf.jsを開き、babel-loaderの対象にwebpack-dev-serverを含めてトランスパイルさせると良いです。

```build/webpack.base.conf.js
/* 中略 */
  module: {
    rules: [
       /* 中略 */
     {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'), resolve('test'),
          resolve('node_modules/webpack-dev-server/client') // <- 追加
        ]
      },
      /* 中略 */
    ]
  }
/* 中略 */

```

この設定を保存し、再度サーバーを立ち上げればOKです。

# 参考
- [Server can't be accessed via IP](https://github.com/webpack/webpack-dev-server/issues/147)
- [How to get access to webpack-dev-server from devices in local network?](https://stackoverflow.com/questions/35412137/how-to-get-access-to-webpack-dev-server-from-devices-in-local-network)