DockerでクリーンなVue.js開発環境を構築してみる

2020-02-07Docker

はじめに

Vue.jsの開発のためのクリーンな環境を構築するためにDockerを使った場合の流れをまとめてみました。

開発用ディレクトリの作成とGit初期化

今回作成するVueのプロジェクト名は my-app としたいと思います。

$ mkdir -p my-app

# カレントディレクトリを変更しておきます
$ cd my-app

Docker環境起動

Dockerイメージを作成

Vue開発に必要なライブラリをGlobalインストールしたDockerイメージを作成します。

まずは、以下のような Dockerfile を作成します。

$ cat <<'EOF' >Dockerfile
FROM node:13.7.0-alpine3.10

RUN npm install -g vue-cli \
  && npm install -g @vue/cli-service-global
EOF

Buildします。作成するDockerイメージ名はdocker-vueとしています。

$ docker build -t docker-vue .

問題なくイメージが作成できれば、次に進みましょう。

Vueアプリケーションの初期化

以下のコマンドを実行してプロジェクトを作成します。
何度か選択肢を聞かれますが、はデフォルトのままで問題ありませんのでEnterキーを連打します。

# 以降のコマンドで利用している ${PWD##*/} は、カレントディレクトリ名となっている
$ echo ${PWD##*/}
my-app

$ docker run --rm -v $PWD:/${PWD##*/} --workdir /${PWD##*/} -it docker-vue \
    vue init webpack .

うまく行けば以下のようなメッセージが表示されます。
（数分かかりますのでのんびり待ちましょう。）

> # Project initialization finished!
> # ========================
> 
> To get started:
> 
>   npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

これでVueアプリの「ボイラープレート」（昔はテンプレートやスケルトンと言いました。）が作成されました。
Docker内でコマンドを実行しましたが、ローカルPCのディスクをマウントしていた(-v $PWD:/${PWD##*/} オプション)ので、ローカルPC上にもソースコードが配置されているはずです。

$ ls -l
total 608
-rw-rw-r--    1 genzouw wheel    102  12 29 20:03 Dockerfile
-rw-r--r--    1 genzouw wheel    549  12 29 20:06 README.md
drwxr-xr-x   10 genzouw wheel    320  12 29 20:06 build/
drwxr-xr-x    6 genzouw wheel    192  12 29 20:12 config/
-rw-r--r--    1 genzouw wheel    268  12 29 20:06 index.html
drwxr-xr-x 1077 genzouw wheel  34464  12 29 20:08 node_modules/
-rw-r--r--    1 genzouw wheel 604685  12 29 20:08 package-lock.json
-rw-r--r--    1 genzouw wheel   2689  12 29 20:06 package.json
drwxr-xr-x    7 genzouw wheel    224  12 29 20:06 src/
drwxr-xr-x    3 genzouw wheel     96  12 29 20:06 static/
drwxr-xr-x    4 genzouw wheel    128  12 29 20:06 test/

Vueの開発用サーバを起動して、本当に利用できるようになっているのかを確かめたいのですが、このままではDockerコンテナ外からアクセスできません。
config/index.js にVueの設定ファイルを一部変更し、コンテナ外からアクセスできるようにします。

また、デフォルトではページ遷移時の挙動をURLのフラグメント( # )を利用して表現するように動作しますが、個人的にはこの方法はすきではありません。
src/router/index.js にフラグメントなしの方式に変更します。（ mode: 'history' のフィールドを Router に設定）

$ sed -i "s/host: 'localhost',/host: '0.0.0.0',/" ./config/index.js
$ sed -i "/export default new Router({/a\ \ mode: 'history'," ./src/router/index.js

その他、Docker上でVueアプリケーションを動作させた場合の問題についても対処しておきます。
ローカルPCでファイルを変更しても、Docker上のVueプロセスはファイル変更を検知してくれません。
これを検知させるには、以下のコマンドを叩いて設定を変更する必要があります。

$ sed -i 's/poll: config.dev.poll,/poll: 1000,/' build/webpack.dev.conf.js

起動します。

$ docker run --rm -v $PWD:/${PWD##*/} --workdir /${PWD##*/} -p 8080:8080 docker-vue \
    npm run dev

# ※上記コマンドだとあまりに長いので、以下のようにaliasをさく制しておくと便利です。
$ alias npm='docker run --rm -v $PWD:/${PWD##*/} --workdir /${PWD##*/} -p 8080:8080 docker-vue npm''

ブラウザでアクセス

「http://localhost:8080」にアクセスしてみましょう。
うまく行けばVue.jsの初期ページが表示されるはずです。

その他

bootstrap-vue の導入

即席のサイト構築の際に 「Bootstrap」 を使うとデザインについて細かいことを考えなくてすみます。（デザインが苦手な僕には助かります。）

Vue.js で構築するアプリケーションに 「Bootstrap」 を適用するためには、 npm コマンドで以下のライブラリをインストールするのが手っ取り早いです。

$ docker run --rm -v $PWD:/${PWD##*/} --workdir /${PWD##*/} docker-vue \
    npm install --save bootstrap-vue bootstrap

src/main.js にも、 bootstrap-vue が利用できるようにパッケージのロード処理を追記しておきます。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
+ import BootstrapVue from 'bootstrap-vue'
+ import 'bootstrap/dist/css/bootstrap.css'
+ import 'bootstrap-vue/dist/bootstrap-vue.css'

+ Vue.use(BootstrapVue)

2020-02-07Docker