コリドーン」カテゴリーアーカイブ

仮:Quoridorn Mark2 を自宅サーバーに設置 (Ubuntu16.04 + Nginx )


Quoridorn Server を設置


※現在、ローカル環境でのみ動作を確認しています。

Quoridornを自宅サーバーに導入する為には、
Quoridorn-ServerとQuoridorn-Cliantの2つを設置する必要があります。
まずは、サーバー側から片付けていきましょう。
レンタルサーバーへの設置は、分かりません。参考にはなるかもしれません…たぶん。

#1 Mongdb をインストール
まずは、サーバーの動作に必要なMongodbというデータベースを入れていきます。

1-1.インストールするパッケージを認証するためのキーをインポート

sudo wget https://www.mongodb.org/static/pgp/server-4.2.asc
sudo apt-key add server-4.2.asc

1-2.APTの設定ファイルに、レポジトリ情報を追加

echo "deb https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

1-3.インストール

sudo apt update
sudo apt -y install mongodb-org

1-4.起動

sudo ufw allow 27017
sudo systemctl enable mongod
sudo systemctl start mongod

1-5.MongoDBに接続/切断

mongo
db.version()
show dbs
exit

1-6.インストールが上手く行かない場合
パージして入れ直します。dbやlog、pid等の設置場所、パーミッションをよく見ましょう。

sudo apt purge mongodb-org* #パージ!
sudo apt uodate
sudo apt upgrade

sudo rm /tmp/mongodb-27017.sock #ゴミ掃除
ps aux | grep mongo
kill -9 2411

sudo apt install mongodb #← この一行で何故か上手くいく
mongod --version
sudo apt install -y mongodb-org
mongod --version

sudo systemctl unmask mongodb #エラー回避
sudo systemctl enable mongod
sudo service mongod start
sudo service mongod status

参考
Install MongoDB Community Edition on Ubuntu
「Failed to set up listener: InternalError: Failed to set up sockets」
error: Unit mongodb.service is masked when starting mongodb
MongoDB service failed to start (unrecognized service )
「Failed to set up listener: InternalError: Failed to set up sockets」


#2 Nodejs と Vue CLI をインストール
次はNodejsです。npm というパッケージ管理ソフトで導入します。

2-1.インストール

sudo apt install -y nodejs npm
mkdir /home/usr/.node_modules_global
npm config set prefix=$HOME/.node_modules_global
npm install npm --global
sudo chown usr:usr -R /home/usr/.npm/_cacache

2-2.パスを通す
再起動しても大丈夫になようにパスを通す。
.bash_profile

export PATH="$HOME/.node_modules_global/bin:$PATH"

2-3.バージョン管理ツール “n” と Vue CLI
“n” ってバージョン管理ツールを入れておく、Node.jsのアップデートに便利らしい?

npm install -g @vue/cli
npm install -g n
n list
○ 11.10.0  #v13系は選ばない。トラブル多し

#3 Quoridorn-Server をインストール
ようやく、サーバ本体です。
ここでは、 /home/usr/quoridorn-server/ に設置した場合の説明になります。

3-1.ソースコードをダウンロード
quoridorn-server というフォルダにダウンロードされます。

git clone https://github.com/HillTopTRPG/quoridorn-server.git
cd /quoridorn-server

3-2.ライブラリのインストール、ビルド
Mac用ライブラリ(fsevents@1.2.11)の警告がいくつか出ますが、無視します。

npm install
npm run build

3-3.Quoridornサーバの設定を編集
/home/usr/quoridorn-server/conf/server.yaml をエディタで編集します。
ファイル内の説明をよく読んで、変更していきましょう。
下記の設定は、使用ポート3000、部屋数100、部屋は放置しても消えない。です。

port: 3000
storeType: mongodb
secretCollectionSuffix: nakachan-mo-kirai-ni-nattya-damedayo
roomNum: 100
roomAutoRemove: -1
mongodbConnectionStrings: mongodb://127.0.0.1:27017/

3-4.Quoridornサーバの動作チェック
とりあえず、起動してみます。
Quoridorn Server is Ready と表示されれば成功です。やったね!
Ctrl+C で一旦停止します。

npm run node-server

3-5.Quoridornサーバをバックグラウンドで動作させる
このままだと、ターミナルを閉じるとサーバーが落ちてしまい使い勝手が悪いです。
そこで、プロセスマネージャ “pm2” を使用し、バックグラウンドで自動起動させます。

npm install -g pm2

設定ファイルを作成します。
JSONかyaml形式に対応していますが、yamlが簡単なのでオススメ。
/home/usr/quoridorn-server/pm2_config.yml

name:      quoridorn-server        #アプリ名前
script:    ./dist/server.js        #スクリプトファイルパス
cwd:       /home/usr/quoridorn-server/  #作業フォルダ
exec_mode: fork               #cluster modeはパフォーマンス低下?
NODE_ENV:  production            #環境
PORT:      3000              #使用ポート

自動起動出来るように登録します。
環境によって違うので、記事そのままをコピペしても動かない場合があります。

#とりあえず動かしてみる
pm2 start '/home/usr/quoridorn-server/pm2_config.yml'

#以下のコマンドを実行すると、コピペして実行してねと言われる。
pm2 startup

#私の場合、以下をコピペして実行。環境によって違います。
sudo env PATH=$PATH:/usr/local/bin /home/usr/.node_modules_global/lib/node_modules/pm2/bin/pm2 startup systemd -u usr --hp /home/usr

#登録
pm2 save

実際に動作しているか確認します。

pm2 list
pm2 show quoridorn-server
pm2 monit

参考
[Node.js] PM2を用いて本番環境でNodeJSアプリを動かす
pm2でNode.js実行環境を整備する
node.jsを10->12に更新したときに起きたエラーと対処内容


Quoridorn Mark2 を設置


#4.Quoridorn-Mark2をインストール
サーバー側の準備が出来たので、やっとクライアント側であるMark2の設置です。
なお、Nginxは導入済み、動作済みのものとして書いていきます。

4-1.環境を確認
ポートが開放されていないと動作しないので、確認しましょう。
下記は、SSL、IPv6、Websocket(udp)対応の事例です。

nginx -v
nginx version: nginx/1.17.9

npm -v
6.14.4

node -v
v11.10.0

mongod -version
db version v4.2.5

openssl version
OpenSSL 1.1.0h

sudo ufw status
To                 Action    From
--                 ------    ---
80                 ALLOW     Anywhere
443                ALLOW     Anywhere                  
3000               ALLOW     Anywhere        #3000はQuoridorn用
443/udp            ALLOW     Anywhere                 
27017              ALLOW     Anywhere        #27017はMongoDB用
80 (v6)            ALLOW     Anywhere (v6)   #↓ここからIPv6用    
443 (v6)           ALLOW     Anywhere (v6)             
3000 (v6)          ALLOW     Anywhere (v6)             
443/udp (v6)       ALLOW     Anywhere (v6)             
27017 (v6)         ALLOW     Anywhere (v6)   

4-2.ソースコードをダウンロード
/home/usr/ にダウンロード。quoridorn-mark2 が自動で作られます。
フォルダ名を変えたい場合は、末尾に任意のフォルダ名を追記しましょう。

git clone https://github.com/HillTopTRPG/quoridorn-mark2.git

4-3.必要なライブラリをインストール
エラーが出たら、package-lock.json と node_modules を削除。再 install & build しましょう。

cd home/usr/quoridorn-mark2
npm init     #npmで管理するよと宣言
npm install  #必要なライブラリを取得

4-4.設置場所を指定
.env をエディタで編集して設置パスを指定します。
空欄にすると、 home/usr/quoridorn-mark2/dist/ が設置場所になります。
ここでは空欄を入れています。
/home/usr/quoridorn-mark2/.env

VUE_APP_BASE_URL=

4-5.ビルド

npm run build

4-6.環境設定を編集
ネットワーク周りの設定をしていきます。
skywayApikeyは、事前に取得したkeyを入力します。取得方法はこちらを参照のこと。
/home/usr/quoridorn-mark2/dist/static/conf/connect.yaml

quoridornServer: "http://127.0.0.1:3000"
socketTimeout: 50000
bcdiceServer: "https://bcdice.onlinesession.app"
skywayApiKey: "nakatyaN-kawaii-Idol-Korekaramo-4649Ne"
skywayConnectType: "Mesh"

#5.Nginx の設定
NginxからNode.jsへリバースプロキシする設定を加えます。
現状ではローカル環境でしか動作できていないので、参考程度にして下さい。
/etc/nginx/quoridorn-mk2.conf

upstream socket_io {
    ip_hash;
    server 127.0.0.1:3000;
}
server {
    listen       80;
    listen       [::]:80;
    server_name  kancolle.idol.world;
    return 301 $host$request_uri;
}
server {
    listen       443 ssl http2 ;
    listen       [::]:443 ssl http2;
    server_name  kancolle.idol.world;

    ssl_protocols          TLSv1.2 TLSv1.3;
....
    location / {
         root         /home/usr/quoridorn-mark2/dist/;
    }
    location /socket_io/ {
        proxy_pass http://socket_io;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade        $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP       $remote_addr;
        }
}

Nginxを再起動。ブラウザで確認します。

sudo nginx -t
sudo service nginx restart

関連リンク
公式 :Quoridorn-mark2
設置例:コリドーン 英国メイドサーバー(test)

Quoridorn Vue CLI 3 版の設置 (Ubuntu 16.04 / Nginx)

Quoridorn (コリドーン) を設置してみよう!
と思ったけど、公式サイトを見て…にゃーん? という初心者向け解説です。
とりあえず設置できた!程度なので、違うやろ…と思ったら一番イイ方法を教えてちょ。

環境を確認
Nginxはインストール/動作済みとして書いていきます。

nginx -v
nginx version: nginx/1.15.9

Node.jsをインストール
Node.jsとゆー物を使うらしいので、Node.jsとnpm(パッケージ管理)をインストール。

 sudo apt install -y nodejs npm

後で必要になる(たぶん)ので作っておく。

 mkdir /home/usr/.node_modules_global
 npm config set prefix=$HOME/.node_modules_global
 npm install npm --global

パスを通す
再起動しても大丈夫になようにパスを通す。
.profile .bash_profile .bashrc にそれぞれ、以下の一行を加えておく。
.profile だけで良いのかもしれない。
.bash_profile

export PATH="$HOME/.node_modules_global/bin:$PATH"

“n” ってバージョン管理ツールを入れておく、Node.jsのアップデートに便利らしい。

npm install -g n

Vue CLIをインストール

sudo npm install -g @vue/cli
sudo chown dona:dona -R /home/dona/.npm/_cacache
sudo chmod 775 -R /home/usr/quoridorn

Quoridornをダウンロード
公式サイトの”Clone or dowload“ボタンを押してDL、任意のフォルダへ展開。
今回は例として /home/usr で行います。

mv /home/usr/quoridorn-master /home/usr/quoridorn  #適当な名前にリネーム
cd /home/usr/quoridorn                 #プロジェクトのディレクトリへ移動
npm init                     #関連付け? 全部EnterでOK

環境設定を変更
ビルド前に相対パスなどの設定 index.js を変更します。
/home/usr/quoridorn/config/index.js

 // Various Dev Server settings
 -    host: 'localhost',
 +    host: '127.0.0.1',  #localhostだとIPv6関連でエラーが出る事もあるので一応変更

 // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
 - assetsPublicPath: '/quoridorn/dev/',
 + assetsPublicPath: './',        #デフォルトではリンク切れとなるので変更

Quoridornをインストール
必要な関連パッケージをインストールする。色々聞かれるけど、全部EnterでOK。
fsevents@1.2.4関連のエラーは無視して良い(バグ?らしい)。
パーミッション関連でエラーは、sudo かパーミッション変更で回避する。

sudo npm install

Quoridornをビルド
build後に出るbcdice-js関連のエラーも無視して良いそうです。
Build complete. と出れば完成。

sudo npm run build

ビルドされた内容を確認/移動
出来上がった物は /home/usr/quoridorn/dist に保存されている。
必要であれば移動する。

sudo cp -dfpvR /home/usr/quoridorn/dist /www/trpg/quoridorn

SKYWAY KEYを編集
事前に取得したkeyを入力する。取得方法はこちらを参照のこと。
/home/usr/quoridorn/dist/static/key.js

 - window.__SKYWAY_KEY__ = '*****_*****_*****_*****_*****'
 + window.__SKYWAY_KEY__ = 'nakatyaN-kawaii-Idol-Korekaramo-4649Ne'

Nginxの設定
*.confを設定。location と alias を設定する。
/etc/nginx/hoge.d/hoge.conf

server {
    listen       80;
    server_name  kancolle.idol.world;

#TRPG_Quoridorn
          location   /quoridorn {
          alias      /www/quoridorn;
          index      index.php index.html;
 
            location ~ \.(php|html)$ {
            ...
            }
          }
}

公開するディレクトリ以下のパーミッションを変更(タブン必要?)。

sudo chown nginx:nginx -R /www/quoridorn/

再起動、ブラウザで確認。

nginx -t
sudo systemctl restart nginx

公式 :Quoridorn リリース
設置例:コリドーン 英国メイドサーバー(test)

ZIP版Quoridorn 設置のコツ Nginx編

ZIP版Quoridornは/quoridorn/js/ 内に圧縮されたjsファイルが含まれています。
しかし、Nginxのデフォルト設定では、圧縮済みのファイルを通常のファイルとして扱えません。
そこで、下記の様な変更を加えます。

///nginx.confに挿入するならここらへんに
http {
    include       /etc/nginx/mime.types;
    default_type       application/octet-stream;
+      gzip_static always;
+      gunzip          on;
...
}
///jsやcssだけに適応するならこんな感じに
server {
    listen       443 ssl http2;
    server_name  dona.dip.jp;

+ location ~* \.(css|js)$ {
+     gzip_static always;
+     gunzip on;
+  }
}

公式 :Quoridorn リリース
参考 :nginxパフォーマンスチューニング〜静的コンテンツ配信編〜
設置例:コリドーン 英国メイドサーバー(test)