Docs Specs
GitHub

Cloudflare設定

Cloudflare Workers、D1データベース、R2ストレージの詳細なセットアップ方法です。

Cloudflareアカウントの作成

  1. Cloudflareにアクセス
  2. メールアドレスとパスワードを入力してアカウント作成
  3. メール認証を完了

Wrangler CLIのインストール

Wranglerは、Cloudflare Workers/D1/R2を管理するためのCLIツールです。

# グローバルインストール（推奨）
npm install -g wrangler

# またはプロジェクト内で使用
npx wrangler

ログイン

wrangler login

ブラウザが開くので、Cloudflareアカウントで認証します。

D1データベースの作成

D1はCloudflareのサーバーレスSQLiteデータベースです。

データベース作成

wrangler d1 create yurucommu-db

出力例：

✅ Successfully created DB 'yurucommu-db'

[[d1_databases]]
binding = "DB"
database_name = "yurucommu-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

wrangler.tomlへの設定

表示された設定を wrangler.toml にコピーします：

[[d1_databases]]
binding = "DB"
database_name = "yurucommu-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
migrations_dir = "migrations"

マイグレーション実行

# ローカルDBでテスト
wrangler d1 migrations apply yurucommu-db --local

# 本番DBに適用
wrangler d1 migrations apply yurucommu-db --remote

R2バケットの作成

R2はCloudflareのオブジェクトストレージ（S3互換）です。画像や動画の保存に使用します。

バケット作成

wrangler r2 bucket create yurucommu-media

wrangler.tomlへの設定

[[r2_buckets]]
binding = "MEDIA"
bucket_name = "yurucommu-media"

最終的なwrangler.toml

name = "yurucommu"
main = "src/backend/index.ts"
compatibility_date = "2024-01-01"

[vars]
APP_URL = "https://your-domain.com"
AUTH_MODE = "password"

[[d1_databases]]
binding = "DB"
database_name = "yurucommu-db"
database_id = "your-database-id"
migrations_dir = "migrations"

[[r2_buckets]]
binding = "MEDIA"
bucket_name = "yurucommu-media"

[site]
bucket = "./dist"

トラブルシューティング

「認証エラー」が出る場合

wrangler logout
wrangler login

D1のクエリを確認したい場合

wrangler d1 execute yurucommu-db --remote --command "SELECT * FROM actors LIMIT 5"

R2の内容を確認したい場合

Cloudflareダッシュボード > R2 > yurucommu-media で確認できます。