Cloudflare Workers bikin kode kamu jalan di lebih dari 300 lokasi edge Cloudflare di seluruh dunia. Bayangin request user dari Jakarta langsung di-handle oleh server yang lokasinya paling deket - latency-nya jadi turun banget dibanding harus bolak-balik ke server di US atau Eropa. Kalo selama ini kamu biasa deploy ke VPS atau serverless tradisional yang region-nya statis (pilih US East, atau EU West, gitu), Workers nyerang masalah ini dari sudut yang beda. Kode kamu gak di-deploy ke satu region - dia didistribusi ke semua edge location Cloudflare. Setiap request otomatis di-handle oleh edge node terdekat dengan pengguna. Artikel ini bakal ngebahas dari setup dasar sampai fitur lanjutan kayak KV storage, D1 database, R2 object storage, Durable Objects, dan Cron triggers. Semua disertai contoh kode yang bisa kamu langsung coba. ## Cara Kerja Cloudflare Workers Workers jalan di atas V8 engine - engine JavaScript yang sama dipake Google Chrome. Tapi beda dengan Node.js yang jalan di V8 plus libuv, Workers jalan langsung di atas V8 isolates. Ini artinya: - **Cold start hampir nol**: karena gak ada VM atau container yang harus di-boot, Worker bisa mulai eksekusi dalam hitungan milidetik. - **Ringan**: setiap Worker cuma butuh beberapa megabyte memori, jadi Cloudflare bisa ngejalanin jutaan Worker di satu server fisik. - **Isolasi kuat**: setiap Worker jalan di isolate V8 yang terpisah, jadi gak bisa saling ganggu antar satu sama lain. Karena jalan di edge environment, Workers punya beberapa batasan yang perlu kamu tau: - **No filesystem**: gak ada akses ke filesystem tradisional. Untuk simpan file, kamu pake R2 atau KV. - **Execution time limit**: Worker punya batas CPU time (default 10ms di plan gratis, bisa lebih di plan berbayar). - **Subrequest limit**: maksimum 50 subrequest (fetch ke external API, database call, dll) per request di plan gratis. ## Setup dengan Wrangler CLI Wrangler adalah CLI tool resmi Cloudflare untuk develop, test, dan deploy Workers. Install dulu: ```bash npm install -g wrangler # atau pake npx tanpa install global npx wrangler --version ``` Buat project baru: ```bash npm create cloudflare@latest my-worker ``` Wrangler bakal nanya beberapa hal - pilih template "Hello World Worker", pakai TypeScript, dan deploy atau gak. Setelah selesai, struktur folder-nya kayak gini: ``` my-worker/ ├── src/ │ └── index.ts ├── wrangler.toml ├── package.json └── tsconfig.json ``` File `wrangler.toml` adalah konfigurasi utama project Worker kamu: ```toml name = "my-worker" main = "src/index.ts" compatibility_date = "2024-01-01" [vars] API_URL = "https://api.example.com" # Untuk pake KV [[kv_namespaces]] binding = "MY_KV" id = "abc123..." # Untuk pake D1 [[d1_databases]] binding = "MY_DB" database_name = "my-database" database_id = "abc123..." # Untuk pake R2 [[r2_buckets]] binding = "MY_BUCKET" bucket_name = "my-bucket" # Untuk Cron triggers [triggers] crons = ["0 * * * *"] ``` ## Hello World Worker Ini kode Worker paling dasar: ```typescript export default { async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise { const url = new URL(request.url); if (url.pathname === "/") { return new Response("Halo dari Cloudflare Workers!", { headers: { "Content-Type": "text/plain" }, }); } if (url.pathname === "/json") { return Response.json({ message: "Halo", timestamp: Date.now(), region: request.cf?.colo ?? "unknown", }); } return new Response("404 - Halaman gak ditemukan", { status: 404 }); }, }; ``` Beberapa hal yang perlu kamu perhatiin: - **`fetch(request, env, ctx)`**: ini handler utama. `request` berisi info HTTP request, `env` berisi bindings (KV, D1, R2, dll), dan `ctx` berisi context untuk lifecycle Worker. - **`request.cf`**: berisi info tentang request dari Cloudflare, kayak colo (data center code), country, city, timezone, dll. - **Return `Response`**: mirip banget sama Web API di browser. Untuk jalanin secara lokal: ```bash npx wrangler dev ``` Ini bakal nyalain local dev server di `http://localhost:8787`. Wrangler simulasi edge environment di mesin kamu. Deploy ke Cloudflare: ```bash npx wrangler deploy ``` Setelah deploy, Worker kamu bakal live di URL `https://my-worker..workers.dev`. ## KV Storage - Key-Value Store di Edge KV (Key-Value) storage adalah database key-value yang data-nya tersebar di semua edge location. Cocok untuk config, session data, cache, atau data apapun yang aksesnya berdasarkan key. Bikin KV namespace: ```bash npx wrangler kv namespace create MY_KV ``` Tambah binding ke `wrangler.toml`: ```toml [[kv_namespaces]] binding = "MY_KV" id = "xxxxxxxxxxxxxxxxxxxxxxxx" ``` Sekarang kamu bisa pake KV di Worker: ```typescript export default { async fetch(request: Request, env: Env): Promise { const url = new URL(request.url); // SET value if (url.pathname === "/set" && request.method === "POST") { const body = await request.json<{ key: string; value: string }>(); await env.MY_KV.put(body.key, body.value); return Response.json({ success: true }); } // GET value if (url.pathname === "/get") { const key = url.searchParams.get("key") ?? ""; const value = await env.MY_KV.get(key); if (!value) { return new Response("Key gak ditemukan", { status: 404 }); } return Response.json({ key, value }); } // LIST keys if (url.pathname === "/list") { const keys = await env.MY_KV.list(); return Response.json({ keys: keys.keys }); } // DELETE value if (url.pathname === "/delete" && request.method === "DELETE") { const key = url.searchParams.get("key") ?? ""; await env.MY_KV.delete(key); return Response.json({ success: true }); } return new Response("404", { status: 404 }); }, }; ``` KV juga support TTL (time-to-live) untuk auto-expire data: ```typescript // Expire dalam 60 detik await env.MY_KV.put("temp-key", "temp-value", { expirationTtl: 60 }); // Baca dengan tipe data spesifik const buffer = await env.MY_KV.get("image-data", "arrayBuffer"); const stream = await env.MY_KV.get("big-data", "stream"); ``` **Kapan pake KV?** KV bagus untuk data yang dibaca lebih sering daripada ditulis. Write-then-read konsistensi-nya eventual (bisa butuh waktu beberapa detik untuk propagate ke semua edge). Jadi gak cocok untuk data yang butuh strong consistency kayak transaksi finansial. ## D1 Database - SQLite di Edge D1 adalah database berbasis SQLite yang jalan di edge Cloudflare. Beda dengan KV yang key-value, D1 support full SQL query. Cocok untuk aplikasi yang butuh query kompleks, join, dan transaksi. Bikin D1 database: ```bash npx wrangler d1 create my-database ``` Tambah binding: ```toml [[d1_databases]] binding = "MY_DB" database_name = "my-database" database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" ``` Buat tabel: ```bash npx wrangler d1 execute my-database --command "CREATE TABLE posts (id INTEGER PRIMARY KEY, title TEXT, content TEXT, created_at TEXT DEFAULT CURRENT_TIMESTAMP)" ``` Atau pake file SQL: ```bash npx wrangler d1 execute my-database --file ./schema.sql ``` Pake D1 di Worker: ```typescript export default { async fetch(request: Request, env: Env): Promise { const url = new URL(request.url); // Insert post baru if (url.pathname === "/posts" && request.method === "POST") { const body = await request.json<{ title: string; content: string }>(); const result = await env.MY_DB.prepare( "INSERT INTO posts (title, content) VALUES (?, ?) RETURNING *" ) .bind(body.title, body.content) .first(); return Response.json(result); } // Ambil semua posts if (url.pathname === "/posts" && request.method === "GET") { const result = await env.MY_DB.prepare("SELECT * FROM posts ORDER BY created_at DESC").all(); return Response.json({ posts: result.results }); } // Ambil post by ID if (url.pathname.startsWith("/posts/") && request.method === "GET") { const id = url.pathname.split("/")[2]; const post = await env.MY_DB.prepare("SELECT * FROM posts WHERE id = ?") .bind(id) .first(); if (!post) { return new Response("Post gak ditemukan", { status: 404 }); } return Response.json(post); } // Batch query - eksekusi multiple statement sekaligus if (url.pathname === "/stats" && request.method === "GET") { const result = await env.MY_DB.batch([ env.MY_DB.prepare("SELECT COUNT(*) as total FROM posts"), env.MY_DB.prepare("SELECT * FROM posts LIMIT 5"), ]); return Response.json({ total: result[0].results[0].total, recent: result[1].results, }); } return new Response("404", { status: 404 }); }, }; ``` D1 punya beberapa kelebihan dibanding KV: - Support full SQL (join, aggregation, transaction) - Strong consistency untuk writes - Bisa query langsung dari CLI untuk debugging Tapi D1 punya latency yang sedikit lebih tinggi dari KV karena setiap query harus ke primary database (yang lokasinya mungkin jauh dari edge yang nangani request). ## R2 Object Storage - S3-Compatible tanpa Egress Fee R2 adalah object storage dari Cloudflare yang compatible dengan S3 API. Keunggulan utamanya: **zero egress cost**. Kalo di S3 kamu bayar per GB data yang keluar, di R2 kamu gak bayar egress sama sekali. Bikin R2 bucket: ```bash npx wrangler r2 bucket create my-bucket ``` Tambah binding: ```toml [[r2_buckets]] binding = "MY_BUCKET" bucket_name = "my-bucket" ``` Pake R2 di Worker untuk upload dan serve file: ```typescript export default { async fetch(request: Request, env: Env): Promise { const url = new URL(request.url); // Upload file if (url.pathname === "/upload" && request.method === "POST") { const formData = await request.formData(); const file = formData.get("file") as File; if (!file) { return new Response("File gak ditemukan", { status: 400 }); } const key = `uploads/${Date.now()}-${file.name}`; await env.MY_BUCKET.put(key, file.stream(), { httpMetadata: { contentType: file.type, }, customMetadata: { originalName: file.name, uploadedAt: new Date().toISOString(), }, }); return Response.json({ key, url: `https://my-worker.example.workers.dev/file/${key}`, }); } // Download/serve file if (url.pathname.startsWith("/file/")) { const key = url.pathname.replace("/file/", ""); const object = await env.MY_BUCKET.get(key); if (!object) { return new Response("File gak ditemukan", { status: 404 }); } const headers = new Headers(); object.writeHttpMetadata(headers); headers.set("Cache-Control", "public, max-age=31536000"); return new Response(object.body, { headers }); } // Hapus file if (url.pathname.startsWith("/delete/") && request.method === "DELETE") { const key = url.pathname.replace("/delete/", ""); await env.MY_BUCKET.delete(key); return Response.json({ success: true }); } // List objects if (url.pathname === "/list") { const objects = await env.MY_BUCKET.list(); return Response.json({ objects: objects.objects }); } return new Response("404", { status: 404 }); }, }; ``` R2 cocok untuk: - Hosting gambar, video, dan file static lainnya - Backup storage - Data lake atau archive - Aplikasi yang butuh serve file ke pengguna tanpa biaya egress yang mahal ## Durable Objects - Stateful di Edge Durable Objects adalah cara untuk simpan state yang konsisten di edge. Setiap Durable Object punya state yang unique dan single-threaded, jadi cocok untuk: - Real-time collaboration (kayak Google Docs) - Chat rooms - Game state - Rate limiting - Queue processing Durable Objects beda dengan KV atau D1 karena dia punya in-memory state yang persistent. Kalo KV dan D1 adalah "storage", Durable Object adalah "actor" yang punya state sendiri. Contoh: bikin counter global dengan Durable Object: ```typescript // src/index.ts export interface Env { COUNTER: DurableObjectNamespace; } export default { async fetch(request: Request, env: Env): Promise { const url = new URL(request.url); if (url.pathname === "/count") { // Ambil atau bikin Durable Object dengan ID tetap const id = env.COUNTER.idFromName("global-counter"); const obj = env.COUNTER.get(id); // Forward request ke Durable Object const response = await obj.fetch(request); const count = await response.text(); return new Response(`Counter: ${count}`, { headers: { "Content-Type": "text/plain" }, }); } return new Response("404", { status: 404 }); }, }; // Durable Object class export class Counter { state: DurableObjectState; constructor(state: DurableObjectState, env: Env) { this.state = state; } async fetch(request: Request): Promise { // Baca value dari storage, default 0 let count = (await this.state.storage?.get("count")) ?? 0; if (request.method === "POST") { count = (count as number) + 1; await this.state.storage?.put("count", count); } return new Response(String(count)); } } ``` Konfigurasi di `wrangler.toml`: ```toml [durable_objects] bindings = [ { name = "COUNTER", class_name = "Counter" } ] [[migrations]] tag = "v1" new_sqlite_classes = ["Counter"] ``` Contoh yang lebih kompleks - chat room dengan WebSocket: ```typescript export class ChatRoom { state: DurableObjectState; sessions: Map = new Map(); constructor(state: DurableObjectState, env: Env) { this.state = state; } async fetch(request: Request): Promise { if (request.headers.get("Upgrade") !== "websocket") { return new Response("Expected websocket", { status: 426 }); } const pair = new WebSocketPair(); const [client, server] = Object.values(pair); const name = new URL(request.url).searchParams.get("name") ?? "Anonim"; server.accept(); this.sessions.set(server, { name }); server.send(JSON.stringify({ type: "welcome", message: `Halo ${name}!` })); server.addEventListener("message", (event) => { const data = JSON.parse(event.data); // Broadcast ke semua session for (const [ws, sessionInfo] of this.sessions) { ws.send(JSON.stringify({ type: "message", from: name, message: data.message, timestamp: Date.now(), })); } }); server.addEventListener("close", () => { this.sessions.delete(server); }); return new Response(null, { status: 101, webSocket: client }); } } ``` ## Cron Triggers - Scheduled Tasks Cron triggers bikin Worker kamu jalan otomatis berdasarkan schedule. Cocok untuk: - Periodic data sync - Cleanup task - Report generation - Monitoring Tambah cron di `wrangler.toml`: ```toml [triggers] crons = [ "0 * * * *", # Setiap jam "0 0 * * *", # Setiap hari tengah malam "*/15 * * * *", # Setiap 15 menit "0 0 * * 0", # Setiap hari Minggu ] ``` Handler untuk cron: ```typescript export default { async fetch(request: Request, env: Env): Promise { return new Response("HTTP handler"); }, async scheduled(event: ScheduledEvent, env: Env, ctx: ExecutionContext): Promise { console.log("Cron jalan!", event.cron, event.scheduledTime); // Contoh: cleanup data lama dari KV setiap jam if (event.cron === "0 * * * *") { const keys = await env.MY_KV.list(); for (const key of keys.keys) { const value = await env.MY_KV.get(key.name, "json") as { expiresAt: number } | null; if (value && value.expiresAt < Date.now()) { await env.MY_KV.delete(key.name); console.log(`Deleted expired key: ${key.name}`); } } } // Contoh: kirim daily report setiap pagi if (event.cron === "0 0 * * *") { const stats = await env.MY_DB.prepare( "SELECT COUNT(*) as total FROM posts WHERE created_at >= date('now', '-1 day')" ).first(); await fetch("https://api.example.com/notify", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: `Daily report: ${stats?.total} posts kemarin`, }), }); } }, }; ``` Test cron trigger secara lokal: ```bash npx wrangler dev # Tekan "L" untuk trigger scheduled handler manual ``` ## Contoh Nyata: API Gateway dengan Caching Mari kita rangkai semuanya jadi satu aplikasi nyata - API gateway dengan caching, rate limiting, dan logging: ```typescript export interface Env { CACHE: KVNamespace; MY_DB: DurableObjectNamespace; } export default { async fetch(request: Request, env: Env): Promise { const url = new URL(request.url); // CORS headers if (request.method === "OPTIONS") { return new Response(null, { headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE", "Access-Control-Allow-Headers": "Content-Type", }, }); } // Cek cache dulu const cacheKey = `cache:${request.method}:${url.pathname}:${url.search}`; const cached = await env.CACHE.get(cacheKey, "json"); if (cached) { return Response.json(cached, { headers: { "X-Cache": "HIT" }, }); } // Routing if (url.pathname === "/api/posts") { const upstreamResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await upstreamResponse.json(); // Simpan ke cache dengan TTL 5 menit await env.CACHE.put(cacheKey, JSON.stringify(data), { expirationTtl: 300, }); return Response.json(data, { headers: { "X-Cache": "MISS" }, }); } return new Response("404", { status: 404 }); }, async scheduled(event: ScheduledEvent, env: Env): Promise { // Bersihkan cache yang expired tiap 6 jam const keys = await env.CACHE.list({ prefix: "cache:" }); for (const key of keys.keys) { const meta = await env.CACHE.getWithMetadata(key.name); if (meta.metadata?.expiresAt && meta.metadata.expiresAt < Date.now()) { await env.CACHE.delete(key.name); } } console.log(`Cleanup done: ${keys.keys.length} keys checked`); }, }; ``` ## Pricing dan Limits Plan gratis Cloudflare Workers udah cukup buat development dan project kecil: - **100,000 requests/hari** di plan gratis - **10ms CPU time** per request di gratis, 30ms+ di plan berbayar - **KV**: 100,000 reads dan 1,000 writes per hari di gratis - **D1**: 5 GB storage dan 5 million rows read per hari di gratis - **R2**: 10 GB storage di gratis, egress gratis di semua plan Plan berbayar ($5/bulan) naikin limitnya signifikan: - 10 juta requests/bulan (lalu $0.30 per juta) - 50ms CPU time per request - KV reads tak terbatas ## Tips dan Best Practices 1. **Pake TypeScript** - Wrangler punya type definitions yang lengkap. Ini bikin development jauh lebih gampang dan aman. 2. **Cache aggressively** - Karena edge Workers cepat, tapi upstream API kamu mungkin gak. Pake KV untuk cache response dari API eksternal. 3. **Pilih storage yang tepat**: - KV: data yang read-heavy, konsistensi eventual OK - D1: butuh SQL query, konsistensi kuat - R2: file dan blob, egress gratis - Durable Objects: stateful, real-time, single instance 4. **Monitor dengan logs** - `npx wrangler tail` untuk stream logs real-time dari Worker yang udah di-deploy. 5. **Pake `ctx.waitUntil()`** untuk background work yang gak perlu nunggu response ke user: ```typescript export default { async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise { // Response langsung balik ke user // Tapi analytics logging jalan di background ctx.waitUntil( fetch("https://analytics.example.com/track", { method: "POST", body: JSON.stringify({ path: new URL(request.url).pathname }), }) ); return new Response("OK"); }, }; ``` ## Penutup Cloudflare Workers menawarkan pendekatan yang berbeda untuk serverless. Alih-alih jalan di satu region, kode kamu tersebar di ratusan edge location. Dengan KV untuk caching, D1 untuk SQL, R2 untuk object storage, dan Durable Objects untuk stateful computing, kamu punya semua tools untuk bikin aplikasi cepat dan scalable. Mulai dari plan gratis dulu, cobain bikin Worker sederhana, dan rasain sendiri bedanya latency edge computing. Dokumentasi resmi Cloudflare Workers di developers.cloudflare.com/workers/ selalu jadi tempat terbaik untuk eksplor lebih dalam.