tl;dr
Vue.jsの環境をDockerで作ってみる。
※ createコマンドで作成 (vue-cli3.x系)
ファイル構成
ファイル構成
├ src <- ソースコードを格納するフォルダ
├ docker-compose.prod.yml <- docker-compose(本番)
├ docker-compose.yml <- docker-compose(開発)
├ Dockerfile <- Dockerfile(開発)
├ Dockerfile.prod <- Dockerfile(本番)
└ README.md
srcフォルダ作成
vue.jsのコードが展開されるフォルダを作成する。
ターミナル
$ mkdir src
Dockerfileファイル作成
※ ライブラリのインストール先は、/node_modulesフォルダに変更する
Dockerfile
FROM node:11.1
RUN npm install -g @vue/cli
WORKDIR /app
COPY src .
RUN yarn install
EXPOSE 8080
CMD ["yarn", "serve"]
docker-compose.ymlファイル作成
docker-compose.yml
version: '2'
services:
web:
build: .
image: my/web
container_name: 'web'
ports:
- '80:8080'
volumes:
- ./src:/app
Vue.jsのプロジェクト作成
プロジェクト作成のコマンドを実行する。
※ これにより、srcフォルダ内にvue.jsのファイルが作成される
ターミナル
$ docker-compose run --rm web vue create .
ソースコードがsrcフォルダに作られる際に、`node_modulesができるので削除。
ターミナル
$ rm -rf src/node_modules/
インストール先を/node_modulesに変更しているため、.yanrcファイル追加。
src/.yanrc
--modules-folder /node_modules
コンテナイメージ再作成
srcフォルダに作られたvue.jsのコードを取り込んでコンテナイメージを再作成する。
ターミナル
$ docker-compose build
コンテナ起動
$ docker-compose up -d
Vueのバージョンを確認してみる
$ docker-compose exec web vue -V
3.1.3
動作確認
ターミナル
$ open http://192.168.99.100
本番環境用の設定追加
本番環境では、構築方法が少し異なるので、別途作成します。
Dockerfile.prod作成
dockerの機能にマルチステージビルドというものがあるようですね。
nodeコンテナでビルドを行い、、作成されたファイルをコピーしてnginxを起動できるようです。
コンテナが複数使い回せて便利♪
Dockerfile.prod
# ビルド環境
FROM node:11.1 as build-stage
WORKDIR /app
COPY src .
RUN yarn install
RUN yarn run build
# 本番環境
FROM nginx:1.13.12 as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
docker-compose.prod.ymlファイル作成
Dockerfile名とnginxがポートが異なるため、docker-compose.ymlファイルも別途作成する。
docker-compose.prod.yml
version: '2'
services:
web:
build:
context: .
dockerfile: Dockerfile.prod
image: my/web
container_name: 'web'
ports:
- '80:80'
コンテナ起動
本番用の設定で起動してみる。
ターミナル
# コンテナ起動
$ docker-compose -f docker-compose.prod.yml up -d --build
# コンテナ確認
$ docker-compose ps
Name Command State Ports
--------------------------------------------------------
web nginx -g daemon off; Up 0.0.0.0:80->80/tcp
# ブラウザ確認
$ open http://192.168.99.100
# コンテナ停止 ＆ 破棄
$ docker-compose -f docker-compose.prod.yml down
DockerHubに登録
Create Automated Buildからgithubのリポジトリを登録する。
※ https://hub.docker.com/r/reflet/docker-vue.js-cli3/
これで、ひな形のコンテナはできました。
実際のアプリを作る際は、このDockerコンテナを使って作れそうです。
以上