Dockerを使ってVue CLI 3 の開発環境を構築する

概要

今回は、ローカルの環境を汚さないようにdocker上でVue CLI3 の開発環境を構築していきます。
dockerを使って環境構築を行うのは初めてなのでメモ多めです。
docker-composeコマンドを使用したほうが簡単な気がしたので今回はこちらを使います。

ソースコード
https://github.com/satokibi/sample-docker-vue-cli3

環境

• macOS High Sierra 10.13.6
• Docker Desktop Community Version 2.0.0.0-mac81

Dockerのインストール

• https://hub.docker.com/editions/community/docker-ce-desktop-mac

Vue CLI3 の環境構築

Dockerfile の作成

まずは、Docker関連のファイルやvueのフォルダを置くディレクトリを作成し、
そこでDockfileを作成します。

$ cd /path/to/MyApp
$ vim Dockerfile

Dockerfile

FROM node:8.15.0-alpine

WORKDIR /app

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

CMD ["/bin/ash"]

Dockerhubで好きなNode.jsのverを選択します。
Dockerhub- node

Dockerfileを書いてみる
Dockerで使う極小イメージメモ

CMD ["/bin/ash"]
alpine linuxではbashがないのでash or shみたいです。

docker-compose.yml の作成

先程と同じディレクトリでdocker-compose.ymlを作成します。

$ vim docker-compose.yml

docker-compose.yml

version: '3'
services:
  web:
    build: .
    ports:
      - 1234:8080
    volumes:
      - .:/app
    stdin_open: true
    tty: true

サービスの構築

下記のコマンドでサービスの構築を行います。

サービスとは今回でいうと「web」のことを指します。
ymlファイルにimage:が書かれている場合はそのイメージ名。
ローカルになければ、リモートからプルしてきます。imageが書かれていない場合、buildに書かれているパスの(デフォルトは)Dockerfileを参考にしてイメージを構築します。

$ docker-compose build

コンテナの起動

コンテナを作成して、起動します。
オプションで-dをつけることでバックグラウンドで実行することができます。
またオプションで--buildをつけることで起動前にイメージも構築します。

$ docker-compose up -d

docker-compose コマンドまとめ

コンテナ内でVue projectの作成

下記のコマンドでコンテナ内に入ることができます。

$ docker-compose exec web /bin/ash

$ docker-compose exec {サービス名} {実行コマンド}

コンテナ内

/app # vue create vue-project
/app/vue-project # cd vue-project
/app/vue-project # npm run serve

/app # yarn serve (yarnの方はこちら)

http://localhost:1234 にアクセスしてwelcomeページが出ることを確認しましょう。

Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)

あとは、serverを立ち上げたまま、
もう一つterminalを立ち上げvue-project内を編集することでweb側にも編集が反映されます。

停止方法

サーバーを終了します。

コンテナ内

Cmd(Ctrl) + C

コンテナを抜けます。

コンテナ内

/app/vue-project # exit

コンテナの停止

$ docker-compose stop

コンテナの削除

$ docker-compose rm

※ volumes:でマウントしているため、/appの中身はコンテナのライフサイクルが終了した後でも保持されます。

停止、削除、ネットワーク削除

$ docker-compose down

基本的にdocker-compose downで問題なさそうです。

コンテナはマシンとして扱う。状態を持ち、停止（stop）しても状態は保持される。
コンテナは明示的に破棄（rm）しない限り、停止しても存在し続ける（それなりにちゃんと消さないとどんどん容量を食う）。docker psコマンドはオプション無しだと起動中のコンテナしか表示しないため、あたかも停止したコンテナが破棄されたように見えたりする。
コンテナは使い捨てる。状態を永続化したい場合はcommitするか、Dockerfileを書く。

Dockerのライフサイクルがよくわからなかった

参考文献

ローカルを汚さずdockerを使ってvue.jsの開発環境を作る
Dockerfileを書いてみる
Dockerで使う極小イメージメモ
docker-compose コマンドまとめ
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
Dockerのライフサイクルがよくわからなかった