QuoridornをFirebaseで公開したメモ

## 概要
結果は以下のURL。

https://quoridorn-7154f.firebaseapp.com/quoridorn/

Quoridornのリポジトリは一つではないので注意。
今回は2019/4/24で最新の以下のリポジトリを使用。

https://github.com/HillTopTRPG/quoridorn-vue-cli-3

## 開発環境

* Windows 10
* Vagrant 2.2.4
* Virtualbox 6.0.6r130049
* Ubuntu 18.04 LTS (Bionic Beaver)
* Docker version 18.09.5, build e8ff056
* docker-compose version 1.24.0, build 0aa59064

* 仮想環境の設定は[Vagrantfile](https://github.com/hibohiboo/develop/blob/master/Vagrantfile)参照

## ディレクトリ構成

```diff
+ app   ... firebaseのデプロイ設定と、buildしたquoridornの配置
+ bin   ... コマンド実行用のシェルファイル置き場
+ docker ... 仮想環境所にコンテナを立てる設定。設定のカスタマイズを行っている。
  public
  src
  .env
  .gitignore
  ...
```

## ソースコード修正

以下のソースを参考のこと。

[最終ソース](https://github.com/hibohiboo/quoridorn-vue-cli-3/tree/aae0945f0bf29196580cdb641d26484981a4e883/)

### docker設定
以下を確認のこと。設定ファイルの変更はcustomディレクトリに入れて、それをコンテナに反映するようにしている。
環境変数は、仮想環境のもの。

```yaml:docker/docker-compose.yml
version: '3'
services:
  quoridorn:
    build: ./quoridorn
    volumes:
      - ./custom/package.json:/app/package.json
      - ../tsconfig.json:/app/tsconfig.json
      - ../babel.config.js:/app/babel.config.js
      - ./custom/vue.config.js:/app/vue.config.js
      - ../src:/app/src
      - ../public:/app/public
      - ../dist:/app/dest
    ports:
      - 8080:8080
    # env_file: ../.env
    environment:
      - NODE_ENV=develop
      - BASE_URL=192.168.50.10
      - VUE_APP_BASE_URL=quoridorn
    command: [yarn, run, serve]

  # デプロイツール
  quoridorn_firebase:
    build: ./firebase
    env_file: ./firebase/.env
    volumes:
      - ../app/public:/app/public
      - /app/functions/node_modules
      - ../app/.firebaserc:/app/.firebaserc
      - ../app/firebase.json:/app/firebase.json
    ports:
      - 5000:5000
      - 9005:9005
```

package.jsonは少しバージョンをあげてみた。

```diff:docker/custom/package.json
--- a/package.json
+++ b/package.json
@@ -4,45 +4,46 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --open",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build && mv /app/dist /app/dest/",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "ajv": "^6.10.0",
     "ajv-keywords": "^3.4.0",
-    "compression-webpack-plugin": "^2.0.0",
-    "file-saver": "^2.0.0",
-    "js-yaml": "^3.12.1",
-    "json-loader": "^0.5.7",
-    "jszip": "^3.1.5",
+    "file-saver": "^2.0.1",
+    "js-yaml": "^3.13.1",
+    "jszip": "^3.2.1",
     "moment": "^2.24.0",
-    "skyway-js": "^1.1.19",
-    "typescript": "^3.3.3333",
-    "vue": "^2.5.17",
-    "vue-class-component": "^6.0.0",
-    "vue-mixin-decorator": "^1.0.0",
-    "vue-property-decorator": "^7.0.0",
-    "vue-router": "^3.0.1",
-    "vue-slider-component": "^2.8.6",
-    "vuedraggable": "^2.17.0",
-    "vuex": "^3.0.1",
-    "vuex-class": "^0.3.1",
-    "yaml-loader": "^0.5.0"
+    "skyway-js": "^1.2.0",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.0.2",
+    "vue-mixin-decorator": "^1.1.1",
+    "vue-property-decorator": "^8.1.0",
+    "vue-router": "^3.0.6",
+    "vue-slider-component": "^3.0.28",
+    "vuedraggable": "^2.20.0",
+    "vuex": "^3.1.0",
+    "vuex-class": "^0.3.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
-    "@vue/cli-plugin-typescript": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
-    "@vue/eslint-config-prettier": "^4.0.0",
-    "@vue/eslint-config-typescript": "^3.2.0",
+    "@vue/cli-plugin-babel": "^3.6.0",
+    "@vue/cli-plugin-eslint": "^3.6.0",
+    "@vue/cli-plugin-typescript": "^3.6.0",
+    "@vue/cli-service": "^3.6.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/eslint-config-typescript": "^4.0.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "lint-staged": "^7.2.2",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.0.1",
-    "vue-template-compiler": "^2.5.17"
+    "compression-webpack-plugin": "^2.0.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "json-loader": "^0.5.7",
+    "lint-staged": "^8.1.5",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "typescript": "^3.4.4",
+    "typescript-eslint-parser": "^22.0.0",
+    "vue-template-compiler": "^2.6.10",
+    "yaml-loader": "^0.5.0"
   },
   "eslintConfig": {
     "root": true,
@@ -82,4 +83,4 @@
       "git add"
     ]
   }
}

```

```diff:docker/custom/vue.config.js
--- a/vue.config.js
+++ b/vue.config.js
@@ -5,8 +5,10 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
   .BundleAnalyzerPlugin;
 
 module.exports = {
-  baseUrl: process.env.VUE_APP_BASE_URL,
+  publicPath: process.env.VUE_APP_BASE_URL,
   devServer: {
+    // sock.js用に仮想環境のIPとポートを指定
+    public: "192.168.50.10:8080",
     watchOptions: {
       poll: true
     },
@@ -30,7 +32,8 @@ module.exports = {
         threshold: 1024,
         minRatio: 0.8
       }),
-      new BundleAnalyzerPlugin()
+      // buildの後にanalyzerが動いてctrl + Cで終わらなければならなくなるのでコメントアウト
+      // new BundleAnalyzerPlugin()
     ]
   },
   // yamlローダーの追加
```

### binファイルについて

```
bin/up.sh              ... 開発サーバの起動。 http://192.168.50.10:8080/quoridornでアクセスできる。
bin/build.sh           ... デプロイ用のビルド。
bin/container_build.sh ... コンテナ作成用
bin/firebase/deploy.sh ... ビルドしたファイルのアップロード
bin/firebase/login-token-generate ... firebaseを利用可能にする。
```

distフォルダにビルドしたソースがdistという名前で入ってくる。
distフォルダを消すことはできないとエラー。docker-compose.ymlを指定しているため。なので、bashでビルドした後のものをコピーするように修正

```bash:bin/build.sh
#!/bin/bash

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)
parent_dir=$bin_dir/..
docker_dir=$parent_dir/docker
container_name=${1:-quoridorn}

# $container_nameの有無をgrepで調べる
docker ps | grep $container_name

# grepの戻り値$?の評価。 grep戻り値 0:一致した 1:一致しなかった
if [ $? -eq 0 ]; then
  # 一致したときの処理
  cd $docker_dir && docker-compose exec $container_name yarn run build
else
  # 一致しなかった時の処理
  # コンテナを立ち上げて接続
  cd $docker_dir && docker-compose run $container_name yarn run build
fi

# distフォルダに出力されたビルド内容をquoridornの名前に変更してapp/publicの下に移動

mv -T $parent_dir/dist/dist $parent_dir/app/public/quoridorn

```

## firebaseの登録

googleアカウントがあれば、簡単に登録できます。
以下のサイトを参照。
[mBaaSの大本命グーグルのFirebaseを試してみた！基本編](https://www.apps-gcp.com/mbaas-firebase/)

### 新規プロジェクトの作成

![2019-04-18 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/08104645-e493-2d4f-64e1-da779bb7aad3.png)
![2019-04-18 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/2c02f097-452d-c246-cf8f-b5d91faca212.png)
![2019-04-18 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/838fae27-d7f7-a077-5a24-37e5c0163f3b.png)
![2019-04-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/2ca0889d-899d-90ac-93d6-025786125100.png)

### プロジェクトIDの記述

作成時に確認したプロジェクトIDを設定ファイルに設定していく。

```json:app/.firebaserc
{
  "projects": {
    "default": "quoridorn-7154f"
  }
}
```

```bash:bin/firebase/login-token-generate.sh
#!/bin/bash

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)
name=${1:-quoridorn_firebase}

# docker-composeの起動。 OAuth用に9005. サンプルアプリ用に5000ポートを開放。
cd $bin_dir/../../docker && docker-compose run -p 9005:9005 -p 5000:5000 $name firebase login:ci
```

```bash:bin/firebase/deploy.sh
#!/bin/bash

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)
name=${1:-quoridorn_firebase}
project_id=quoridorn-7154f

# docker-composeの起動。 OAuth用に9005. サンプルアプリ用に5000ポートを開放。
cd $bin_dir/../../docker && docker-compose run -p 9005:9005 -p 5000:5000 $name firebase deploy --token "$FIREBASE_TOKEN" --only hosting --project $project_id
```

## skywayの登録

チャットの時に必要になるので登録して、キーを入手。以下を参考。

[skyway新規登録](https://webrtc.ecl.ntt.com/signup.html)

skywayの登録や編集画面で、IPやドメインをきちんと設定しないと通信できない。

### binファイルにskyway設定を反映

```yaml:public\static\conf\connect.yaml
# SkyWayのAPIキーを指定してください
skywayKey: "取得したキー"

# 接続方式を以下から選んで指定してください
# "Mesh": 公式サーバー向け。SkyWayの無料利用枠をあまり消費しない代わりに少人数（10名未満）でないと重くなる
# "SFU": 個人サーバー向け。SkyWayの無料利用枠を急速に消費する代わりに大人数での通信が可能。
type: "Mesh"

# bcdice-apiの向き先
# 末尾のスラッシュは無くしてください
bcdiceServer: "https://www.taruki.com/bcdice-api"
```

## 検証で実行
bin/firebase/up.phpを使用。

## デプロイ

bin/firebase/login-token-generate.shを実行する。

![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/2e39f483-99ad-1880-7068-8cfd3d9a0eb9.png)


実行すると、認証用のURLが表示される。
ブラウザでアクセスして、googleで認証を行う。
![2019-04-22 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/f4d1fce8-820e-02a0-4871-9133af1a0b96.png)

コンソールにAPIキーが出てくると思うので、控えておく。

その後、bin/up.shで確認できる。
bin/firebase/build.shで反映用にビルド。

bin/firebase/firebase/deploy.shでfirebaseをビルドする。

## 参考

[Quoridorn の設置方法](https://dona-co.art/?p=2229)
[Vue CLI 3入門 06: CLIサービス](http://www.fumiononaka.com/Business/html5/FN1809001.html)
[vue-cli guide](https://cli.vuejs.org/guide/css.html#automatic-imports)
[vue-loader postcss](https://vue-loader-v14.vuejs.org/ja/features/postcss.html)
[vue spa](https://qiita.com/buchiya4th/items/6f5db9f58ee66982438e)
[Vue Cli 3への開発環境移行でつまづいたこと](https://uyamazak.hatenablog.com/entry/2018/07/31/115457)