webpack-dev-server
vue-cli

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となっていますが、まずこれを変える必要があります。

コマンドプロンプトでipconfigと打ち、出力された文言の「イーサネット アダプター ローカル エリア接続」の「IPv4 アドレス」を見てみると"192.168.nn.mm" 的な数字が書かれていると思います。(n、mは何らかの数字)

config/index.jsを開き、ホストをこのローカルIPに書き換えます。

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

    /* 中略 */

    // Various Dev Server settings
    // host: 'localhost', // can be overwritten by process.env.HOST
    host: '192.168.nn.mm', // <- '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://192.168.nn.mm:8080

と出れば正しく設定されています。

これで同一ネットワーク内(wifi)に接続しているデバイスならば上記URLにアクセスすればアプリが開けます。

(ファイアウォールの設定によってはここで引っかかる可能性もありますが、詳細はここでは割愛)

ちなみにポート番号は他に立ち上げているローカルサーバーと被ってなければそのまま(8080)でも良いはずです。

【補足】環境依存じゃね?

この設定は個人で開発することが前提になり、正直あんまりよろしくない。
ipアドレスは環境によって異なる(変わることもある)と思うので、複数人が関わる場合、ここはうまく設定を書き換える必要がありそう。

es2015コードが引っかかった

この段階でandroid(google chrome)でアクセスしてみると正しく読み込めました。
しかしiOS safari(chromeも同様)ではなぜかまっさらなページが表示されるだけ…。(正確にはindex.htmlそのものは読み込めているが、アプリ本体であるapp.jsが何らかの不具合で動いていない状態)

調べてみるとこれはwebpack-dev-serverの吐き出すスクリプトにes2015コードが含まれているのが原因とのこと
チェックに使った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です。

参考