Docker環境構築 / Vue.jsをさくっと起動させるまで.

ディレクトリ構成

/Vue-Test
 L Dockerfile
 L docker-compose.yml

①：Dockerfile/docker-compose ファイルを準備

①-1：Dockerfile

FROM node:17-alpine3.14

WORKDIR /work

RUN apk update && \
    npm install -g npm && \
    npm install -g @vue/cli

EXPOSE 8080
ENV HOST 0.0.0.0

①-2：docker-compose.yml

version: '3'
services:
  vue:
    container_name: vue
    build: 
      context: .    
      dockerfile: ./Dockerfile
    ports:
      - "8080:8080"
    volumes:
      - ./server:/work:delegated      
    tty: true

②：docker コンテナの起動

②-1：ディレクトリに移動

cd Vue-Test

②-2：コンテナ起動

docker-compose up -d

③：コンテナに入り、Vueプロジェクトを作成

③-1：コンテナへ移動

docker-compose vue exec vue sh

③-2：Vueプロジェクトを作成

first-app 名称でプロジェクトを作成

vue create first-app

③-3：Vueのバージョンを選択

Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 

③-4：package manageを選択

Use Yarn 
❯ Use NPM

これでインストールが開始します。

④：プロジェクトの起動

④-1：プロジェクトへ移動

cd first-app

④-2：serve

npm run serve

⑤：ブラウザで確認

下記へアクセスして、確認して下さい。

http://localhost:8080/