LoginSignup
0

More than 3 years have passed since last update.

QuoridornをFirebaseで公開したメモ

Last updated at Posted at 2019-04-23

概要

結果は以下のURL。

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

開発環境

  • 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参照

ディレクトリ構成

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

ソースコード修正

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

最終ソース

docker設定

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

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は少しバージョンをあげてみた。

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"
     ]
   }
}

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でビルドした後のものをコピーするように修正

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を試してみた!基本編

新規プロジェクトの作成

2019-04-18 (1).png
2019-04-18 (4).png
2019-04-18 (5).png
2019-04-18.png

プロジェクトIDの記述

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

app/.firebaserc
{
  "projects": {
    "default": "quoridorn-7154f"
  }
}
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
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新規登録

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

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

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

実行すると、認証用のURLが表示される。
ブラウザでアクセスして、googleで認証を行う。
2019-04-22 (1).png

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

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

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

参考

Quoridorn の設置方法
Vue CLI 3入門 06: CLIサービス
vue-cli guide
vue-loader postcss
vue spa
Vue Cli 3への開発環境移行でつまづいたこと

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0