概要
結果は以下の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ディレクトリに入れて、それをコンテナに反映するようにしている。
環境変数は、仮想環境のもの。
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は少しバージョンをあげてみた。
--- 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"
]
}
}
--- 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/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を試してみた!基本編
新規プロジェクトの作成
プロジェクトIDの記述
作成時に確認したプロジェクトIDを設定ファイルに設定していく。
{
"projects": {
"default": "quoridorn-7154f"
}
}
#!/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/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の登録や編集画面で、IPやドメインをきちんと設定しないと通信できない。
binファイルにskyway設定を反映
# 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を実行する。
実行すると、認証用のURLが表示される。
ブラウザでアクセスして、googleで認証を行う。
コンソールに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への開発環境移行でつまづいたこと