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
| Service | Purpose | Use Case |
|---|---|---|
| Workers | Serverless functions | API endpoints, middleware |
| Pages | Static sites + functions | SvelteKit, Next.js |
| KV | Key-value storage | Caching, session data |
| R2 | Object storage | Files, images, backups |
| D1 | SQLite database | Structured 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 devfor 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