AgentSkillsCN

cloudflare-deployment

精通 Java 的专家开发者,擅长实现 LeetCode 题目、数据结构与算法。遵循竞赛编程与面试备考的最佳实践,帮助编写清晰、高效的 Java 代码。适用于编写或实现 Java 解决方案时使用。

SKILL.md
--- frontmatter
name: cloudflare-deployment
description: Deploy and manage Cloudflare Workers, Pages, KV, R2, and D1 using wrangler CLI or MCP server. Use when working with Cloudflare services, serverless functions, or edge deployments.

Cloudflare Deployment Skill

When to Activate

Activate this skill when:

  • Setting up Cloudflare Workers or Pages
  • Working with KV, R2, or D1 storage
  • Deploying applications to Cloudflare
  • Configuring wrangler.toml
  • Managing Cloudflare resources

Quick Commands

bash
# 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

Service Overview

ServicePurposeUse Case
WorkersServerless functionsAPI endpoints, middleware
PagesStatic sites + functionsSvelteKit, Next.js
KVKey-value storageCaching, session data
R2Object storageFiles, images, backups
D1SQLite databaseStructured data

Workers Setup

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

Basic Worker

javascript
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 Storage

bash
# Create namespace
wrangler kv namespace create MY_KV

# Add to wrangler.toml
# kv_namespaces = [{ binding = "MY_KV", id = "abc123" }]
javascript
// 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 Storage

bash
wrangler r2 bucket create my-bucket
# Add: r2_buckets = [{ binding = "MY_BUCKET", bucket_name = "my-bucket" }]
javascript
// 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 Database

bash
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 = "..." }]
javascript
// In Worker
const { results } = await env.DB.prepare(
  "SELECT * FROM users WHERE id = ?"
).bind(1).all();

return Response.json(results);

Pages Deployment

bash
# 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 Configuration

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" }]

Development Modes

bash
# Local (simulated resources)
wrangler dev

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

Worker Secrets

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

# Access in code
const apiKey = env.API_KEY;

Best Practices

DO ✅

  • Use wrangler dev for local testing first
  • Use environment-specific configs
  • Monitor logs with wrangler tail
  • Use automatic resource provisioning

DON'T ❌

  • Hardcode account IDs
  • Skip local testing
  • Commit wrangler.toml with production IDs
  • Ignore rate limits

Common Patterns

KV + R2 Caching

javascript
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);
  }
}

Related Resources

See AgentUsage/cloudflare_guide.md for complete documentation including:

  • MCP server configuration
  • Advanced D1 patterns
  • Production deployment strategies
  • Troubleshooting guide