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

2019-06-02Docker

はじめに

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

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

$ mkdir -p illusion \
  && cd illusion

$ git init

# Giboがなかったら実行しなくても構いません
$ gibo dump Node >.gitignore

Docker環境起動

動作することを確認

すでに nodenpm が利用できるイメージを構築済みなので利用する。

$ docker run --rm -p 8080:8080 -v $PWD:/apps -it genzouw/centos-sandbox bash

$ npm --version
3.10.10

$ exit

Vue開発に必要なライブラリをGlobalインストール

先に起動できたDockerイメージを使ってVue開発用イメージを作成します。

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

cat <<'EOF' >Dockerfile
FROM genzouw/centos-sandbox

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

Build します。

$ docker build -t vue-dev-env .

Run してみます。

$ docker run --rm -p 8080:8080 -v $PWD:/apps -it vue-dev-env bash

問題なく起動できれば、次に進みましょう。

vue開発環境の構築

Dockerコンテナ内で以下のコマンドを実行してプロジェクトを作成します。
プロジェクト名を尋ねられますが、ここでは illusion としておきましょう。
上記以外の選択肢はデフォルトのままで良いでしょう。

cd /apps \
  && vue init webpack .

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

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

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

これでVueアプリの「ボイラープレート」(昔はテンプレートやスケルトンと言いました。)が作成されました。

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

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

$ cd /apps \
  && 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

起動します。

$ cd /apps \
  && npm run dev

ブラウザでアクセス

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

その他

bootstrap-vue の導入

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

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

$ cd /apps \
  && 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)

2019-06-02Docker