【環境構築】dockerでvue.js+Typescript+vuetify+express+Sequelizeの環境構築

#dockerファイル作成
ディレクトリを作成

```terminal:console
mkdir node
```

```terminal:console
cd node
vim Dockerfile
```

#node.jsを準備

dockerファイルを作成し、そこから各種プログラムを実行できるようにする。
ここではexpress,suquelize-cliの実行環境の構築ができるよう記載。

```node:Dockerfile
FROM node:12.13
RUN npm install -g express-generator sequelize-cli
```
FROM nodeでノードのベースイメージ
RUNコマンドでnpm installを実行しexpressとsepulize-cliをインストールするコマンド

###docker イメージを作成

これによりDockerfileが実行される。

```terminal:console
docker build node/. -t serverapp:latest
```
-tオプションを付けていることで、名前（serverapp）とタグ名（latest）を指定している。
<img width="900" alt="スクリーンショット 2020-02-29 15.02.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/458b1992-4322-1b34-7d16-e0d6c2775528.png">


```
docker run -itd --rm --name serverapp -v $PWD/node:/node serverapp:latest
```
####オプションの説明
-itd コンテナを継続的に動かすために必要
--rm　コンテナ終了時自動的に削除。
--name　serverappというコンテナ名前で作成
-v ホスト側のディレクトリ：コンテナ側のマウントポイント
今回の場合は$PWDで現在いるディレクトリの/nodeがホスト側、/node serverapp:latestがマウントポイントとなる。

#express,sequelizeをインストールする

ドッカーコンテナにログインしexpressをインストールしていきます。
コンテナにロングインする。

```terminal:console
docker exec -it serverapp /bin/bash
```
docker exec -it <コンテナ名>/bin/bash　コンテナにログイン
-it コンテナを継続的に動かすために必要

```terminal:root
cd /node
express .
```
destination is not empty, continue?(空ファイルじゃないけど大丈夫？)と聞かれますが、中にはDockerfaileがあるだけなので[y]で続行する。
<img width="653" alt="スクリーンショット 2020-02-29 16.21.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/840fbe77-88fd-03dd-8057-fba2240e2ea3.png">


#####sequelizeなどの準備
ここで色々必要になるものの準備を行います。

```terminal:root
npm install --save sequelize sqlite3 cors nodemon
npm install
```
#####それぞれ簡単解説
ここでは詳しい説明はしませんが、別記事をそれぞれ作成しようと思います。

|名称|説明| 
|:-----------------:|:------------------:|
| sequelize|データベースを管理するツール|
| sqlite3|簡易版データベース|
| cors|セキュリティ上のルール|
| nodemon|自動でサーバーを再起動してくれるツール| 

これでローカルフォルダのnode/にファイルが作成できたはず。

#sequelizeをセットアップ

```terminal:root
sequelize init
```
<img width="580" alt="スクリーンショット 2020-02-29 16.54.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/04f30d3b-e75c-2a53-fb47-f6eeb0b346c5.png">

ターミナルに戻る

```terminal:root
exit
```

node/config/config.jsonの記載を変更する。
変更点
database mysql　 →　sqliteへの変更
storage　"./data/development.sqlite3"の記載をそれぞれに追加

```terminal:config.config.json
{
  "development": {
    "username": "root",
    "password": null,
    "database": "database_development",
    "host": "127.0.0.1",
    "dialect": "sqlite",
    "storage": "./data/development.sqlite3",
    "operatorsAliases": false
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "sqlite",
    "storage": "./data/test.sqlite3",
    "operatorsAliases": false
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "sqlite",
    "storage": "./data/production.sqlite3",
    "operatorsAliases": false
  }
}
```


nodeファイルの中にconfig.jsonで指定したdataファイルを作成。

```terminal:console
mkdir node/data
```
もう一度dockerコンテナにログイン

```terminal:console
docker exec -it serverapp /bin/bash
```
Unable to resolve sequelize package in
sequleize model:createコマンドを使いデータベースに雛形を作成
sequelize model:createコマンドとは？


```terminal:root
sequelize model:create --name goal --underscored --attributes goalname:string
```

[Unable to resolve sequelize package inのエラーが出る場合はこちら](https://qiita.com/aki319809/items/a76c98f31ace5fc642e8)


####マイグレートする
そもそもマイグレートとは、アプリケーションで使うデータベースの定義を自動的に作成・管理する機能です。

```terminal:root
sequelize db:migrate
```

マイグレートが完了したら一度dockerを停止する。

```terminal:terminal
docker stop serverapp
```

#vueの準備

ディレクトリを作成

```terminal:console
mkdir vue
```

```terminal:console
vim vue/Dockerfile
```

作成したfrontapp内のDockerfileに以下の記述をする。
ここではvue/cliの実行環境の構築ができるよう記載。

```terminal:Dockerfile
FROM node:12.13
RUN npm install -g @vue/cli
```

Dockerfileを元にコンテナイメージを作成。起動し、ローカルのフォルダをマウント。

```terminal:console
docker build vue/. -t frontapp:latest
```

<img width="651" alt="スクリーンショット 2020-03-08 05.19.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/408c6c00-5cdf-8ffb-6cfe-0220631d50bc.png">


```terminal:console
docker run -itd --rm --name frontapp -v $PWD/vue:/vue frontapp:latest
```
docker run コマンドが正常に動いているか確認。

```terminal:console
docker ps
```
https://www.dropbox.com/s/d767il7jbm3yprk/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-03-08%2005.21.25.png?dl=0

```terminal:console
docker exec -it frontapp /bin/bash
```
コンテナにログイン後以下を実行する。

```terminal:root
cd /vue
vue create frontapp
```

<img width="1100" alt="スクリーンショット 2020-03-08 05.21.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/9938843c-4d7f-7bb4-72f6-eae3be72f983.png">

以下のように標準のyarnか高速のnpmどちらかで実行
npmで実行したいため[y]を選択する。

```terminal:root
Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?
```
以下のメッセージに従いvueをインストールしていく。
今回はマニュアルでtypescriptなどもインストールしていく。

<img width="470" alt="スクリーンショット 2020-03-08 05.33.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/d76a0ea5-4a6a-d1c7-5c2f-df1a490c894e.png">
<img width="610" alt="スクリーンショット 2020-03-08 05.34.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/e9cc3828-8f28-66eb-7307-d1cbcf7366e1.png">

これでvueのインストールは完了です。

#vuetifyの環境
frontappに移動し、vuetifyのプラグインを追加する。
インストールはデフォルトで行った。
インストール終了後はexitで一度コンテナからログアウトする

``` terminal:console
root@701c15dfea18:/# cd vue/frontapp
root@701c15dfea18:/vue/frontapp# vue add vuetify
exit
```
#docker-compose.ymlファイルを準備する。
Node.jsとVue.jsそれぞれのコンテナを起動する際、composeファイルがあると起動/終了が楽なので、
docker-compose.ymlを下記のように記入。

``` terminal:docker-compose.yml
version: "3"
services:
  node:
    build: node/.
    volumes:
      - ./node:/node
    working_dir: /node
    command: ["npm", "start"]
    ports:
      - "3000:3000"
  vue:
    build: vue/.
    volumes:
      - ./vue:/vue
    working_dir: /vue/frontapp
    command: ["npm", "run", "serve"]
    ports:
      - "8080:8080"
```
一度バックグランドで実行しそれぞれ表示を確認する。

```
docker-compose up -d
# コンテナ終了は docker-compose down
```
localhost:8080でアクセス
<img width="1678" alt="スクリーンショット 2020-02-24 23.31.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/8a65c2be-b32e-d3d7-8e05-b6a15990480c.png">
localhost:3000でアクセス
<img width="701" alt="スクリーンショット 2020-02-24 23.34.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/1f213008-6f03-5bd0-d666-580ca7513c6b.png">

#参考記事
とてもお世話になりました。ありがとうございました:bow:
[Vue.js + Express + Sequelize + DockerでCRUD搭載のTodoリストを作ってみる](https://qiita.com/yoshiplum/items/129e7ad1ffc3a02b9eb2)
[【環境構築】Docker + Rails6 + Vue.js + Vuetifyの環境構築手順](https://qiita.com/terufumi1122/items/237b5465e11b26297bde)
[GitHub PagesにDocker+Vue.js+Vuetifyでページを公開](https://qiita.com/0206kzk/items/8eea8907e47be44638ea)