はじめに

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

手順

前提

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

1. Dockerfile を作成

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

FROM node:lts-alpineWORKDIR /appCOPY package*.json ./RUN npm installCOPY . .EXPOSE 8080CMD ["npm", "run", "serve"]

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

2. docker-compose.yml を作成

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

version:"3"services:app:container_name:webbuild:context:.dockerfile:Dockerfileports:-8080:8080volumes:-.:/app

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

起動する

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

docker-compose up

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

終わりに

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