Cloudflare にワンクリックでデプロイする
Deploy to Cloudflare ボタンで、箱庭諸島２を自分の Cloudflare アカウントに設置します。いちばん簡単な方法です。
いちばん手軽な方法です。ボタンを押すと、テンプレートリポジトリ hakoniwajs/template-cloudflare が自分の GitHub アカウントにコピーされ、Cloudflare Workers にデプロイされます。コマンドラインの操作は必要ありません。
必要なもの
- Cloudflare のアカウント (無料プランで構いません)
- GitHub のアカウント (テンプレートリポジトリのコピー先)
デプロイされるものは次のとおりです。すべて Cloudflare 側で自動的に作られます。
| リソース | 用途 |
|---|---|
| Worker | ゲーム本体 (画面・API・OGP 画像) |
| Durable Object (SQLite) | ゲームのデータ (島・ログ・ユーザー・設定) |
| Cron Trigger (15 分ごと) | ターンの進行 |
| Static Assets | 地形の画像や CSS |
手順
Deploy to Cloudflare ボタンを押す
上のボタンを押すと Cloudflare のダッシュボードに移動します。GitHub と連携し、テンプレートリポジトリをコピーする先 (自分のアカウントやリポジトリ名) を選びます。
デプロイを実行する
入力が必要な項目はありません。 そのままデプロイを実行してください。デプロイが完了すると、https://<名前>.<サブドメイン>.workers.dev 形式の公開 URL が表示されます。
ログインのセッションなどに使う秘密鍵は、初回の起動時に自動で生成されて保存されます。
ログインする
公開 URL の /login を開き、「メールでログイン」に自分のメールアドレスを入力します。
メール送信サービス (Resend) をまだ設定していないので、メールは送信されず、ログイン用のリンクが Worker のログに出力されます。Cloudflare ダッシュボードで当該 Worker の「Logs」(リアルタイムログ) を開くか、npx wrangler tail を実行してリンクを確認し、ブラウザで開いてください。
最初の管理者になる
ログインしたまま /admin を開くと、管理者がまだいないので /admin/setup (初期セットアップ) に移動します。このとき セットアップコードが Worker のログに出力されます。ログに表示された XXXX-XXXX-XXXX-XXXX-XXXX 形式のコードを入力すると、ログイン中のアカウントが管理者になります。
Worker のログを見られるのは Cloudflare アカウントの持ち主だけなので、公開 URL を知っている他人が先に管理者になってしまうことはありません。初期セットアップは管理者が 1 人もいないときだけ使えます。
ゲームを開始する
/admin を開き、「新しいゲームを開始」でゲームを始めます。ゲーム名・開始日時・最終ターン・1 ターンの長さを指定できます (すべて省略可能)。サイトのタイトルなどは、同じ画面の「サイト設定」で変更できます。
これでプレイヤーが島を発見できる状態になりました。公開 URL を仲間に共有しましょう。
プレイヤー向けのログイン方法を用意する
プレイヤーにログインしてもらうには、次のいずれかを設定します。
- Discord / X (Twitter) ログイン: 仲間内で遊ぶならいちばん手軽です。各サービスの開発者ポータルでアプリを作り、クライアント ID と secret を Worker に登録します
- メールログイン: Resend の API キーを登録すると、実際にログイン用のメールが送られるようになります
手順は ログイン方法の設定 を参照してください。
ほかの人も管理者にしたい場合は、管理画面の「管理者」からメールアドレスを追加できます。
設定を変更する
サイトのタイトルやフッタの表示、タイムゾーン、NG ワードなどは、管理画面の「サイト設定」から変更できます。環境変数を編集して再デプロイする必要はありません。
Worker の設定 (環境変数と secret) は、Cloudflare ダッシュボードの当該 Worker の「Settings → Variables and Secrets」から変更できます。X / Discord ログインの secret などはここで登録します。設定できる項目は 環境変数一覧 を参照してください。
コピーされたテンプレートリポジトリの wrangler.jsonc を編集して push すれば、Workers Builds により自動で再デプロイされます。
アップデート
新しいバージョンの @hakoniwajs/cloudflare が公開されたら、コピーしたリポジトリの package.json の依存バージョンを上げて push してください。Workers Builds が再デプロイします。データベースのスキーマは起動時に自動でマイグレーションされます。
表示の速さ (キャッシュ)
トップページ・観光ページ・ゲーム一覧・開発画面は、Cloudflare の Workers Cache に自動でキャッシュされます (ログイン中のページはセッションごとに分けてキャッシュします)。wrangler.jsonc の追加設定は不要です。Workers Cache を使うには、src/worker.ts で CachedPages を再エクスポートします (export { CachedPages, HakoniwaGame } from "@hakoniwajs/cloudflare";)。仕組みは キャッシュの仕組み を参照してください。Workers Cache (cache.enabled: true) を有効にすると静的アセットへのリクエストも Workers のリクエストとして課金対象になります。