DockerでVue3環境を作る！

#はじめに
この記事は `Docker` を使って `Vue3.0` 環境の構築までを記します。
初心者のため間違い等ございましたらご指摘いただけると幸いです。

#前提条件
`Docker`、`node`、`npm`をインストールしていること。
`Docker`をインストールしていない場合は以下のリンクを参考にインストールしてみてください。
[たぶん動くから！Docker始めてみよう！](https://qiita.com/leafeon00000/items/a2d694ac52b542c76e01)

#環境
`macOS Catalina` : 10.15.7
`Visual Studio Code` : 1.42.1

```sh:ターミナル
$ docker --version
Docker version 19.03.13
$ node --version
v14.14.0
$ npm --version
6.14.8
```
#Vueのバージョンアップ
PC上での `Vue3.0` の環境を構築します。
古い `Vue2.0` が入っていたため、一度アンインストールした後、最新のバージョンをインストールします。
##旧バージョンの削除
旧バージョンのVueをグローバルインストールしている場合のみ行います。

```sh:ターミナル
$ sudo npm uninstall vue-cli -g
```

##新バージョンのインストール
新しいバージョンをインストールし直します。

```sh:ターミナル
$ sudo npm install -g @vue/cli

(略)

$vue --version
@vue/cli 4.5.8
```


#ローカルの環境構築
ローカルで `Vue3.0` を使ったプロジェクトを動かしてみます。
##ローカル環境でのVueプロジェクトの作成
作業用のディレクトリを作成します。
後々Vue以外のコンテナも追加予定のため、以下の様なディレクトリ構成を想定しています。

```none:ディレクトリ構成
dockerApp
├──docker-compose.yml ←未作成
└──vue
    ├── Dockerfile　  ←未作成
    └── vue_app       ←今からこのフォルダを作る。vueの作業場所。
        └── ・・・       ←ここにVueのソースとか入る。
```

vue_app用のフォルダを作成し、Vueプロジェクトを作成していきます。

```sh:ターミナル
$ mkdir vue_app        #ディレクトリ作成
$ cd vue_app           #ディレクトリの中へ移動
$ vue create vue_app   #Vueプロジェクトの作成
```

ディレクトリ名やプロジェクト名は各自好きな名前を付けてください。

コマンドを叩くと初期設定が始まります。
`Vue 2` か `Vue 3` どちらを使うか聞かれるので、もちろん`Vue 3` を選びます。
`Default (Vue 3 Preview) ([Vue 3] babel, eslint) ` を選択します。（`↑`キー`↓`キーで選択し、`Enter`キーで決定）

```sh:ターミナル
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 
```

しばらくしたら `Vue3` のプロジェクトが作成されます。

一度動作の確認をしてみましょう。
`npm run serve` コマンドでサーバーを動かしてみます。

```sh:ターミナル
$ npm run serve
```
起動したら http://localhost:8080/ へアクセスしてみます。

|![スクリーンショット 2020-10-21 19.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/b3c736f2-2e72-fca7-11da-44c8b7663ad9.png)|
|:-:|

ちゃんと起動してますね！

ターミナル上で `control` + `c` でサーバーを停止させます。

#コンテナの環境構築
次にコンテナで `Vue` 環境を構築していきます。
##Dockerfileの作成
ディレクトリ構成で記した場所に、以下の様に `Dockerfile` を作成します。

```dockerfile:Dockerfile
FROM node:14.14.0

WORKDIR /vue_app

RUN npm install

COPY ./vue_app/ .

CMD ["npm", "run", "serve"]
```

* `FROM node:14.14.0` : `Docker` イメージのベースとなるイメージを選択します。 `:` の後はバージョンを指定します。ローカル環境と揃えたほうが無難？
* `WORKDIR /vue_app` : コンテナ内で作業するディレクトリを絶対パスで指定します。指定したディレクトリがない場合は自動的に生成してくれます。
* `RUN npm install` : npmをインストールします。
* `COPY ./vue_app/ .` : ソースをコピーします。[ローカル環境のソースのパス]、[コンテナ内に配置するパス]の順で記します。
* `CMD ["npm", "run", "serve"]` : Vueサーバーの起動。

##Dockerfileを用いたコンテナの起動
ターミナルで `Dockerfile` が配置されているディレクトリに移動してコンテナを起動してみましょう。
まずは `docker build` コマンドでイメージのビルドを行います。

```sh:ターミナル
cd {Dockerfileの配置されたパス}
docker build -t vueapp:0.0.1 .
```
* `-t myvueapp:0.0.1` : タグをつけることができます。以降の操作が楽になるので付けておきましょう。 `:` で区切ってバージョンを指定することができます。
* `.` : `Dockerfile` が配置されているパスを指定します。

ビルドができたらイメージが作成されているか確認します。

```sh:ターミナル
$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
vueapp                  0.0.1               fc7cabc1fe35        22 minutes ago      1.06GB
```
作成されてますね！

ではいよいよ `docker run` コマンドで起動してみましょう。

```sh:ターミナル
$ docker run --name vue_app_container --rm -it -d -p 8080:8080 vueapp:0.0.1
```
* `--name vue_app_container` : `vue_app_container` という名前で起動します。こちらもコンテナイメージをビルドするときと同じく、イメージ名を指定すると管理が楽になるので指定します。
* `--rm` : コンテナを停止した際に自動的にコンテナを削除してくれます。
* `--it` : ターミナルのコマンドをいい感じに入出力してくれます。
* `-d` : コンテナをバックグラウンドで実行します。
* `-p 8080:8080` : ローカルのポートをコンテナのポートに転送します。
* `vueapp:0.0.1` : `vueapp`イメージのバージョン `0.0.1` を起動します。

起動したら http://localhost:8080/ へアクセスして起動確認します。

ターミナル上での起動確認

```sh:ターミナル
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                    NAMES
388c1dfe015b        vueapp:0.0.1        "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:8080->8080/tcp   vue_app_container
```
`docker stop` コマンドで停止させます。

```sh:ターミナル
docker stop vue_app_container
```

##docker-composeの作成
ディレクトリ構成で記した場所に、以下の様に `docker-compose.yml` を作成します。

```docker:docker-compose.yml
version: '3'
services:
  vue:
    build: ./vue
    image: vueapp:0.0.2
    container_name: "vue_app_container"
    ports:
      - "8080:8080"
```

* `build` : `dockerfile` を配置したディレクトリを指定します。
* `images` : イメージ名を指定します。 `:` 以降にバージョンの指定ができます。
* `container_name` : コンテナ名を指定します。
* `ports` : ポートの転送指定をします。

##docker-composeを用いたコンテナの起動
`docker-compose up` コマンドで起動します。

```sh:ターミナル
$ docker-compose up　-d
```
* `-d` : バックグラウンドで起動します。

起動したら http://localhost:8080/ へアクセスして起動確認します。

|![スクリーンショット 2020-10-23 10.22.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/2a0ca322-3426-b9e5-9c7c-b59dfdc334a8.png)|
|:-:|

きちんと動いてますね！

コンテナを終了させるときは `docker-compose down` コマンドを使います。

```sh:ターミナル
$ docker-compose down
```
ファイルの変更をコンテナに反映させるには `docker-compose build` コマンドを使います。
試しに `Vue` プロジェクトを自動生成したときに作成されている `HelloWorld.vue` の `template` タグ内の最後の行に追記してみます。

```vue:vue/vue_app/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <div>
      追記！
    </div>
  </div>
</template>
```

`docker-compose build` コマンドを叩いた後、起動します。

```sh:ターミナル
$ docker-compose build

(略)

$ docker-compose up　-d
```

|![スクリーンショット 2020-10-23 10.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/f1ee78ac-7fd3-07d4-d606-892f528cde96.png)|
|:-:|

「追記！」の文字が見えますね！

#終わりに
`Vue`を使ったコンテナの作成の参考になれば幸いです。
前回の記事の最後に複数のコンテナを追加した`docker-compose`を書きたいとか言いつつ結局コンテナ一つの記事になってしまいました。
次回こそ、次回こそきっと…