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のインストール


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ページが出ることを確認しましょう。

スクリーンショット 2018-12-28 5.06.52.png

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のライフサイクルがよくわからなかった