ユドナリウムを CLOUDFLARE の Workers & Pages に設置したメモ

概要

以前はFirebaseにユドナリウムを設置したが、1.17から新SkyWay用にバックエンドが必要になったため、CloudFlareに設置してみた。

設置したユドナリウム - https://yakumi.pages.dev/

準備

ユドナリウムの準備

ユドナリウムのソースコードをgithubからダウンロードしておく。

ユドナリウム - フロントエンド
ユドナリウム - バックエンド

SkyWayの準備

サインアップは完了しているものとする。

プロジェクトの作成

アプリケーションの作成

アプリケーションIDとシークレットキーの確認

後に、バックエンドの環境変数に登録するのでメモしておく。

環境変数	設定値	例
SKYWAY_APP_ID	アプリケーションID	00xx00x0-x0x0-00x0-x00x-xx0000x0x0xx
SKYWAY_SECRET	シークレットキー	ErXXXX00xxxXxx0XXXX/XXXXxXXXXXXXxXXXxxXXX0=

CloudFlareの準備

サインアップ

cloudflareのサインアップページにアクセス。

登録したメールアドレスに来たメールのリンクをクリック。

ブラウザが下記の画面になったら完了。

デプロイ

フロントエンドのデプロイ（デプロイされるドメインの確認）

フロントエンドのソースコードのルートディレクトリで下記のコマンドを実行。

npm i
npm run build && npx wrangler pages deploy dist/udonarium

Ok to prroceed? には y を入力。

$ npx wrangler pages deploy dist/udonarium
Need to install the following packages:
wrangler@3.78.7
Ok to proceed? (y) y

しばらくすると、ブラウザで承認を求められるので「Allow」をクリック

承認すると、プロジェクトの名前を入れろとか言われる。適当に好きな名前を入れる。

√ Enter the name of your new project: ... hoge
√ Enter the production branch name: ... hoge-cloudflare

改善に協力くださいは、yesでもnoでも好きなほうを。自分はyesにした。メトリクスを送ることになるので、若干通信が多めに発生するのかも。

√ Would you like to help improve Wrangler by sending usage metrics to Cloudflare? ... yes

これでデプロイされる。
ブラウザのCLOUDFLAREのダッシュボードからデプロイされていることを確認できる。
（表示されなければ、少しまってF5などでページ更新)

「訪問する」でユドナリウムがデプロイされたことを確認できる。
ただし、まだSkyWayの設定ができていないのでちゃんとは動かない。
バックエンドの環境変数に利用するので、フロントエンドのドメインをメモしておく。

この例では https://yakumi.pages.dev/

環境変数	設定値	例
ACCESS_CONTROL_ALLOW_ORIGIN	フロントエンドのドメイン	https://yakumi.pages.dev/

バックエンドのデプロイ

バックエンドのソースコードを開き、ファイルpackages/backend/cloudflare-workers/wrangler.tomlを編集して保存する。

packages/backend/cloudflare-workers/wrangler.toml

name = "udonarium-backend"
main = "src/index.ts"
compatibility_date = "2024-04-24"

[vars]
SKYWAY_APP_ID = "準備でメモしたアプリケーションID"
SKYWAY_SECRET = "準備でメモしたシークレットキー"
SKYWAY_UDONARIUM_LOBBY_SIZE = 4
ACCESS_CONTROL_ALLOW_ORIGIN = "フロントエンドのドメイン"

デプロイする

npm i
npm run cloudflare-workers:deploy

デプロイするとバックエンドのURLが表示される。
下記の例だとhttps://udonarium-backend.hibohiboo66-cloudflare.workers.devの部分。
フロントエンドのデプロイに使用するためメモしておく。

$ npm run cloudflare-workers:deploy

> udonarium-backend@1.0.0 cloudflare-workers:deploy
> npm run deploy -w @udonarium-backend/cloudflare-workers


> @udonarium-backend/cloudflare-workers@1.0.0 deploy
> wrangler deploy --minify src/index.ts


 ⛅️ wrangler 3.75.0 (update available 3.78.7)
-------------------------------------------------------

Total Upload: 22.25 KiB / gzip: 8.76 KiB
Your worker has access to the following bindings:
- Vars:
  - SKYWAY_APP_ID: "準備でメモしたアプリケーションID"
  - SKYWAY_SECRET: "準備でメモしたシークレットキー"
  - SKYWAY_UDONARIUM_LOBBY_SIZE: 4
  - ACCESS_CONTROL_ALLOW_ORIGIN: "フロントエンドのドメイン"
Uploaded udonarium-backend (2.81 sec)
Deployed udonarium-backend triggers (0.36 sec)
  https://udonarium-backend.hibohiboo66-cloudflare.workers.dev

フロントエンドのデプロイ

先ほどメモしたバックエンドのURLを設定ファイルsrc/assets/config.yamlに記載して保存する。

src/assets/config.yaml

backend:
  mode: skyway2023 #'skyway2023' or 'skyway'
-  url: https://{your-backend-hostname} #Your Backend API URL
+  url: https://udonarium-backend.hibohiboo66-cloudflare.workers.dev/
webrtc: #非推奨（旧SkyWay）
  key: aaaaaaaa-bbbb-ccccc-dddd-eeeeeeeeeeee #[deprecated] Your (old) SkyWay API key
app: #未使用
dice: #未使用

再度デプロイする。

npm run build && npx wrangler pages deploy dist/udonarium

動作確認

フロントエンドをデプロイしたページにアクセスし、ユドナリウムが利用できることを確認する。

ローカルで確認したい場合の記事は別途記載。