Vue.jsの開発環境をDockerで構築

こちらの記事を参考にして、Dockerでコンテナ立ち上げてその上でVue.js を動かす

まずDockerの環境設定

Docker上でVue.jsを動かすのに必要らしい vue-cli-service を npm install

npm install --save @vue/cli-service

package.json にも追加

code:json

"scripts": {

"serve": "node_modules/.bin/vue-cli-service serve"

}

Dockerfile.devを用意

code:docker

FROM node:16-alpine3.11

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

node:16-alpine3.11 のところは、DockerHubの最新のにした。

Docker Build

docker build --tag docker-test:latest --file Dockerfile.dev .

Docker Run で動くようになる

docker run --rm -it --name docker-test-container -p 8080:8080 -v ${PWD}:/app -v /app/node_modules docker-test:latest

と思いきや、自分の環境ではコンパイルエラーになった。

ググったところ、これに相当

npm add html-webpack-plugin

を実行して再度 Dcoker Build, Run をしたら、localhost:8080 で Docker 上の Vue.js ページにアクセスできた。