config.jsonを書く

このページは、Axe本体のassets/config.jsonに何を書くかと、Axeとサーバーがつながったかの確かめかたを説明します。 Axeは起動するたびにこのファイルを読み、どの方式で、どのサーバーにつなぐかを決めます。 Axeを置くの手順2で書き換えたあと、くわしい意味を知りたいときや、つながらないときに読んでください。

1. 1
   方式を選ぶSkyWay版かサーバー版かを決めるあとから変えられる
2. 2
   サーバーを置くトークン発行サーバーか部屋のサーバーを置く30分〜1時間
3. 3
   Axeを置くリリースのzipを静的ホスティングに置くビルド不要
4. 4
   つないで確かめる（このページ）config.jsonにサーバーのURLを書き、部屋を作る2行だけ

ファイルの場所

Axeを置いた場所（index.htmlのあるフォルダ）の中の、assets/config.jsonです。

（Axeを置いた場所）
 ├─ index.html
 └─ assets/
     └─ config.json   ← これ

リリースのzipには、最初からassets/config.jsonが入っています。中身はSkyWay版のひな形で、backend.urlには書き換えを促す文が入っています。そのままでは、どのサーバーにもつながりません。

項目

項目	書かないとき	内容
transport	"skyway"	方式。"server"でサーバー版、"skyway"でSkyWay版。知らない値はSkyWay版として読みます
backend.url	空	サーバーのURL。SkyWay版ではトークン発行サーバー、サーバー版では部屋のサーバーのURLを書きます

transport

1つの配信先で使える方式は、どちらか片方です。部屋ごとには選べません。両方を使いたいときは、Axe本体を2か所に置き、それぞれのconfig.jsonで方式を変えます。

書き換えて置き直すと、次にAxeを開いた人から新しい方式になります。すでに開いている人は、ページを読み込み直すまで前の方式のままです。

backend.url

• サーバーのURLを、https://から書きます
• 末尾の/は、あってもなくても構いません
• レンタルサーバーのサブフォルダにトークン発行サーバーを置いたときは、そのパスまで書きます（例：https://example.com/backend）
• サーバー版では、部屋の一覧と作成、ログイン、画像と音声のやりとりを、すべてこのURLに送ります

SkyWay版の例

{
  "transport": "skyway",
  "backend": {
    "url": "https://backend.example.com"
  }
}

transportの行は、消しても同じ意味です。

サーバー版の例

{
  "transport": "server",
  "backend": {
    "url": "https://rooms.example.com"
  }
}

部屋のサーバーのACCESS_CONTROL_ALLOW_ORIGINには、AxeのOriginを名前で書いておきます（*では、ログインのあとAxeに戻れません）。 Axeのbackend.urlとサーバーのACCESS_CONTROL_ALLOW_ORIGINは、互いを指し合う組み合わせです。どちらか片方が違っていても、つながりません。

確かめる

1. 書き換えたconfig.jsonを置き直します（Cloudflare Pagesでは、フォルダごと上げ直します）。
2. AxeのURLをChromeで開きます。開いたままのタブは、読み込み直します。
3. ロビー（部屋の一覧）の表示と、チャットのシステムタブを見ます。

見えるもの	意味
部屋を作れて、別のブラウザからも入れる	つながっています
ロビーに「まだサーバーにつながっていません。しばらく待ってから「一覧を更新」を押してください。」	つなぎに行っている途中です。数秒待って一覧を更新を押します
チャットに「SkyWayのバックエンドサーバに接続できません。…」（開いてから30秒ほどで出ます）	SkyWay版で、トークン発行サーバーから許可証をもらえません。backend.urlかACCESS_CONTROL_ALLOW_ORIGINが違います
チャットに「ネットワークエラーが発生しました。(TypeError)」と「再接続はこれで最後です。…」がすぐ続けて出る	SkyWay版で、backend.urlがひな形の文のままか、URLとして読めません
ロビーに「ルーム一覧の取得に失敗しました。「一覧を更新」で再検索できます。」	サーバー版で、backend.urlの部屋のサーバーに届きません。URLが違うか、サーバーが動いていません
ロビーに「接続先（config.json の backend.url）が設定されていません」	サーバー版で、backend.urlが空か、URLとして読めません
ロビーに「このサーバーにはログインが用意されていないため、部屋を使えません」	部屋のサーバーに、ログインの設定が入っていません
サーバー版なのに、ロビーの上にDiscordでログインが出ない	transportが"server"になっていません

ほかの表示と直しかたは、設置で困ったときにあります。

GitHub Actionsで配るとき

Axeのリポジトリをフォークし、付属のワークフロー（.github/workflows/deploy.yml）でAmazon S3とCloudFrontに配るときは、config.jsonを手で書く代わりに、GitHubのEnvironmentに値を入れます。ワークフローが、ビルドのあとにconfig.jsonを作ります。

入れる場所	名前	内容	必須
Secret	BACKEND_URL	backend.urlに入る値	○
Variable（Secretではない方）	TRANSPORT	transportに入る値。書かなければskyway
Secret	AWS_REGION	S3のバケットのリージョン	○
Secret	AWS_S3_BUCKET	Axeを置くS3のバケット	○
Secret	AWS_DEPLOY_ROLE_ARN	GitHub ActionsがAWSに入るためのIAMロール（OIDCで引き受ける）	○
Secret	CLOUDFRONT_DISTRIBUTION_ID	配り終えたあとに古いキャッシュを消すCloudFrontの配信	○

TRANSPORTにskywayとserverのほかの値を書くと、ワークフローが止まります。

オフライン

接続パネル。オフラインに切り替えると、ページを読み込み直してこのブラウザだけで動きます

接続パネルの接続をオフラインにすると、Axeはネットワークを使わずに、そのブラウザだけで動きます。このときconfig.jsonは読まず、どのサーバーにもつなぎません。部屋の保存と読み込みはできるので、設置の前にAxeの動きを試すのにも使えます。オンラインに戻すと、ページを読み込み直してconfig.jsonを読みます。

次に読むもの

• 設置で困ったとき — つながらないときの表示と直しかた
• 更新するとき — 新しい版に置き換えるときにconfig.jsonを残す