Cloudflare について
Cloudflare リソース作成
概要
CastMatrix が利用する Cloudflare サービスと、作成するリソースの一覧です。
作成するリソース
| サービス | 用途 |
|---|---|
| Cloudflare Pages | Astro フロント + React 管理 SPA（同一プロジェクト、/cmm/*） |
| Cloudflare Workers | Hono API（/api/public/*, /api/cmm/*） |
| Cloudflare D1 | リレーショナル DB（キャスト・スケジュール等） |
| Cloudflare R2 | 画像・動画のオブジェクトストレージ |
| Cloudflare Images | 任意 — WebP 変換・リサイズ（Toggle ON 時） |
| Cloudflare Stream | 任意 — 動画エンコード・HLS 配信（Toggle ON 時） |
手順（概略）
- Pages で
*.pages.devにデプロイしフロント開発・検証を行う（Service Binding で/api/*を接続）。 - 準備ができたらカスタムドメインを Pages に追加する（Service Binding・ライセンスは同一 D1 のまま引き継ぎ）。
- D1 データベースを作成し、Workers バインディング用の ID を控える。
- R2 バケットを作成し、CORS・公開アクセス方針を設定する。
- Workers プロジェクトを作成し、D1 / R2 バインディングを
wrangler.tomlに記載する。 - Pages プロジェクトを作成し、ビルドコマンド・出力ディレクトリを設定する。
詳細: 09-custom-domain.md / 06-deploy-wrangler.md（購入後 ZIP 同梱）
注意事項
- Images / Stream は有料です。不要な場合は Feature Toggle を OFF にしてください。
- API と Pages は同一アカウント内で連携させます。
wrangler.toml 設定例（api/wrangler.toml）
name = "castmatrix-api"
main = "src/index.ts"
compatibility_date = "2024-11-12"
compatibility_flags = ["nodejs_compat"]
[[d1_databases]]
binding = "DB"
database_name = "castmatrix-db"
database_id = "YOUR_D1_DATABASE_ID" # ← Dashboard で確認
migrations_dir = "../migrations"
[[r2_buckets]]
binding = "R2_BUCKET"
bucket_name = "castmatrix-media"
[vars]
ENABLE_CLOUDFLARE_IMAGES = "false"
ENABLE_CLOUDFLARE_STREAM = "false"
R2_PUBLIC_DOMAIN = "https://pub-XXXX.r2.dev"
CF_IMAGES_DOMAIN = "https://imagedelivery.net/YOUR_ACCOUNT_HASH"
CF_ACCOUNT_ID = "YOUR_CLOUDFLARE_ACCOUNT_ID"
D1 の database_id は wrangler d1 create castmatrix-db 実行後、または Dashboard の Workers & Pages → D1 で確認できます。
Cloudflare Pages ビルド設定
| 項目 | 値 |
|---|---|
| ビルドコマンド | pnpm run build:frontend |
| 出力ディレクトリ | frontend/dist |
| ルートディレクトリ | （空白 = リポジトリルート） |
リポジトリルートの pnpm-lock.yaml があると、Pages は pnpm を自動選択します（Node.js 20 以上推奨）。
ビルド前に依存を入れる必要がある場合は corepack enable && pnpm install --frozen-lockfile && pnpm run build:frontend としても構いません。