はじめに
少し前からVue.jsを使うプロジェクトの立ち上げに関わっています。
メンバー的にあまりノウハウがない中、人によってビルドが通らずに苦戦するといった不毛な時間が費やされ気味だったので、簡単に開発環境を揃えられるように検討してみました。
ここに書いたのは一例で、どんな言語やツールでも同様のことができるはずです。
Vue.js関係者に限らず、よかったらお付き合いください。
方針
- Dockerを使う
- 最近よく使われているOSならだいたい導入しやすい
- できるだけコンテナを意識しないで作業できるようにする
- あくまでホストで直接プロセスを実行する代わりにコンテナを起動する
- できるだけ開発用マシンに負担をかけないようにする
- コードをコピーしたコンテナをVM的に常時起動しておくような使い方はしない
- ビルドやテスト等の実行時のみコンテナを起動する、終わったら消える
実現方法（例）
事前準備
- Docker(for Mac/Windows) をインストール
コンテナイメージの準備
- 以下のようなDockerfileを書く
FROM node:10-alpine
ARG version
RUN npm install -q -g vue-cli@${version}
VOLUME /app
EXPOSE 8080
WORKDIR /app
これでひとまずnpm/vueコマンドを実行できるコンテナイメージができます。
ビルド時にversionを指定すると、特定バージョンのvue-cliがインストールできます。
指定しないと最新バージョンが入ります。
CMDやENTRYPOINTを指定すべきというベストプラクティスがあったような気がします（記憶が曖昧）が、今回の目的は開発ツール群をまとめることであり、特定のプロセスの実行環境を作ることではないので問題ないと考えています。
お試し用でDockerhubにイメージをpushしたので、以降はこれを使います。
https://hub.docker.com/r/nolabo/vuilder/
自分のプロジェクトに合わせてカスタマイズしたい方用にこちらにDockerfileを置きました。
ビルドコマンドの例も書いてあります。
GitHub - j-un/vuilder: Developer tools container image for Vue.js
環境変数、エイリアスを設定
- 今のshellで実行するか、.bashrc/.zshrc等に追記して読み込む（csh系やwindowsの方は適宜読み替えてください）
export VUILDER_VERSION="2.9.6"
alias npm='docker run -p 8080:8080 --rm -v ${PWD}:/app -it nolabo/vuilder:${VUILDER_VERSION} npm'
alias vue='docker run -p 8080:8080 --rm -v ${PWD}:/app -it nolabo/vuilder:${VUILDER_VERSION} vue'
こうすることで、単にnpm/vueコマンドを実行すると裏でコンテナが起動し、カレントディレクトリ内のコードに対して処理を実行します。
VUILDER_VERSION（大層な名前だけど、ここでは単にvue-cliのバージョンです）で使用するコンテナイメージを指定しています。
direnvと組み合わせて、プロジェクト毎にバージョンを変更する等できると思います。
また、コンテナ起動時にホストのカレントディレクトリをマウントしています。
なお賢明な方はお気づきの通り、これを.bashrc等に書いてしまうとMac等ホスト側にnpmパッケージをグローバルインストールとかができなくなってしまいます。。
ルックアンドフィールを優先するか、aliasを工夫するか、そのへんのさじ加減は各自でご調整ください。
まとめ・所感
Dockerhubを検索するとこういう風なツールを実行するためのコンテナイメージがたくさん登録されています。
なので特殊なことをしているわけではないのですが、いくらかググった感じ似たような課題に対してVMの代わりにコンテナを使うような例が多かった印象なので、いつか誰かの役に立つこともあるかなと思い書いてみました。
SRE的なアプローチが普及しソフトウェアで解決すべき領域が拡大している昨今、開発プロセスもソフトウェアエンジニアリングでどんどん改善していきたいですね。