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を作成します。

```shell
$ cd /path/to/MyApp
$ vim Dockerfile
```

```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](https://hub.docker.com/_/node)

[Dockerfileを書いてみる](https://qiita.com/nl0_blu/items/1de829288db2670276e8)
[Dockerで使う極小イメージメモ](http://shohu.tech/dcoker/post-395.html)


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

## docker-compose.yml の作成

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

```shell
$ vim docker-compose.yml
```

```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を参考にしてイメージを構築します。

```shell
$ docker-compose build
```

## コンテナの起動

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

```shell
$ docker-compose up -d
```

[docker-compose コマンドまとめ](https://qiita.com/wasanx25/items/d47caf37b79e855af95f)


## コンテナ内でVue projectの作成

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

```shell
$ docker-compose exec web /bin/ash
```

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


```terminal:コンテナ内
/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ページが出ることを確認しましょう。

<img width="839" alt="スクリーンショット 2018-12-28 5.06.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/493174c3-2126-27c2-99c6-092aa4171062.png">


[Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)

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


# 停止方法

サーバーを終了します。

```terminal:コンテナ内
Cmd(Ctrl) + C
```

コンテナを抜けます。

```terminal:コンテナ内
/app/vue-project # exit
```

### コンテナの停止
```shell:
$ docker-compose stop
```

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

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

```shell:
$ docker-compose down
```

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

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

[Dockerのライフサイクルがよくわからなかった](https://qiita.com/chroju/items/ce9cae248cc016745c66)


# 参考文献

[ローカルを汚さずdockerを使ってvue.jsの開発環境を作る](https://qiita.com/rh_taro/items/ca08b930f704275286a4)
[Dockerfileを書いてみる](https://qiita.com/nl0_blu/items/1de829288db2670276e8)
[Dockerで使う極小イメージメモ](http://shohu.tech/dcoker/post-395.html)
[docker-compose コマンドまとめ](https://qiita.com/wasanx25/items/d47caf37b79e855af95f)
[Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)
[Dockerのライフサイクルがよくわからなかった](https://qiita.com/chroju/items/ce9cae248cc016745c66)