Vue.js의 Docker 개발 환경 구축 절차 요약

사전 준비 (Dockerfile, docker-compose.yml 만들기)

mkdir 任意のディレクトリ
cd 任意のディレクトリ
vi Dockerfile
vi docker-compose.yml

Dockerfile

# ベースイメージ
FROM node:13.10.1-alpine3.11
# vue-cliインストール
RUN npm install --global @vue/cli
# 作業ディレクトリ指定
WORKDIR /myprojects

docker-compose.yml

version: '3'

services:
  app:
    # ビルドパス
    build: .
    # ポート指定
    ports:
      - "8080:8080"
    # マウント指定
    volumes:
      - ".:/myprojects"
    # 起動状態のままにする
    tty: true

컨테이너를 만들고 시작하고 컨테이너 안으로 들어가기

docker-compose up -d
docker-compose exec app ash

Vue 앱 만들기

vue create app

앱 시작 및 동작 확인

cd app
yarn serve