---
title: Cloudflare にワンクリックでデプロイする
description: Deploy to Cloudflare ボタンで、箱庭諸島２を自分の Cloudflare アカウントに設置します。いちばん簡単な方法です。
sidebar:
  label: Cloudflare (ワンクリック)
  badge: おすすめ
---

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/hakoniwajs/template-cloudflare)

いちばん手軽な方法です。ボタンを押すと、テンプレートリポジトリ [hakoniwajs/template-cloudflare](https://github.com/hakoniwajs/template-cloudflare) が自分の GitHub アカウントにコピーされ、Cloudflare Workers にデプロイされます。コマンドラインの操作は必要ありません。

## 必要なもの

- [Cloudflare のアカウント](https://dash.cloudflare.com/sign-up) (無料プランで構いません)
- GitHub のアカウント (テンプレートリポジトリのコピー先)

デプロイされるものは次のとおりです。すべて Cloudflare 側で自動的に作られます。

| リソース | 用途 |
| --- | --- |
| Worker | ゲーム本体 (画面・API・OGP 画像) |
| Durable Object (SQLite) | ゲームのデータ (島・ログ・ユーザー・設定) |
| Cron Trigger (15 分ごと) | ターンの進行 |
| Static Assets | 地形の画像や CSS |

## 手順

1. **Deploy to Cloudflare ボタンを押す**

    上のボタンを押すと Cloudflare のダッシュボードに移動します。GitHub と連携し、テンプレートリポジトリをコピーする先 (自分のアカウントやリポジトリ名) を選びます。

2. **デプロイを実行する**

    **入力が必要な項目はありません。** そのままデプロイを実行してください。デプロイが完了すると、`https://<名前>.<サブドメイン>.workers.dev` 形式の公開 URL が表示されます。

    ログインのセッションなどに使う秘密鍵は、初回の起動時に自動で生成されて保存されます。

3. **ログインする**

    公開 URL の `/login` を開き、「メールでログイン」に自分のメールアドレスを入力します。

    メール送信サービス ([Resend](https://resend.com/)) をまだ設定していないので、メールは送信されず、**ログイン用のリンクが Worker のログに出力されます**。Cloudflare ダッシュボードで当該 Worker の「Logs」(リアルタイムログ) を開くか、`npx wrangler tail` を実行してリンクを確認し、ブラウザで開いてください。

4. **最初の管理者になる**

    ログインしたまま `/admin` を開くと、管理者がまだいないので `/admin/setup` (初期セットアップ) に移動します。このとき **セットアップコードが Worker のログに出力されます**。ログに表示された `XXXX-XXXX-XXXX-XXXX-XXXX` 形式のコードを入力すると、ログイン中のアカウントが管理者になります。

    Worker のログを見られるのは Cloudflare アカウントの持ち主だけなので、公開 URL を知っている他人が先に管理者になってしまうことはありません。初期セットアップは管理者が 1 人もいないときだけ使えます。

5. **ゲームを開始する**

    `/admin` を開き、「新しいゲームを開始」でゲームを始めます。ゲーム名・開始日時・最終ターン・1 ターンの長さを指定できます (すべて省略可能)。サイトのタイトルなどは、同じ画面の「サイト設定」で変更できます。

これでプレイヤーが島を発見できる状態になりました。公開 URL を仲間に共有しましょう。

## プレイヤー向けのログイン方法を用意する

プレイヤーにログインしてもらうには、次のいずれかを設定します。

- **Discord / X (Twitter) ログイン**: 仲間内で遊ぶならいちばん手軽です。各サービスの開発者ポータルでアプリを作り、クライアント ID と secret を Worker に登録します
- **メールログイン**: [Resend](https://resend.com/) の API キーを登録すると、実際にログイン用のメールが送られるようになります

手順は [ログイン方法の設定](/hakoniwa/setup/login-methods) を参照してください。

ほかの人も管理者にしたい場合は、管理画面の「管理者」からメールアドレスを追加できます。

## 設定を変更する

サイトのタイトルやフッタの表示、タイムゾーン、NG ワードなどは、管理画面の「[サイト設定](/hakoniwa/operation/admin#サイト設定)」から変更できます。環境変数を編集して再デプロイする必要はありません。

Worker の設定 (環境変数と secret) は、Cloudflare ダッシュボードの当該 Worker の「Settings → Variables and Secrets」から変更できます。X / Discord ログインの secret などはここで登録します。設定できる項目は [環境変数一覧](/hakoniwa/setup/environment-variables) を参照してください。

コピーされたテンプレートリポジトリの `wrangler.jsonc` を編集して push すれば、Workers Builds により自動で再デプロイされます。

:::note
カスタムドメインを使う場合だけ、`HAKONIWA_BASE_URL` にそのドメインの URL を設定してください。`workers.dev` の URL のまま使う場合は設定不要です (リクエストから自動で判定されます)。
:::

## アップデート

新しいバージョンの `@hakoniwajs/cloudflare` が公開されたら、コピーしたリポジトリの `package.json` の依存バージョンを上げて push してください。Workers Builds が再デプロイします。データベースのスキーマは起動時に自動でマイグレーションされます。

## 表示の速さ (キャッシュ)

トップページ・観光ページ・ゲーム一覧・開発画面は、Cloudflare の [Workers Cache](https://developers.cloudflare.com/workers/cache/) に自動でキャッシュされます (ログイン中のページはセッションごとに分けてキャッシュします)。`wrangler.jsonc` の追加設定は不要です。Workers Cache を使うには、`src/worker.ts` で `CachedPages` を再エクスポートします (`export { CachedPages, HakoniwaGame } from "@hakoniwajs/cloudflare";`)。仕組みは [キャッシュの仕組み](/hakoniwa/development/cache) を参照してください。Workers Cache (`cache.enabled: true`) を有効にすると静的アセットへのリクエストも Workers のリクエストとして課金対象になります。