Udonarium Axe Backend

Vercelに置く（SkyWay版） ​

SkyWay版のAxeで遊ぶためのトークン発行サーバーを、Vercelに置く手順です。サーバーを持っていなくても、ブラウザの操作だけで進められます。かかる時間は、アカウント作りを含めて30分ほどです。

Vercelの東京のリージョン（hnd1）で動くので、国内からの応答が速くなります。部屋のサーバー（サーバー版）としてVercelに置くときは、Vercelに置く（サーバー版）を見てください。

Vercelの画面は英語です

Vercelの画面は英語だけで、日本語に切り替えられません。このページでは、ボタンやメニューの名前を、画面の表示のまま英語で書きます。ブラウザの翻訳を使うと名前が変わるので、見比べるときは翻訳を切ってください。

0. 用意するもの ​

途中で、次の値を入れたり控えたりします。パソコンの中にメモのファイルを1つ作り、そこに貼り付けながら進めると迷いません（→ 秘密の値の扱い）。

値手に入れるところ使う手順
AxeのOrigin設置の準備手順4
SkyWayのアプリケーションIDSkyWayのアプリを作る手順4
SkyWayのシークレットキーSkyWayのアプリを作る手順4
トークン発行サーバーのURL手順6手順7、8

1. Vercelのアカウントを作る ​

すでにVercelのアカウントがあれば、ログインして手順2に進みます。

  1. Vercelの登録ページを開きます。
  2. Continue with GitHubを押します。GoogleやメールアドレスでもVercelのアカウントは作れますが、GitHubで作ると、あとでGitHubとつなぐ手間が省けます。
  3. GitHubのログインの画面が出たら、ログインします。
  4. VercelにGitHubのアカウントを使わせてよいかを尋ねる画面が出たら、許可するボタンを押します。
  5. プランを尋ねられたら、個人で使う無料のプラン（Hobby）を選び、名前を入れて進みます。

Vercelのダッシュボードが開けば、アカウントができています。これで、VercelとGitHubがつながります。次からは、同じGitHubのアカウントでVercelにログインします。

無料のプラン（Hobby）は個人の非商用だけ

Hobbyは、個人が自分のために使うためのプランです。広告を載せる、お金を受け取って運営するなど、誰かの収入につながる使いかたはできません。団体での運用や商用のときは、Vercelのプランの説明を確かめてください。

2. Deployボタンを押す ​

下のボタンを押します。

Deploy with Vercel

Vercelの新しいプロジェクトを作る画面（New Project）が開きます。ログインしていないときは「Sign in to clone and deploy.」と出るので、Continue with GitHubを押してログインします。

このリポジトリapps/vercelプログラムの元。ここは書き換わらない
Deployボタン
あなたのGitHub複製されたリポジトリボタンが作る、あなたのもの。ここが変わると、デプロイし直される
自動でデプロイ
あなたのVercel
  • Functionトークンを作るプログラム。東京のリージョンで動く
  • 環境変数SkyWayのIDとキー、AxeのOrigin
できあがるサーバーのURLhttps://my-udonarium-backend-vercel.vercel.app
Deployボタンを押すと、この順に作られます

このボタンは、このリポジトリのapps/vercelだけを、あなたのGitHubに新しいリポジトリとして複製し、そこからVercelにデプロイします。このリポジトリそのものは変わりません。

3. 複製先のリポジトリを決める ​

New Projectの画面の、リポジトリを作るカードで、複製先を決めます。カードには「Create a Git repository to easily update your project after deploying it.」と書いてあります。

  1. Git Providersの中から、GitHubを押します。
  2. Git Scopeで、自分の個人のアカウントを選びます。無料のプランでは、GitHubの組織（Organization）の非公開リポジトリからはデプロイできません。
  3. 自分のアカウントが出てこないときは、Git Scopeの中のAdd GitHub Scopeを選びます。GitHubの画面が開くので、Vercelを入れる先に自分のアカウントを選び、Installを押します。
  4. Private Repository Nameの欄には、my-udonarium-backend-vercelが入っています。そのままで構いません。身内用と公開用など、2つ以上置くときは、名前を変えます。
  5. 名前の欄の中のスイッチで、非公開（private）にするか公開にするかを選べます。最初は非公開になっています。どちらでも動くので、そのままにします。
  6. Createを押します。

4. 環境変数を入れる ​

続いて、Add Environment Variablesのカードに、環境変数（サーバーに渡す設定）を入れる欄が3つ出ます。左のNameには名前が入っていて、変えられません。右のValueに値を入れます。

名前入れる値
SKYWAY_APP_IDSkyWayのアプリケーションID
SKYWAY_SECRETSkyWayのシークレットキー
ACCESS_CONTROL_ALLOW_ORIGINAxeのOrigin（例：https://axe.example.com）。2つ以上あるときはカンマで区切る
  • 値は、コピーして貼り付けます。前後に空白や改行が入らないように気をつけてください。
  • Originの末尾には/を付けません。パス（/udonarium/など）も付けません。
  • 空のままの欄には「Missing」と出ます。3つとも入れると、先に進めます。
  • 欄の下の説明のLearn Moreを押すと、このページが開きます。

ほかの設定（トークンの有効期間、ロビーの数）は、あとから足せます。ここでは入れなくて構いません（→ 設定項目）。

5. デプロイする ​

Deployを押します。ボタンが「Deploying」に変わり、その下で「Deployment queued…」「Deployment started…」と進みます。ビルドは、1〜2分ほどで終わります。

「Deployment completed.」と出たあと、デプロイできたことを知らせる画面に変わります。そこから、ダッシュボードへ進むボタンを押して、プロジェクトの画面に進みます。

ビルドが失敗したときは、画面に出るログの最後の数行を見てください。環境変数の誤りは、ビルドでは見つかりません。デプロイしたあとで、手順7の確かめかたでCONFIG_INVALIDとして出ます。

6. サーバーのURLを控える ​

プロジェクトの画面の最初のページ（Overview）に、本番のデプロイと、そのドメインが出ています。my-udonarium-backend-vercel.vercel.appのような名前です。同じ名前がすでに使われていると、後ろに文字が足されることがあるので、画面に出ているとおりに控えてください。

このドメインの前にhttps://を付けたものが、トークン発行サーバーのURLです。このあとの手順では、https://my-udonarium-backend-vercel.vercel.appとして書きます。

7. 動いているか確かめる ​

ブラウザで、次のURLを開きます。

text
https://my-udonarium-backend-vercel.vercel.app/

次のように出れば、サーバーは動いています。

json
{ "message": "Hello udonarium-backend-vercel!" }

続いて、環境変数が読めているかを確かめます。次のURLを開きます。

text
https://my-udonarium-backend-vercel.vercel.app/v1/status
出たもの意味
ORIGIN_REQUIREDを含む文字正しく動いています。ブラウザで直接開くとOriginが付かないので、サーバーが断っています。Axeから使うときは通ります
CONFIG_INVALIDを含む文字環境変数が足りないか、形が違います。設定を直すを見てください

ターミナルが使えるなら、Originを付けて確かめることもできます（→ 設置の準備）。OKと出れば成功です。

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

トークンが発行できるかは、Macのターミナルで次のように確かめられます。{"token":"eyJ..."}が返れば、Axeから使えます。

sh
curl -X POST https://my-udonarium-backend-vercel.vercel.app/v1/skyway/tokens \
  -H "Origin: https://axe.example.com" \
  -H "Content-Type: application/json" \
  -d '{"formatVersion":1,"channelName":"test-room","peerId":"test-peer"}'

8. Axeにつなぐ ​

Axeを配信している場所のassets/config.jsonを開き、backend.urlに手順6のURLを書きます。書きかたは設置の準備にあります。

json
{
  "backend": {
    "url": "https://my-udonarium-backend-vercel.vercel.app"
  }
}

書き換えたconfig.jsonを配信先に置き直したら、Axeを開き、部屋を作ります。ほかのブラウザ（または別の人）から同じ部屋に入れれば、完成です。config.jsonのほかの項目は、Axeの設定にあります。

設定を直す ​

環境変数は、あとから足したり直したりできます。

  1. Vercelのダッシュボードで、プロジェクトを開きます。
  2. 左のサイドバーのEnvironment Variablesを開きます。
  3. 直すときは、その変数の行の右の … からEditを選び、新しい値を入れてSaveを押します。
  4. 足すときは、変数を足すボタンを押します。「Add Environment Variable」の画面が出るので、Keyに名前、Valueに値を入れます。
  5. Typeで、値の種類を選びます。Secretは、保存したあと値を画面に出さない種類です。Configは、あとから値を見られる種類です。SKYWAY_SECRETのような秘密の値はSecretにします。
  6. Environmentsは最初のままにして、Saveを押します。

Secretにした値は、あとから見られません。直すときは、新しい値をもう一度入れます。

環境変数を変えても、いま動いているデプロイには反映されません。変えたあとは、デプロイし直します。

  1. 左のサイドバーのDeploymentsを開きます。
  2. いちばん上（最新）のデプロイの右の … から、Redeployを選びます。古いデプロイからはやり直せないので、いちばん上のものを選びます。
  3. 「Redeploy」の画面が出ます。Choose EnvironmentはProductionのままにし、Use existing Build Cache. のチェックは外したままにします。
  4. Redeployを押します。1〜2分で、新しいデプロイに替わります。

独自ドメインで公開する ​

*.vercel.appのURLのままでも使えます。自分のドメイン（例：backend.example.com）で公開したいときは、次のように足します。

  1. プロジェクトのSettingsのDomainsを開き、Add Domainを押します。
  2. 使うドメイン（例：backend.example.com）を入れて、足します。
  3. 画面に、DNSに足すレコードが出ます。backend.example.comのようなサブドメインならCNAMEのレコード、example.comそのものならAのレコードです。
  4. ドメインの管理元（お名前.comなど）のDNSの設定で、画面に出たとおりのレコードを足します。値はプロジェクトごとに違うので、画面に出たものを使います。
  5. Vercelの画面で、ドメインの横の表示が設定済みに変われば、使えます。DNSが行きわたるまで、数分から数時間かかることがあります。

足し終えたら、Axeのbackend.urlも新しいURLに書き換えます。

更新するとき ​

Deployボタンで作ったリポジトリは、このリポジトリとは別のものです。このリポジトリが新しくなっても、あなたのサーバーは自動では変わりません。新しい版を取り込むには、次のどちらかをします。

  • このリポジトリのapps/vercelの変更を、自分のリポジトリに取り込む。自分のリポジトリに変更が入ると、Vercelが自動でデプロイし直します。
  • もう一度Deployボタンで新しいプロジェクトを作り、環境変数を入れ直して、Axeのbackend.urlを新しいURLに差し替える。

うまくいかないとき ​

SkyWay版で困ったときを見てください。

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

Udonarium Axe Backend