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)

Quoridorn の設置方法 (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 だけで良いのかもしれない。

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

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      /home/usr/quoridorn/dist;
          index      index.php index.html;
 
            location ~ \.(php|html)$ {
            ...
            }
          }
}

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

sudo chown nginx:nginx -R /home/usr/quoridorn/dist

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

nginx -t
sudo systemctl restart nginx

導入例
Quoridorn 英国メイドサーバー