DockerでVue.jsの開発環境を作成
DockerとVue.jsとの連携手順です。
前提としてDockerがインストールされているものとします。
検証はMacOS12.4でやってます。
Docker関連ファイルの作成
任意のディレクトリを作り、2つのファイルを用意します。
1.docker-compose.yml
version: '3'
services:
vue:
container_name: vue
build: .
ports:
- "8080:8080"
volumes:
- "./:/var/www/html"
tty: true
2.Dockerfile
FROM node:18-alpine3.15
WORKDIR /var/www/html
RUN apk update && \
npm install -g npm && \
npm install -g @vue/cli
Docker実行
ターミナルを開いて初回ビルドと起動をします。
docker-compose up -d --build
Vueのプロジェクトを作ります。
docker-compose exec vue sh
vue create app *appがVue.jsのプロジェクト名です。
バージョンを選択はデフォルトのVue3を選択します。
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
パッケージ管理はNPMを選択します。
? Pick the package manager to use when installing dependencies:
Use Yarn
❯ Use NPM
vue.jsを起動します。
$ cd app
$ npm run serve
ブラウザで「http://localhost:8080」を開きます。以下の画面が表示されれば成功です。
