今までローカルでフロントエンド開発やってたけど、Docker使ってみるか〜。
でもDocker難しくてわからないよ〜〜〜〜〜〜〜！！！！！！
対象読者はvue-cli開発経験のある方です。
最終的なコードはこちら(github)
なぜDockerを使うのか
バックエンドの人たちがDocker信者すぎてフロントエンド開発者の肩身が狭いから
「環境を揃えたいよね」というフワッとした動機から。
実際使ってみて今のところメリットは感じていないですが、vue-cliのバージョンを固定したりするのは追々嬉しいことになるのかも、と思います。未来への投資だと思ってやっていきます。
「Dockerでフロントエンド開発する」とは
どこまでDockerに担わせるか、というところですが、調べた感じだと「実行環境」をDockerで構築するのがベターみたいですね。
クジラの写真なかった。
vueをDockerで動かすまでの手順
vue-cliプロジェクトの作成
ローカル環境でプロジェクトを作成します。
ローカルの環境はこんな感じです。新規プロジェクトを始めるときに慌てて最新バージョンにしたりしてます。
$ node --version
v14.15.5
$ npm --version
6.14.11
$ vue --version
@vue/cli 4.5.11
あとはいつも通り
$ vue create docker-vue
$ ls -a
. .gitignore node_modules public
.. README.md package-lock.json src
.git babel.config.js package.json
Dokcerfileを作成
プロジェクトディレクトリに作ります
FROM node:14.15.5-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN apk update \
&& npm install -g npm@6.14.11 @vue/cli@4.5.11 \
&& npm install
FROMでnodeイメージのバージョンを指定します。今回はローカルと同じにします。WORKDIRはDockerコンテナ内でのプロジェクトディレクトリです。なんでもよいです。COPYでpackage.jsonとpackage-lock.jsonをWORKDIRにコピーします。RUNでパッケージ等インストールし、環境構築します。ここでnpmとvue-cliのバージョンを固定します。
docker-compose.ymlの作成
version: '3'
services:
app:
container_name: docker-vue-test
build: .
ports:
- 8080:8080
volumes:
- .:/usr/src/app
- /usr/src/app/node_modules
stdin_open: true
tty: true
command: "npm run serve"
コンテナ名をdocker-vue-testと敢えてつけてます。あとで使います。
最後npm run serveを命令することで、コンテナ起動と同時にvueサーバーを起動させます。
動作確認する
まずDockerイメージをビルドします。
$ docker-compose build
そしてコンテナを起動。
$ docker-compose up -d
http://localhost:8080/にアクセスすると、いつものVueの画面が表示されます。
（任意）ポートを変える
ここまででDockerで実行環境を作るという目標は達成しましたが、
8080ポートは何かと他のプロジェクトでも使ったりするので、明示的にポートを指定してみます。
vue.config.jsの作成
まず、vue-cliをどのポートを使って起動させるか指定します。
プロジェクトディレクトリにvue.config.jsを作成します。
module.exports = {
devServer: {
port: 9000, # 好きな数字にする
host: '0.0.0.0',
disableHostCheck: true,
},
};
docker-compose.ymlの編集
docker-compose.ymlのportsを、先ほど指定した数字に合わせて修正します。
ports:
- 9000:9000
Docker再起動
$ docker-compose stop
$ docker-compose up -d
今度は http://localhost:9000/で画面が確認できます。
所感
良いところ
いつも通りローカル開発でき、ホットリロードで画面に反映されます。普通です。
うーん…ってなったところ
ホットリロードしなくなった時、ローカル実行ならブラウザのキャッシュをクリアすれば大体治っていたのですが、
Dockerで実行してるとキャッシュを消しても治らないことがあります。
そういう時はコンテナをstop/startするか、全然関係ない箇所をいじったりすると治りました。ここはちょっとよくわからない…
また、追加でライブラリなどを入れる時はコンテナ側にインストールする必要があります。
$ docker exec -it docker-vue-test sh
/usr/src/app # npm install hogehoge...
さいごに
開発初期段階ではまだ「Dockerにして幸せだなあ」と思うことはないです。
ただ手順もそんなに多くはないですし、git cloneしたあとに
以前はnodebrewでnodeバージョンを変えてnpm installしてrun serveして…という手数を踏んでいたところが
Dockerのイメージビルド、コンテナ起動だけになるのは少しシンプルになって小気味好いかもしれませんね。知らんけど。
Dockerに頼りきりにならず、中で何をしているか理解することもとても重要だと思っているので、
それを心に留めつつ今後もDockerと仲良くしていきたいと思います。