Vue.jsのDocker開発環境構築手順まとめ

Vue.jsのDocker開発環境構築手順をまとめる。(備忘録のN番煎じ記事)
前提条件：Docker,docker-composeをインストール済みであること。

事前準備(Dockerfile,docker-compose.ymlを作成する)

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

Dockerfileと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

http://localhost:8080にアクセスする。

以下の画面が表示される。