Dockerをフロントエンド開発でも活用してみる編
リロードの手間はあるが、Node.jsのバージョンに依存せず
複数プロジェクトを構築する手段の一つとして試してみる。
準備
Dockerfile
OSとNode.jsは好きなversionを持ってくる。
TODO：
・rootユーザー以外で実行したい。
・vue-cli以外も対応したい。
・コンテナ内からfirebase開発したい。(デプロイはCIに任せる)
dockerfile
FROM node:12.4.0-alpineWORKDIR /appRUN apk update &&\
apk add git &&\
apk add --no-cache curl &&\
curl -o--L https://yarnpkg.com/install.sh | sh
ENV PATH $HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH# ホットリロードENV CHOKIDAR_USEPOLLING=trueRUN yarn global add @vue/cli
CMD ["/bin/sh"]docker-compose.yml
docker-compose.yml
version:'3'services:web:build:.ports:-8888:8888volumes:-.:/appstdin_open:truetty:trueディレクトリ構成
プロジェクトのディレクトリ構成
workspace (任意のディレクトリ vue createコマンドはこのディレクトリで実行)
└─── my-app (vue create で作られるディレクトリ)
中略
├── package.json
├── dockerfile
├── docker-compose.yml (下記コマンドはこのファイルがあるディレクトリで実行)
...etc
起動
docker-composeでのコンテナ起動
# コンテナをビルド$ docker-compose build
# コンテナを起動$ docker-compose up -d# host OS側からguest OSにログイン$ docker-compose exec web /bin/sh
# guest OS内でlocalhost:8888を起動
/app/vue-project # yarn serve運用
コンテナの操作
# dev-server 終了
Cmd(Ctrl) + C
# コンテナから抜ける
/app/vue-project # exit# コンテナ停止$ docker-compose stop
# コンテナを破棄$ docker-compose down