Diary

Diary

日々学んだことをアウトプットする場として初めてみました

トップ > Web > dockerを使って爆速でVue CLIを始めてみる

dockerを使って爆速でVue CLIを始めてみる

Web

Vue CLI の使える環境をdockerで構築

  • pythonと構成同じです
  • これから少しいじっていく予定なので、その辺で感じたことも共有できたらなと思います

必要なもの

ファイル構成

.- docker-compose.yml
|- Dockerfile
|- src/   （自動生成されます）
|- docker.sh

docker-compose.yml

version: '3'

services:
  web:
    container_name: web
    build: .
    ports:
      - 8080:8080
    privileged: true
    volumes:
      # - ./server:/app:cached
      - ./src/:/app
    tty: true
    stdin_open: true
    command: /bin/sh
  • dockerの8080番port（右）とhostの8080番ポート（左）をつないでいます
  • build: Dockerfileのあるパスを指定
  • tty: 起動しっぱなしにするかどうか
  • volumes: コンテナ内のフォルダ（右）とホストのフォルダ（左）を同期させる

Dockerfile

FROM node:16.0.0-alpine

WORKDIR /app/

RUN apk update
RUN npm install 
RUN npm install -g npm
RUN npm install -g @vue/cli
RUN npm install axios --save
  • 軽量のalpineを用いている
  • 初めからインストールしておきたいライブラリがあれば記述しておきます
    • 今回はVue cli を使うことが目的なので、それをインストールしてます

docker.sh

# !/bin/sh

docker-compose up -d
docker-compose exec python3 sh
docker-compose down
  • docker-cmposeを使うためのスクリプト
  • 一行目でコンテナの起動
  • 二行目で立ち上げたうち、python3というサービス名のものにアクセス

使い方

  • docker-composeと同じ階層でbash docker.shを叩く
  • 作業DIR（ローカルでいうsrc）に入るので、そこで作業をする
  • 作業が終わったらexitでターミナルを抜ける
    • docker.shの５行目が勝手に走り出すので、docker-compose downが勝手に行われる

VueCLI

  • vue create PROJECT_NAMEとすると、プロジェクトを立ち上げることができる
  • 出てきた指示に従ってローカルサーバーを立てると、コンテナ側の8080番ポートが開くが、docker-composeで8080:8080を指定しているためホストの8080からアクセスできる