Vueを複数人で開発する環境を試してみた

背景

Vue開発してると、色々ライブラリインストールとかが発生する。そんな事をしていると、複数人で開発していると、人によってインストールタイミングが違うので、結果モジュールのバージョン違ったりして将来的なトラブルの種になりそうと感じていた。なにより、production環境と開発環境が違ってくる状況になるのが一番まずい。
調べていると、Qiitaに良記事が色々あり、その問題を解消できそうだったので実際に試してみた。

実現したい事

• ソースコード管理はgit
• gitに存在する設定ファイルなどの情報で、複数人が同構成環境でVueの開発が出来るように
• モジュールの変更も簡単に複数人の環境へ再現したい
• 各種モジュールのバージョンは全指定（後にインストールした人とのバージョンが違うとか無い様に）
• ホスト側で行ったソース編集をすぐに反映したい（開発モード使用したい）

ベースとなるのはこちらの記事。Dockerはこの手の環境に関する検討を１から簡単にやり直せるので、本当にすごく良いです。※最初は別記事参考にしたりしたので、細かい所で違う部分あります。
ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]

前準備

docker/docker-compose インストール

さすがにdockerはホスト側にインストールしなければいけないので、以下サイトを参考にインストール
Ubuntu 18.04にDockerをインストールする(+docker-composeも)
もちろん、OSがWinでもMacでもDockerは使えるので、開発者のOSが違っても対応できるのもDockerの良い点ですね。

gitリポジトリ準備

• githubでテスト用プロジェクト作成（vueprj-test01）
• ホストでクローン（git clone https://github.com/silverbox/vueprj-test01.git）
• developブランチ準備（vueprj-test01 に移動して、 git checkout -b develop origin/master）

初期構築

docker-compose.yml, Dockerfile 準備

• ホスト側のgitリポジトリフォルダ（vueprj-test01）以下に app フォルダを準備
• コンテナ側は /app 以下に実プロジェクト作成
• nodejs用のDockerイメージは（公式サイト）、現時点でのLTSの最新版っぽい12.18.1を使う
• vue/cliとvue/cli-initは公式サイトで、現時点でのリリース最新版っぽい4.4.1を使う

vueprj-test01/docker-compose-vueini.yml

version: '3.7'
services:
  frontvue:
    build:
      context: .
      dockerfile: Dockerfile-vue
    ports:
      - 8080:8080
    volumes:
      - ./context:/app
      - /app/node_modules
    container_name: vueprj-test01
    tty: true

Dockerfile-vue

FROM node:12.18.1-alpine

WORKDIR /app

RUN apk update
RUN npm install -g @vue/cli@4.4.1
RUN npm install -g @vue/cli-init@4.4.1

ビルドして起動

vueprj-test01配下

sudo docker-compose -f docker-compose-vueini.yml build
sudo docker-compose -f docker-compose-vueini.yml up
Creating network "vueprj-test01_default" with the default driver
Creating vueprj-test01 ... done
Attaching to vueprj-test01

起動状態になった。

Vueプロジェクト作成

コンテナにログイン

bashは使えなかったのでshを使用。

docker exec -it vueprj-test01 sh

バージョン確認。指定はちゃんと反映されてる。

コンテナ内

/app # vue --version
@vue/cli 4.4.1
/app # node -v
v12.18.1

vueプロジェクト作成(選択肢はパッケージにnpm選択した事以外はデフォルトを選択)

コンテナ内

/app # vue create .

コンテナ内で開発モードで実行。

/app # npm run serve

ホスト側vueprj-test01配下。変更できるように権限変更

sudo chown -R ubuntu:ubuntu .

この状態でホスト側コードエディタで、vueprj-test01/app/src/App.vue の <HelloWorld msg="Welcome to Your Vue.js App"/> 部分の文言を変更して自動的に更新される事確認。

gitにpush

既に.gitignoreが作成されているので、node_modulesとか除外されてる。

git add .
git commit -m "base project"
[develop 4ce861d] base project
 13 files changed, 11687 insertions(+)
 create mode 100755 Dockerfile-vue
 create mode 100644 app/.gitignore
 create mode 100644 app/README.md
 create mode 100644 app/babel.config.js
 create mode 100644 app/package-lock.json
 create mode 100644 app/package.json
 create mode 100644 app/public/favicon.ico
 create mode 100644 app/public/index.html
 create mode 100644 app/src/App.vue
 create mode 100644 app/src/assets/logo.png
 create mode 100644 app/src/components/HelloWorld.vue
 create mode 100644 app/src/main.js
 create mode 100755 docker-compose-vueini.yml

別の開発者を想定して環境構築

このgitリポジトリを元に別フォルダにcloneして、構築を行う。
本来は別サーバーでやりたいところだけど、dockerなのでコンテナを一回削除すればほぼ別サーバーと同じ条件になるのでそれで実験。

一応再ビルドして、Dockerコンテナ起動。

コンテナ削除して、新フォルダ作成。そしてそのフォルダ以下で構築。

~/vueprjtest/vueprj-test01$ sudo docker-compose -f docker-compose-vueini.yml rm
~/vueprjtest/vueprj-test01$ mkdir ~/vueprjtest2
~/vueprjtest/vueprj-test01$ cd ~/vueprjtest2
~/vueprjtest2/vueprj-test01$ git clone https://github.com/silverbox/vueprj-test01.git
~/vueprjtest2/vueprj-test01$ cd vueprj-test01
~/vueprjtest2/vueprj-test01$ sudo docker-compose -f docker-compose-vueini.yml build
~/vueprjtest2/vueprj-test01$ sudo docker-compose -f docker-compose-vueini.yml up

再度コンテナ内に入る。この状態では、コンテナに標準にインストールされている部分以外は無い状態。ただ、gitにはpackage.json,package-lock.jsonが上がっているので、コンテナ内から見える状態になっている。npm install でそれを反映。そして開発モードで実行。

コンテナ内

npm install
npm run serve

同様に、ホスト側の新フォルダ配下、vueprj-test01/app/src/App.vue の <HelloWorld msg="Welcome to Your Vue.js App Test"/> 部分の文言を変更して自動的に更新される事確認。

ライブラリ追加

別開発者がライブラリを追加した事想定。ついでに、先は手動で行った処理を加える（本来は最初のgit push時に反映しておくべき）。

Dockerfile-vue：element-uiとaxios追加

FROM node:12.18.1-alpine

WORKDIR /app

COPY app/package.json .
COPY app/package-lock.json .

RUN apk update
RUN npm install -g @vue/cli@4.4.1
RUN npm install -g @vue/cli-init@4.4.1
RUN npm install
RUN npm install --save element-ui@2.13.2
RUN npm install --save axios@0.19.2

main.jsでaxiosを宣言して代入してみる。

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App),
}).$mount('#app')

再ビルド

sudo docker-compose -f docker-compose-vueini.yml rm
sudo docker-compose -f docker-compose-vueini.yml build
sudo docker-compose -f docker-compose-vueini.yml up

そして、http://localhost:8080 でページが動く事確認。

結論

• .gitignoreとかはちゃんとvue createで作ってくれる。
• ライブラリ管理もpackage.json,package-lock.jsonで管理されて、それがnpm installで再現される。
• なのでpackage.jsonが作られるまでの準備のDockerfileと、それ以後のDockerfileは分ける。
• ライブラリ変わったら別開発者はコンテナ再作成か、コンテナ内でnpm installすればよさそう。

はまったポイント

最初、vue init webpack . でvueプロジェクト作成をしていた。
しかし、http://localhost:8080/ でアクセス出来る事を確認する時にどうもうまく行かない。そんな事を色々調べていたら、以下の神ページを発見。
vue-cli のテンプレートを Docker で動かす時の注意
config/index.js を変えなくてはいけない、というか、vue init webpack . は古い形式らしい事も知る。
書かれている通り、localhost部分を0.0.0.0にしたらホストからアクセスできるようになった。

動作したとはいえ、きれいな環境を目指しているのでvueプロジェクト作成やり直し。

ホスト側vueprj-test01配下。Ctrl+Cでdocker-composeを止める。

sudo docker-compose -f docker-compose-vueini.yml rm
rm -r app
mkdir app
sudo docker-compose -f docker-compose-vueini.yml up

環境構築も簡単にやり直せるのがDockerの良い所ですね。

ちなみにこの変更で開発モード実行コマンドも npm run dev から npm run serve 変わったらしい。configがdevとproで分かれたりもしてない？取り急ぎ今回は、目的とは違う部分なので気にしない事に。

参考にさせて頂いたサイト

Ubuntu 18.04にDockerをインストールする(+docker-composeも)
ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]
Vue.jsの開発環境をDockerで構築する手順
vue-cli バージョン指定してインストールする
vue-cli のテンプレートを Docker で動かす時の注意