#はじめに
今回はdocker-composeでvue.jsの開発環境をシンプルに構築してみます。
#環境
Dockerとdocker-composeは用意できている前提です。
- Docker version 20.10.0
- docker-compose version 1.27.4
#構成
以下の構成を想定しています。
project/web/ 以下にvue.jsのプロジェクトが作成されます。
project
├── docker
│ └── web
│ └── Dockerfile
├── docker-compose.yml
└── server
#構築
環境構築の手順を解説を簡単に交えながら紹介していきます。
1. docker-compose.yml作成
docker-compose.yml
version: '3.8'
services:
web:
container_name: web
build: ./docker/web
ports:
- 8080:8080
privileged: true
volumes:
- ./server:/app:cached
tty: true
stdin_open: true
command: /bin/sh
【備考1】
vue.jsはデフォルトでポート8080を使用するようになっているため、それに合わせてます。
必要な場合は以下のように変更することもできます。
docker-compose.yml
ports:
- 9000:9000
【備考2】
MacのマウントシステムとDockerのマウントシステムの相性がよくないみたいなので、
ボリュームの:cached（ホスト上の更新がコンテナ上に反映するまで、遅延が発生するのを許容）オプションをつけています。オプションはつけなくても動作は問題ないですが、webpackのwatchでファイル変更を検知するようにするとPCのファンが回り続けてうるさいです(笑)
2. Dockerfileの作成
dockerディレクトリを作成します。
Dockerfile
FROM node:14.15.0-alpine
WORKDIR /app
RUN apk update && \
npm install && \
npm install -g npm && \
npm install -g vue-cli
3. Docker起動&コンテナに入る
# Docker構築&起動
docker-compose up -d
# コンテナに入る
docker-compose exec web sh
4. vue.jsプロジェクト作成または更新
新規構築と更新(gitで共有された場合など)でコマンドが変わりますのでご注意ください。
新規作成の場合
/app # vue init webpack
# y/nで質問されますが、こだわりなければ基本yesまたはEnterでOKです。
環境設定
hostやポートを変更しましょう。
今回は、hostを'localhost'から'0.0.0.0'に変更します。
server/config/index.js
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
ファイル変更を検知するように設定
dev.pollをfalse => trueに変更
server/config/index.js
poll: true, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
更新の場合
/app # npm update
npm実行(共通)
/app # npm run dev
5. 確認
http://0.0.0.0:8080 にアクセスしましょう。
下記の画面が表示されればOKです。
参考