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 にしましょう。
...
// 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 で見れるはずです。
(しかもサーバーが「お前さん多分これコンテナの中でっせ」ってメッセージを出してくる。嬉しい。）
それでは!