Tujuan Pembelajaran

• Memahami apa itu Cloudflare Workers dan edge computing
• Mampu menulis dan deploy worker dengan Wrangler CLI
• Mengerti event handlers (fetch, scheduled)
• Menggunakan Environment Variables dan Secrets
• Mengintegrasikan dengan Cloudflare services (KV, R2, D1)
• Membuat use cases: redirect, proxy, A/B testing

Kenapa Cloudflare Workers?

• Global Distribution - Kode dijalankan di 200+ edge locations
• No Cold Start - Nearly instant execution
• Serverless - Tidak perlu manage infrastruktur
• Free Tier - 100,000 requests/hari gratis

Apa itu Edge Computing?

Cloudflare Edge Network

• 300+ cities globally
• 200+ countries
• Anycast routing

Limitasi Workers

Yang Tidak Support

• Long-running processes (max 30s)
• WebSockets
• Persistent storage lokal

Arsitektur Dasar Workers

Fetch Event (HTTP)

export default {
  async fetch(request, env, ctx) {
    return new Response("Hello from Workers!");
  }
};

Scheduled Event (Cron)

export default {
  async scheduled(event, env, ctx) {
    console.log("Cron triggered");
  }
};

Membaca Request

export default {
  async fetch(request, env, ctx) {
    // HTTP Method
    const method = request.method;
    
    // URL Parsing
    const url = new URL(request.url);
    const pathname = url.pathname;
    const query = url.searchParams.get("q");
    
    // Headers
    const userAgent = request.headers.get("User-Agent");
    const cfCountry = request.headers.get("CF-IPCountry");
    
    // Body
    const body = await request.json();
    
    return new Response(JSON.stringify({ method, pathname }));
  }
};

Membuat Response

// Basic
return new Response("Hello World!");

// JSON
return new Response(JSON.stringify({ status: "ok" }), {
  status: 200,
  headers: { "Content-Type": "application/json" }
});

// Redirect
return Response.redirect("https://example.com", 301);

// Error
return new Response("Not Found", { status: 404 });

Wrangler CLI

Install & Setup

npm install -g wrangler
wrangler login

Init Project

wrangler init my-worker
cd my-worker

Commands

wrangler dev          # Local dev
wrangler deploy       # Deploy
wrangler logs         # View logs

wrangler.toml

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

[vars]
APP_NAME = "My Worker"
VERSION = "1.0.0"

Struktur Project

my-worker/
├── worker.js        # Main script
├── wrangler.toml    # Config
└── package.json

Environment Variables

Public (vars)

// wrangler.toml
[vars]
API_URL = "https://api.example.com"

// worker.js
const apiUrl = env.API_URL;

Private Secrets

# CLI
wrangler secret put API_KEY
# Input: (ketik nilai rahasia)

Multiple Environments

# wrangler.toml
[env.staging]
name = "my-worker-staging"
vars = { ENVIRONMENT = "staging" }

[env.production]
name = "my-worker-production"
vars = { ENVIRONMENT = "production" }

Deploy Commands

wrangler deploy --env staging
wrangler deploy --env production

Context Object

waitUntil - Background Tasks

export default {
  async fetch(request, env, ctx) {
    // Task berjalan di background
    ctx.waitUntil(
      fetch("https://webhook.example.com/log", {
        method: "POST",
        body: JSON.stringify({ url: request.url })
      })
    );
    
    return new Response("Processing...");
  }
};

Use Case: Redirect

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    
    const redirects = {
      "/old-page": "/new-page",
      "/product-1": "https://other-site.com",
      "/legacy": "https://archive.example.com"
    };
    
    const destination = redirects[url.pathname];
    if (destination) {
      return Response.redirect(destination, 301);
    }
    
    return new Response("Not Found", { status: 404 });
  }
};

Use Case: API Proxy

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const backendUrl = `https://api.example.com${url.pathname}${url.search}`;
    
    const response = await fetch(backendUrl, {
      method: request.method,
      headers: {
        ...request.headers,
        "X-Custom-Header": "worker-proxy"
      },
      body: request.body
    });
    
    return new Response(response.body, {
      status: response.status,
      headers: {
        ...response.headers,
        "X-Proxied-By": "Cloudflare-Worker"
      }
    });
  }
};

Use Case: A/B Testing

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const cookie = request.headers.get("Cookie");
    
    // Cek variant existing
    if (cookie?.includes("variant=A")) {
      return fetch(`https://site-a.com${url.pathname}`);
    }
    if (cookie?.includes("variant=B")) {
      return fetch(`https://site-b.com${url.pathname}`);
    }
    
    // Assign variant baru (50/50)
    const variant = Math.random() < 0.5 ? "A" : "B";
    const destination = variant === "A" 
      ? `https://site-a.com${url.pathname}`
      : `https://site-b.com${url.pathname}`;
    
    const response = await fetch(destination);
    
    // Set cookie
    const newHeaders = new Headers(response.headers);
    newHeaders.append("Set-Cookie", `variant=${variant}; Path=/; Max-Age=2592000`);
    
    return new Response(response.body, { headers: newHeaders });
  }
};

Cloudflare KV

Setup

# wrangler.toml
[[kv_namespaces]]
binding = "MY_KV"
id = "xxxxxx"

Usage

// Write
await env.MY_KV.put("key", "value", { expirationTtl: 3600 });

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

// Delete
await env.MY_KV.delete("key");

Cloudflare R2

Setup

# wrangler.toml
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-bucket"

Usage

// Upload
await env.MY_BUCKET.put("file.txt", "Hello World");

// Download
const object = await env.MY_BUCKET.get("file.txt");
const text = await object.text();

Cloudflare D1

Setup

wrangler d1 create my-db

# wrangler.toml
[[d1_databases]]
binding = "DB"
database_name = "my-db"

Usage

// Select
const stmt = await env.DB.prepare("SELECT * FROM users WHERE id = ?");
const user = await stmt.bind(userId).first();

// Insert
await env.DB.prepare("INSERT INTO users (name) VALUES (?)").bind("John").run();

Scheduled Workers

Configure Cron

# wrangler.toml
[triggers]
crons = ["*/5 * * * *"]  # Every 5 minutes

# Cron examples:
# "*/5 * * * *"   = Every 5 minutes
# "0 * * * *"     = Every hour
# "0 0 * * *"     = Daily midnight

Handler

export default {
  async scheduled(event, env, ctx) {
    console.log("Triggered at:", event.scheduledTime);
    // Do something
  }
};

Pricing

Tips & Best Practices

• Gunakan console.log untuk debugging
• View logs: wrangler logs
• Handle errors dengan try-catch
• Gunakan appropriate caching headers
• Secure worker dengan validasi origin

Debugging

export default {
  async fetch(request, env, ctx) {
    console.log("Request URL:", request.url);
    // View di: wrangler logs
  }
};