Udonarium Axe Backend

設置の準備 ​

このページには、どの版を設置するときにも使う準備と操作をまとめています。サーバーを置くのが初めてなら、設置の手順に入る前に一度読んでおくと、途中で手が止まりません。各版の手順のページからも、必要なところをこのページに案内しています。

何を設置するかを決める ​

どの方式で配信するかによって、設置するものと、要るアカウントが変わります。迷ったら、いちばん上のVercel版から始めてください。

やりたいこと設置するもの手順要るアカウント
SkyWay版で配信する（いちばん手軽）Vercel版（トークン発行）Vercelに置く（SkyWay版）GitHub、Vercel、SkyWay
SkyWay版で配信する（借りているレンタルサーバー）PHP版レンタルサーバーに置く（PHP版）レンタルサーバー、SkyWay
サーバー版で配信するCloudflare版Cloudflareに置くGitHub、Cloudflare（支払い方法の登録が要る）、Discord
サーバー版をVercelで動かすVercel版（部屋のサーバー）Vercelに置く（サーバー版）GitHub、Vercel、Discord

SkyWay版とサーバー版の違いははじめにに、選びかたはどれを置くかにあります。

AxeのOriginを確かめる ​

どの版でも、ACCESS_CONTROL_ALLOW_ORIGINという設定に、Axeを配信しているページのOriginを書きます。サーバーは、ここに書いたOriginのページから来たリクエストだけを受けます。ほかのサイトに置かれたAxeから、あなたのサーバーが使われないようにするためです。

Originは、Axeを開いたときにブラウザのアドレスバーに出るURLのうち、https://からホスト名（とポート）までの部分です。パスと、末尾の/は含めません。

アドレスバーのURLのうち、色の付いた部分だけを書きます。末尾の/も書きません
Axeを開いたときのURLOrigin（書く値）
https://axe.example.com/https://axe.example.com
https://example.com/udonarium/https://example.com
https://yourname.github.io/udonarium_axe/https://yourname.github.io
http://localhost:4200/http://localhost:4200

Axeを2つ以上の場所で配信しているときは、カンマで区切って並べます（例：https://axe.example.com,https://www.axe.example.com）。https://とhttp://、wwwの有無、ポートの番号が違うと、別のOriginとして扱われます。

Axeをまだ置いていないときは、先にAxeの利用ガイドで置き場所を決めてください。Originは、あとから設定を変えて書き直せます。

GitHubのアカウントを作る ​

Vercel版とCloudflare版は、Deployボタンを押すと、このリポジトリの中身があなたのGitHubに複製され、そこからデプロイされます。そのため、GitHubのアカウントが要ります。PHP版だけを使うなら要りません。

  1. GitHubを開き、右上のSign upを押します。
  2. メールアドレス、パスワード、ユーザー名、住んでいる国を入れ、画面の案内に従って進めます。GitHubの画面は英語です。
  3. 人間かどうかを確かめるパズルが出たら、案内に従って答えます。広告を止める拡張機能を入れていると、パズルが出ないことがあります。そのときは、拡張機能を一時的に止めます。
  4. メールに届いた確認のコード（8けたの数字）を入れると、アカウントができます。

ユーザー名は、複製したリポジトリのURL（https://github.com/<ユーザー名>/...）に出ます。

秘密の値の扱い ​

設置の途中で、次のような秘密の値を扱います。

  • SkyWayのシークレットキー
  • DiscordのアプリのClient Secret
  • SESSION_SECRET（自分で作る乱数）

これらを知られると、あなたのアプリやサーバーになりすまして、トークンを作られるおそれがあります。チャットやSNS、Issue、スクリーンショットには載せないでください。控えておくときは、パスワード管理アプリか、自分のパソコンの中のファイルにします。漏れたかもしれないときは、それぞれの画面で作り直し、サーバーの設定を入れ替えます。

乱数を作る（SESSION_SECRET） ​

サーバー版（Cloudflare版と、Vercel版の部屋のサーバー）では、SESSION_SECRETに32文字以上の乱数を入れます。ログインのトークンに署名するための鍵です。自分で考えた文字列ではなく、パソコンに作らせてください。

Windows ​

  1. スタートボタンを押し、PowerShellと打って、出てきたWindows PowerShellを開きます。

  2. 次の1行を貼り付けて、Enterキーを押します。

    powershell
    $b = New-Object byte[] 48; [Security.Cryptography.RandomNumberGenerator]::Create().GetBytes($b); [Convert]::ToBase64String($b)

  3. 64文字の英数字と記号（+、/）が1行出ます。それを選んでコピーします。

Mac ​

  1. Spotlight（command＋スペース）でターミナルと打ち、ターミナルを開きます。

  2. 次の1行を貼り付けて、returnキーを押します。

    sh
    openssl rand -base64 48

  3. 64文字の英数字と記号が1行出ます。それを選んでコピーします。

出てきた文字列は、毎回違います。デプロイするサーバーごとに、新しく作ってください。

動いているかをブラウザで確かめる ​

設置したサーバーが動いているかは、ブラウザでURLを開いて確かめられます。手順のページに書いてあるURL（例：https://my-backend.vercel.app/）を、アドレスバーに入れて開きます。

動いていれば、{"message":"..."}のような短い文字が出ます。これはJSONという形のデータで、ブラウザによっては、色付きで整えて表示されます。出てくる文字は、手順のページに書いてあるものと見比べてください。

ターミナルから確かめる（使える人だけ） ​

手順のページには、curlというコマンドでの確かめかたも書いてあります。ブラウザで確かめられれば、使わなくても構いません。

curlは、WindowsのPowerShellにもMacのターミナルにも最初から入っています。WindowsのPowerShellでは、curlではなくcurl.exeと打ってください。Windowsに入っているPowerShellでは、curlが別のコマンドの別名になっていて、書いたとおりに動きません。

powershell
curl.exe -H "Origin: https://axe.example.com" https://my-backend.vercel.app/v1/status

手順のページで、行の終わりに\を付けて複数の行に分けているコマンドは、Macのターミナル向けの書きかたです。Windowsでは、\を消して1行につなげてから実行します。

開発者ツールを開く ​

Axeがサーバーにつながらないときは、ブラウザの開発者ツールで、何が起きているかを見られます。

ブラウザWindowsMac
Google Chrome、Microsoft EdgeF12、またはCtrl＋Shift＋Icommand＋option＋I
FirefoxF12、またはCtrl＋Shift＋Icommand＋option＋I

開いたら、次のタブを見ます。

  • コンソール（Console）：エラーのメッセージが赤い字で出ます。
  • ネットワーク（Network）：Axeがサーバーに送ったリクエストと、返ってきた答えが並びます。行を選ぶと、状態（200、403など）と中身が見られます。

ネットワークのタブは、開いたあとに起きた通信だけを記録します。開いてから、ページを読み込み直すか、うまくいかない操作をもう一度してください。

テキストファイルを書く ​

PHP版の.envや、Axeのassets/config.jsonは、テキストエディターで書きます。WordやGoogleドキュメントのような文書の作成ソフトは、見えない書式を混ぜるので使えません。Visual Studio Codeのようなプログラム向けのエディターがあれば、それがいちばん確実です。パソコンに最初から入っているものでも、次のようにすれば書けます。

Windows ​

メモ帳で書けます。

  • 開くときは、ファイルを右クリックしてプログラムから開く→メモ帳を選びます。
  • 新しく名前を付けて保存するときは、ファイルの種類をすべてのファイルにし、エンコードをUTF-8にします。種類がテキスト ドキュメントのままだと、名前の後ろに.txtが付いてしまいます。
  • エクスプローラーで名前の後ろの.txtが見えないときは、拡張子を表示させます。Windows 11では表示メニューの表示からファイル名拡張子を選び、Windows 10では表示タブのファイル名拡張子にチェックを入れます。

Mac ​

テキストエディットで書けます。

  • 新しく書くときは、メニューのフォーマットから標準テキストにするを選んでから書きます。
  • メニューの編集→自動置換で、スマート引用符のチェックを外します。入れたままだと、打った"が“や”に置き換わり、サーバーが設定を読めなくなります。
  • 保存の画面に、拡張子に.txtを使うかどうかのチェックがあれば、外します。
  • Finderでは、名前が.で始まるファイル（.env、.htaccess）が見えません。command＋shift＋.（ピリオド）を押すと、見えるようになります。もう一度押すと、元に戻ります。

次に読むもの ​

MITライセンスで公開しています

Udonarium Axe Backend