はじめに
Vue.jsの開発のためのクリーンな環境を構築するためにDockerを使った場合の流れをまとめてみました。
開発用ディレクトリの作成とGit初期化
今回作成するVueのプロジェクト名は my-app としたいと思います。
1
2
3
4
| $ mkdir -p my-app
# カレントディレクトリを変更しておきます
$ cd my-app
|
Docker環境起動
Dockerイメージを作成
Vue開発に必要なライブラリをGlobalインストールしたDockerイメージを作成します。
まずは、以下のような Dockerfile を作成します。
1
2
3
4
5
6
| $ 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としています。
1
| $ docker build -t docker-vue .
|
問題なくイメージが作成できれば、次に進みましょう。
Vueアプリケーションの初期化
以下のコマンドを実行してプロジェクトを作成します。
何度か選択肢を聞かれますが、はデフォルトのままで問題ありませんのでEnterキーを連打します。
1
2
3
4
5
6
| # 以降のコマンドで利用している ${PWD##*/} は、カレントディレクトリ名となっている
$ echo ${PWD##*/}
my-app
$ docker run --rm -v $PWD:/${PWD##*/} --workdir /${PWD##*/} -it docker-vue \
vue init webpack .
|
うまく行けば以下のようなメッセージが表示されます。
（数分かかりますのでのんびり待ちましょう。）
1
2
3
4
5
6
7
8
| > # 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上にもソースコードが配置されているはずです。
1
2
3
4
5
6
7
8
9
10
11
12
13
| $ 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 に設定）
1
2
| $ 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プロセスはファイル変更を検知してくれません。
これを検知させるには、以下のコマンドを叩いて設定を変更する必要があります。
1
| $ sed -i 's/poll: config.dev.poll,/poll: 1000,/' build/webpack.dev.conf.js
|
起動します。
1
2
3
4
5
| $ 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 コマンドで以下のライブラリをインストールするのが手っ取り早いです。
1
2
| $ docker run --rm -v $PWD:/${PWD##*/} --workdir /${PWD##*/} docker-vue \
npm install --save bootstrap-vue bootstrap
|
src/main.js にも、 bootstrap-vue が利用できるようにパッケージのロード処理を追記しておきます。
1
2
3
4
5
6
7
8
9
10
| // 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)
|