Vue.js + Docker Compose で ホットリロードしながら開発する環境をつくる

はじめに

個人の開発用に Vue.js の動作環境を Docker に移行してみたら、とても捗ったのでメモがてら投稿します。

手順

前提

• Vue.js のプロジェクトはできている
• npm run serve で、 Vue.js が立ち上がるように設定されている

1. Dockerfile を作成

プロジェクトの直下に作成します。

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

これで、 Vue.js を動作させる Docker Image を作成することができます。

2. docker-compose.yml を作成

こちらもプロジェクト直下に作成します。

docker-compose.yml

version: "3"
services:
  app:
    container_name: web
    build: 
      context: .
      dockerfile: Dockerfile
    ports:
        - 8080:8080
    volumes: 
        - .:/app

volues でプロジェクトを Docker コンテナにマウントさせることで、 npm run serve の Hot Road が利くようになります。

起動する

プロジェクト直下で下記コマンドを実行します。

docker-compose up

localhost:8080 へアクセスすると、 Vue.js が起動しているのが確認できると思います。

終わりに

Dockerはありがたいですね。
少しでもあなたの為になれば幸いです。