はじめに

今回は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です。

参考
- ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]
- Docker内で Webpack の watch でファイルの変更を検知する
- consistent、cached、delegated 設定のチューニング

docker-composeでシンプルにvue.js環境構築