vue-cli、使ってますか？私はそんなに使ってません…

今回、手っ取り早く Vue.js の環境を構築したかったことと、他のメンバーにも環境を共有したかったので、 Docker の中に vue-cli を使って Vue.js の環境を構築したのですが、１点だけデフォルトの設定のまま使用するとハマる注意点があり、そこにだいぶ時間を奪われてしまったのでメモ。

Docker 起動

docker run -it -p 3001:8080 -v /Users/akagire/dev/vue:/myapp node:10-alpine ash

ポイント

見てのとおりですが...

node:10-alpine
軽いので。
ポートフォワード
-p 3001:8080 で、 webpack-dev-server のデフォルトポートの8080を3001にフォワード。
マウント
-v /Users/akagire/dev/vue:/myapp で、ホストの /Users/akagire/dev/vue を、コンテナの /myapp にマウント。
ash
alpine は bash じゃなくて ash

うまくいけば、node:10-alpine が自動で pull されて、コンテナの中に入ります。

vue-cli インストール

ここからはコンテナの中です。

npm install -g vue-cli

Vue.js のテンプレートを引っ張ってくる

vue-cli は、用意されたテンプレートを元にプロジェクトを作ってくれる便利な機能があるのでこれを使いました。

もちろんこれもコンテナの中。

vue init webpack test

テンプレートから webpack を選び、 test という名前のプロジェクトを作ります。対話形式でいろいろ聞かれますが、基本は全部空エンターか y でOKです。内容見て自分にあった環境を作ってください。
テンプレートは以下から選べます。
https://github.com/vuejs-templates

npm install

対話が終わったら、プロジェクトフォルダーに移動して npm install 。

サーバー起動

npm run dev で起動。ビルドが始まり、 Your application is running here: http://localhost:8080 と表示されたらビルド終了。
Docker を使っていない場合は、これで http://localhost:8080 にアクセスすれば終了なのですが、今回は Docker でポートフォワードしているので、 http://localhost:3001 にアクセスします。

ですが、これだと繋がりません。

`webpack-dev-server` の設定を変更

host: を 0.0.0.0 にしましょう。

config/index.js

...
    // Various Dev Server settings
    // host: 'localhost', // can be overwritten by process.env.HOST // ここをコメントアウト
    host: '0.0.0.0' // これを追加
...

Dockerfile 方式にして EXPOSE 8080 とかも試しましたがこれでした。。。

ちなみに

vue init <template> <project name> はレガシー扱いなので、慣れたら普通に　vue create <project name> とか vue ui でプロジェクト作りましょう。vue ui、めっちゃ未来感ありますね。
https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

あとは、codesandbox もとりあえず動かしたいだけなら爆速で試せて便利なのでおためしあれ。

追記

vue create を使いたい時は npm install -g vue-cli ではなく npm install -g @vue/cli でインストールしてくださいね。これで作った scaffold は　Docker の中にインスコしても特に設定せずにホストから localhost:8080 で見れるはずです。
(しかもサーバーが「お前さん多分これコンテナの中でっせ」ってメッセージを出してくる。嬉しい。）

それでは!

vue-cli のテンプレートを Docker で動かす時の注意