cloudflare-deployment

Cloudflare デプロイスキル

有効にするタイミング

次の場合にこのスキルを有効にします。

• Cloudflare Workers または Pages をセットアップする
• KV、R2、または D1 ストレージを使用する
• アプリケーションを Cloudflare にデプロイする
• wrangler.toml を設定する
• Cloudflare リソースを管理する

クイックコマンド

# Install wrangler
pnpm add -g wrangler

# Login
wrangler login

# Initialize new Worker
wrangler init my-worker

# Local development
wrangler dev

# Deploy to Cloudflare
wrangler deploy

# View logs
wrangler tail my-worker

サービスの概要

サービス	用途	ユースケース
Workers	サーバーレス関数	API エンドポイント、ミドルウェア
Pages	静的サイト＋関数	SvelteKit、Next.js
KV	キー・バリューストレージ	キャッシュ、セッションデータ
R2	オブジェクトストレージ	ファイル、画像、バックアップ
D1	SQLite データベース	構造化データ

Workers のセットアップ

wrangler init my-worker --type javascript
cd my-worker
wrangler dev
wrangler deploy

基本的な Worker

export default {
	async fetch(request, env) {
		const url = new URL(request.url);

		if (url.pathname === "/api/hello") {
			return new Response(JSON.stringify({ message: "Hello!" }), {
				headers: { "Content-Type": "application/json" },
			});
		}

		return new Response("Not found", { status: 404 });
	},
};

KV ストレージ

# Create namespace
wrangler kv namespace create MY_KV

# Add to wrangler.toml
# kv_namespaces = [{ binding = "MY_KV", id = "abc123" }]

// In Worker
export default {
	async fetch(request, env) {
		// Write
		await env.MY_KV.put("key", "value");

		// Read
		const value = await env.MY_KV.get("key");

		return new Response(value);
	},
};

R2 ストレージ

wrangler r2 bucket create my-bucket
# Add: r2_buckets = [{ binding = "MY_BUCKET", bucket_name = "my-bucket" }]

// In Worker
await env.MY_BUCKET.put("file.txt", "content");
const object = await env.MY_BUCKET.get("file.txt");
const text = await object.text();

D1 データベース

wrangler d1 create my-database
wrangler d1 execute my-database --command="CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)"
# Add: d1_databases = [{ binding = "DB", database_name = "my-database", database_id = "..." }]

// In Worker
const { results } = await env.DB.prepare("SELECT * FROM users WHERE id = ?").bind(1).all();

return Response.json(results);

Infra SDK 抽象化レイヤー

Grove では、Cloudflare の生 API の代わりに、@autumnsgrove/infra のポータブルなインフラストラクチャインターフェースを使用します。これにより、バックエンドの移植性が高まり、すべてのサービスで一貫したパターンを利用できます。

生の Cloudflare	Infra SDK インターフェース	インポート先
env.DB (D1Database)	GroveDatabase	@autumnsgrove/infra
env.STORAGE (R2Bucket)	GroveStorage	@autumnsgrove/infra
env.CACHE_KV (KVNamespace)	GroveKV	@autumnsgrove/infra
サービスバインディング (Fetcher)	GroveServiceBus	@autumnsgrove/infra

Grove コンテキストの作成

Worker のエントリーポイントで createCloudflareContext() を使用して GroveContext を作成します。

import { createCloudflareContext } from "@autumnsgrove/infra/cloudflare";

const ctx = createCloudflareContext({
	db: env.DB,
	storage: env.STORAGE,
	kv: env.CACHE_KV,
});

// Use portable interfaces
const files = await ctx.storage.list("prefix");
const cached = await ctx.kv.get("key");

Amber SDK によるストレージ管理

ファイル／ストレージを管理するには、GroveStorage 上に FileManager、QuotaManager、ExportManager、AddonManager を提供する Amber SDK（@autumnsgrove/lattice/amber）を使用します。

import { FileManager, QuotaManager } from "@autumnsgrove/lattice/amber";

const fileManager = new FileManager(ctx.storage);
const quotaManager = new QuotaManager(ctx.storage);

// Type-safe file operations
const metadata = await fileManager.upload("user-123/photo.jpg", stream);
const quota = await quotaManager.getUsage("user-123");

型安全なデータアクセス

境界での型安全性を確保するには、@autumnsgrove/lattice/server の Rootwork ユーティリティを使用します。

import { safeJsonParse, parseFormData } from "@autumnsgrove/lattice/server";
import { z } from "zod";

// Parse KV reads safely
const cached = await ctx.kv.get("config");
const config = safeJsonParse(cached, ConfigSchema);

// Parse form data with validation
const formData = await request.formData();
const data = parseFormData(formData, UploadSchema);

Pages のデプロイ

# Deploy static site
wrangler pages deploy ./build --project-name=my-site

# With SvelteKit
pnpm add -D @sveltejs/adapter-cloudflare
pnpm build
wrangler pages deploy .svelte-kit/cloudflare

wrangler.toml の設定

name = "my-worker"
main = "src/index.js"
compatibility_date = "2024-01-01"

# Automatic resource provisioning (v4.45.0+)
kv_namespaces = [{ binding = "MY_KV" }]
r2_buckets = [{ binding = "MY_BUCKET" }]
d1_databases = [{ binding = "DB" }]

開発モード

# Local (simulated resources)
wrangler dev

# Remote (real Cloudflare resources)
wrangler dev --remote

Worker のシークレット

# Set secret
wrangler secret put API_KEY --name my-worker

# Access in code
const apiKey = env.API_KEY;

ベストプラクティス

推奨事項 ✅

• まず wrangler dev を使ってローカルでテストする
• 環境ごとに設定を使い分ける
• wrangler tail でログを監視する
• リソースの自動プロビジョニングを使用する

避けるべきこと ❌

• アカウント ID をハードコードする
• ローカルテストを省略する
• 本番用 ID を含む wrangler.toml をコミットする
• レート制限を無視する

よくあるパターン

KV と R2 によるキャッシュ

export default {
	async fetch(request, env) {
		const url = new URL(request.url);
		const cacheKey = url.pathname;

		// Check KV cache
		let content = await env.MY_KV.get(cacheKey);
		if (content) return new Response(content);

		// Fetch from R2
		const object = await env.MY_BUCKET.get(cacheKey.slice(1));
		if (!object) return new Response("Not found", { status: 404 });

		content = await object.text();

		// Cache in KV
		await env.MY_KV.put(cacheKey, content, { expirationTtl: 3600 });

		return new Response(content);
	},
};

関連リソース

以下を含む完全なドキュメントについては、AgentUsage/cloudflare_guide.md を参照してください。

• MCP サーバーの設定
• D1 の高度なパターン
• 本番環境へのデプロイ戦略
• トラブルシューティングガイド