概要
今回は、ローカルの環境を汚さないように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のインストール
Vue CLI3 の環境構築
Dockerfile の作成
まずは、Docker関連のファイルやvueのフォルダを置くディレクトリを作成し、
そこでDockfileを作成します。
$ cd /path/to/MyApp
$ vim 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
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
コンテナ内で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を使ってvue.jsの開発環境を作る
Dockerfileを書いてみる
Dockerで使う極小イメージメモ
docker-compose コマンドまとめ
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
Dockerのライフサイクルがよくわからなかった