Cloudflare là gì?
Global Edge Network
┌─────────────────────────────────────────────────────────────┐
│ CLOUDFLARE NETWORK │
├─────────────────────────────────────────────────────────────┤
│ │
│ User (Vietnam) ──▶ Edge Node (Singapore) ──▶ Origin │
│ │ │
│ ┌────┴────┐ │
│ │ Workers │ │
│ │ KV │ │
│ │ Queue │ │
│ │ R2 │ │
│ └─────────┘ │
│ │
│ 300+ data centers worldwide │
│ <50ms latency to most users │
│ Serverless compute at the edge │
│ │
└─────────────────────────────────────────────────────────────┘
Services trong Scope
Những gì sẽ học
┌─────────────────────────────────────────────────────────────┐
│ CLOUDFLARE SERVICES (IN SCOPE) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ✅ WORKERS │
│ - Serverless JavaScript/TypeScript │
│ - Edge compute │
│ - Next.js hosting │
│ │
│ ✅ QUEUES │
│ - Message queue │
│ - Async processing │
│ - Batch operations │
│ │
│ ✅ CRON TRIGGERS │
│ - Scheduled Workers │
│ - Recurring tasks │
│ │
│ ✅ KV (Key-Value) │
│ - Global key-value store │
│ - Caching │
│ - Configuration │
│ │
│ ✅ R2 (Overview only) │
│ - Object storage │
│ - S3-compatible │
│ │
└─────────────────────────────────────────────────────────────┘
Những gì KHÔNG học
❌ OUT OF SCOPE:
- Cloudflare Pages (use Workers instead)
- D1 Database (use Supabase)
- Durable Objects (advanced)
- DNS/CDN configuration
- WAF/Security
Workers Overview
What is a Worker?
// Simplest Worker
export default {
async fetch(request: Request): Promise<Response> {
return new Response('Hello World!');
},
};
// Runs at the edge, close to users
// Cold start: ~0ms (no cold start!)
// Execution limit: 30s (free), 15min (paid)
Workers vs Traditional Serverless
| Feature |
Workers |
AWS Lambda |
| Cold start |
~0ms |
100ms-1s+ |
| Location |
Edge (300+ locations) |
Regions |
| Runtime |
V8 isolates |
Containers |
| Max duration |
30s/15min |
15min |
| Pricing |
Per request |
Per duration |
Wrangler CLI
Installation
# Install globally
npm install -g wrangler
# Or use npx
npx wrangler
# Login to Cloudflare
wrangler login
# Check version
wrangler version
Common Commands
# Development
wrangler dev # Local development
wrangler dev --remote # Remote development
# Deployment
wrangler deploy # Deploy to production
# Workers
wrangler init # Create new project
wrangler tail # View live logs
# KV
wrangler kv:namespace create <name>
wrangler kv:key put <key> <value>
# Queues
wrangler queues create <name>
# Secrets
wrangler secret put <name>
Project Configuration
wrangler.toml
# wrangler.toml
name = "my-app"
main = "src/index.ts"
compatibility_date = "2024-01-15"
# Workers settings
[vars]
ENVIRONMENT = "production"
# KV Namespaces
[[kv_namespaces]]
binding = "MY_KV"
id = "xxx"
# Queues
[[queues.producers]]
queue = "my-queue"
binding = "MY_QUEUE"
[[queues.consumers]]
queue = "my-queue"
max_batch_size = 10
max_batch_timeout = 30
# Cron Triggers
[triggers]
crons = ["0 * * * *", "0 0 * * *"]
# R2 Buckets
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-bucket"
# Environment-specific
[env.staging]
vars = { ENVIRONMENT = "staging" }
[env.production]
vars = { ENVIRONMENT = "production" }
Architecture với Light Stack
Integration Pattern
┌─────────────────────────────────────────────────────────────┐
│ LIGHT STACK ARCHITECTURE │
├─────────────────────────────────────────────────────────────┤
│ │
│ Browser │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ Cloudflare Workers │ │
│ │ (Next.js via OpenNext) │ │
│ │ │ │
│ │ ┌────────────────────────────┐ │ │
│ │ │ KV (cache, sessions) │ │ │
│ │ │ Queue (async processing) │ │ │
│ │ │ Cron (scheduled tasks) │ │ │
│ │ └────────────────────────────┘ │ │
│ └─────────────────┬───────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────┐ │
│ │ Supabase │ │
│ │ │ │
│ │ - PostgreSQL (data) │ │
│ │ - Auth (authentication) │ │
│ │ - Storage (files) │ │
│ │ - Realtime (subscriptions) │ │
│ └─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
Pricing Overview
Free Tier
┌─────────────────────────────────────────────────────────────┐
│ FREE TIER LIMITS │
├─────────────────────────────────────────────────────────────┤
│ │
│ Workers: │
│ - 100,000 requests/day │
│ - 10ms CPU time per request │
│ - 128MB memory │
│ │
│ KV: │
│ - 100,000 reads/day │
│ - 1,000 writes/day │
│ - 1GB storage │
│ │
│ Queues: │
│ - 1,000,000 operations/month │
│ │
│ R2: │
│ - 10GB storage │
│ - 1M Class A ops/month │
│ - 10M Class B ops/month │
│ │
│ Sufficient for most PoCs and small projects! │
│ │
└─────────────────────────────────────────────────────────────┘
Tổng kết
Key Points
| Service |
Purpose |
Use Case |
| Workers |
Compute |
App hosting, APIs |
| Queues |
Messaging |
Async processing |
| Cron |
Scheduling |
Periodic tasks |
| KV |
Key-Value |
Cache, config |
| R2 |
Object Storage |
Files (optional) |
Learning Path
1. Workers basics → Hosting Next.js
2. KV → Caching strategies
3. Queues → Background processing
4. Cron → Scheduled jobs
5. Integration → Full stack
Q&A
- Đã dùng Cloudflare trước đây chưa?
- Có account Cloudflare chưa?
- Questions về pricing?