Revolusi Arsitektur Web Modern: Membangun Aplikasi AI Super Cepat, Secure, dan Scalable Menggunakan Tencent EdgeOne Makers

Penulis: Naufal Rizky Putera
Kategori: Edge Computing / Web Security / Fullstack AI Architecture
Program: DevHandal 2026 Batch 2 – Inspiring Experiences with Tencent EdgeOne Makers

Executive Summary

Dalam arsitektur web development modern, latency adalah musuh utama dari user experience (UX), sedangkan vulnerability dan pembengkakan biaya infrastruktur adalah ancaman terbesar bagi reputasi dan keberlanjutan aplikasi. Ketika kita membangun aplikasi kaya fitur yang terintegrasi dengan Large Language Models (LLM) serta backend serverless (seperti Supabase atau Cloud Functions), tantangan utamanya bukan lagi sekadar “apakah aplikasinya dapat diakses?”, melainkan:

1. Seberapa cepat aplikasi merespons pengguna di tingkat edge (sub-50ms)?
2. Seberapa tangguh sistem keamanannya terhadap serangan cyber Layer 3/4 dan Layer 7?
3. Seberapa efisien server origin dan kuota API AI dalam menangani lonjakan trafik tanpa membengkakkan biaya?

Melalui partisipasi dalam DevHandal 2026 Batch 2, saya melakukan pengujian komprehensif terhadap platform Tencent EdgeOne dan Tencent EdgeOne Makers. Artikel ini menyajikan pengalaman nyata saya dalam mengintegrasikan EdgeOne ke proyek portfolio website pribadi, lengkap dengan tutorial langkah-demi-langkah, contoh kode Edge Functions, analisis benchmark, hingga panduan troubleshooting lapangan.

📌 Sumber Resmi Platform:
• Website Utama: Tencent EdgeOne Official Site
• Produk Serverless: Tencent EdgeOne Edge Functions

Latar Belakang: Cerita di Balik Eksplorasi Ini

Sebelum masuk ke pembahasan teknis, izinkan saya bercerita sedikit tentang konteks pengalaman ini.

Saya membangun sebuah portfolio website menggunakan Astro sebagai static site generator, dengan backend Supabase untuk beberapa fitur dinamis dan integrasi AI chatbot yang memanfaatkan LLM API. Website ini sudah berjalan cukup baik — secara fungsional. Tapi ada satu hal yang selalu mengganjal:

“Kenapa TTFB website saya dari Indonesia masih di atas 250ms, padahal kontennya sebagian besar statis?”

Saya sudah coba berbagai optimasi: lazy loading, kompresi gambar, minifikasi CSS/JS. Tapi latensi jaringan ke origin server tetap jadi bottleneck yang tidak bisa saya kendalikan dari sisi kode. Belum lagi, saya pernah mendapati lonjakan request mencurigakan ke endpoint AI chatbot — yang artinya ada potensi penyalahgunaan token API yang mahal.

Saat saya terpilih untuk berpartisipasi di DevHandal 2026 Batch 2, saya langsung memilih untuk menguji Tencent EdgeOne sebagai solusi. Dan hasilnya? Jauh melebihi ekspektasi saya.

1. Menganalisis Problem Statement & Paradigma Edge Computing

Tantangan Arsitektur Web Tradisional

Sebelum mengadopsi Tencent EdgeOne, arsitektur portfolio website saya yang terhubung ke Origin Server dan Supabase mengalami bottleneck utama berikut:

• High Round-Trip Time (RTT): Setiap request dari pengguna di Indonesia yang harus memanggil API endpoint atau Database di kawasan server lain (misal: Singapura atau AS) memicu latensi jaringan tinggi (Time to First Byte / TTFB > 250ms).
• Cold Starts & Overhead AI API: Endpoint AI chatbot (/api/ai-chat) yang memanggil LLM API menambah beban latensi pemrosesan internal. Tanpa strategi caching dan edge execution yang presisi, total response time bisa melonjak hingga 2-3 detik.
• Vulnerabilities & Attack Surfaces at Scale: Saya pernah mendapati ratusan request per menit ke endpoint AI dari IP yang sama — kemungkinan besar bot scraping atau abuse. Tanpa proteksi di layer edge, origin server dan kuota API AI saya jadi sangat rentan.

Solusi: Pendekatan Unified Edge dari Tencent EdgeOne

Tencent EdgeOne merevolusi paradigma ini dengan menggabungkan tiga pilar utama ke dalam satu platform Unified Edge: Global Edge Acceleration (CDN) + Edge Security (WAF/DDoS Shield) + Serverless Edge Computation (Edge Functions).

📌 Sumber Resmi Dokumentasi:
• Dokumentasi Produk: Tencent EdgeOne Product Overview Documentation
• Panduan Edge Functions: EdgeOne Edge Functions Developer Guide

Flow Diagram 1.1: Arsitektur Unified Edge Tencent EdgeOne

┌─────────────────────────────────────────────────────────────────────────────┐
│                            [ User / End-Client ]                            │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │ (Ultra-low Latency Connection)
                                       ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                         TENCENT EDGEONE EDGE NODE                           │
│                                                                             │
│  ┌────────────────────────┐  ┌────────────────────┐  ┌───────────────────┐  │
│  │  DDoS & WAF Shield     │  │  Smart Edge Cache  │  │  Edge Functions   │  │
│  │  (L3/L4/L7 Filtering)  │  │  & Brotli Engine   │  │  (V8 Serverless)  │  │
│  └───────────┬────────────┘  └─────────┬──────────┘  └─────────┬─────────┘  │
└──────────────┼─────────────────────────┼───────────────────────┼────────────┘
               │                         │                       │
               ▼                         ▼                       ▼
      [ Secure Request ]        [ Edge Cache Hit ]     [ Light Edge Logic ]
               │                         │                       │
               └─────────────────────────┴───────────────────────┘
                                         │
                                         ▼
                   [ Origin Server / Supabase / AI API ]

Dengan arsitektur ini, seluruh request diproses pertama kali di Node Edge terdekat dari pengguna. Jika request merupakan aset statis atau response API ter-cache, Edge Node akan langsung merespons tanpa menyentuh Origin Server sama sekali.

2. Fitur Kunci Tencent EdgeOne Makers yang Diuji

Selama proses eksplorasi dan pengembangan proyek, beberapa kapabilitas utama Tencent EdgeOne terbukti memberikan peningkatan performa dan keamanan secara dramatis:

1. Integrated Edge Security (WAF & DDoS Protection): Memfilter bot traffic, pemindaian vuln otomatis, dan pola serangan berbahaya langsung di PoP (Point of Presence) Edge terdekat sebelum trafik mencapai server utama.

   📌 Sumber Dokumentasi: Tencent EdgeOne Web Application Firewall (WAF) Guide

2. Smart Dynamic Acceleration & Brotli Compression: Mengoptimalkan transmisi data dinamis melalui algoritma smart routing Tencent dan kompresi Brotli otomatis, menghemat ukuran payload hingga 30-50%.

   📌 Sumber Dokumentasi: Tencent EdgeOne Dynamic Acceleration & Optimization

3. Tencent EdgeOne Makers API Token Integration: Fleksibilitas penuh bagi developer untuk mengintegrasikan logika edge, otomasi purging cache, deployment otomatis, dan pengolahan token AI secara aman.

   📌 Sumber Dokumentasi: Tencent EdgeOne Open API Reference

4. Edge Functions Execution (V8 Serverless Engine): Mengeksekusi logika ringan seperti pemeriksaan autentikasi JWT, manipulasi HTTP Header, A/B Testing, dan sanitasi input prompt AI di tingkat Edge Node.

   📌 Sumber Dokumentasi: Tencent EdgeOne Edge Functions Engine & Runtimes

3. Langkah Demi Langkah: Panduan Deploy ke Tencent EdgeOne Makers (Tutorial Bergambar)

Berikut adalah panduan teknis lengkap langkah demi langkah untuk mengintegrasikan dan men-deploy aplikasi web Anda (Astro + Tailwind CSS) menggunakan Tencent EdgeOne Makers, lengkap dengan screenshot alur deployment nyata dari awal hingga aplikasi berhasil berjalan secara live.

Langkah 1: Mengakses Dashboard Tencent EdgeOne Makers

1. Login ke Tencent EdgeOne Console.
2. Buka tab Makers pada Service Dashboard. Di halaman ini Anda dapat melihat ringkasan penggunaan (Usage Overview) serta daftar project yang sudah aktif.

Gambar 3.1: Tampilan Service Dashboard Tencent EdgeOne pada tab Makers.

Langkah 2: Memilih Metode Pembuatan Project Baru

Pada halaman Makers, saat Anda mengklik tombol Create project, Tencent EdgeOne menyediakan 3 opsi metode pembuatan proyek yang fleksibel:

1. Import Git repository (Metode yang Saya Gunakan):
   Menghubungkan langsung dengan platform Git (seperti GitHub atau GitLab). Metode ini mengaktifkan Continuous Integration & Continuous Deployment (CI/CD) otomatis — setiap kali Anda melakukan git push kode baru ke branch main, EdgeOne akan otomatis melakukan build dan deploy ulang.
2. Start from template:
   Membuat proyek baru dari template aplikasi starter siap pakai yang telah disediakan oleh Tencent Cloud.
3. Upload directly:
   Mengunggah langsung folder aset statis hasil build (seperti folder dist atau arsip ZIP) secara manual tanpa melalui repositori Git.

💡 Pilihan Workflow: Pada panduan ini, saya memilih opsi Import Git repository karena seluruh kode sumber proyek portfolio ini dikelola di repositori GitHub (Falzz1010/portfolio-astro), sehingga setiap pembaruan artikel atau fitur baru bisa langsung ter-deploy otomatis.

Gambar 3.2: Menu drop-down 3 opsi pembuatan project, di mana kita memilih opsi “Import Git repository” via GitHub.

Langkah 3: Meng-import Repositori Git Proyek

1. Pilih akun Git / Organisasi Anda yang telah terhubung dengan Tencent Cloud.
2. Pilih repositori proyek web Anda dari daftar yang tersedia (pada pengujian ini saya memilih repositori portfolio-astro).

Gambar 3.3: Memilih repositori proyek web (contoh: portfolio-astro) dari akun GitHub.

Langkah 4: Mengonfigurasi Parameter Project & Build Settings

1. Configure Project:
   • Project Name: Masukkan nama project Anda (misal: portfolio-astro).
   • Acceleration Region: Pilih Global (MLC excluded) atau sesuai kebutuhan target user Anda.
   • Production Branch: Pilih branch utama tempat kode produksi berada (misal: main).
2. Build Settings:
   • Preset Framework: Pilih Astro (Tencent EdgeOne secara otomatis mengenali framework populer).
   • Root Directory: ./
   • Build Output Directory: dist
   • Build Command: npm run build
   • Install Command: npm install
3. Setelah seluruh konfigurasi sesuai, klik tombol Start deployment.

Gambar 3.4: Mengonfigurasi parameter project, preset framework Astro, dan build command.

Langkah 5: Monitoring Proses Build & Deployment Real-Time

Setelah menekan tombol Start deployment, EdgeOne Makers akan langsung menjalankan pipeline otomatis yang terdiri dari 5 tahapan:

1. Initialize: Mempersiapkan runner & environment build.
2. Clone: Mengunduh source code terbaru dari branch Git yang dipilih.
3. Install: Menginstal seluruh ketergantungan paket Node.js.
4. Build: Mengeksekusi perintah build (npm run build).
5. Deploy: Mengdistribusikan aset statis dan fungsi edge ke jaringan global EdgeOne.

Gambar 3.5: Tampilan proses build & deployment real-time pada tab Build Logs.

Langkah 6: Deployment Selesai & Verifikasi Status Success

1. Setelah seluruh tahapan berstatus Complete, indikator status project akan berubah menjadi Success berwarna hijau (dengan durasi build sekitar 44 detik).
2. Tencent EdgeOne secara otomatis membuatkan preview screenshot live serta menyediakan Domain Bawaan (contoh: https://portfolio-astro-dp3zdipxwlqh.edgeone.dev).
3. Anda dapat mengklik URL domain tersebut untuk langsung menguji website yang sudah ter-deploy secara global di Edge Network.

Gambar 3.6: Tampilan akhir deployment yang berhasil (Status: Success) beserta URL domain aktif.

Langkah 7: Pemantauan Performa & Keamanan di Project Overview

1. Klik ke halaman Project Overview untuk melihat dashboard analitik terpadu dari project Anda.
2. Pada halaman ini, Anda dapat memantau:
   • Status Project: Running
   • Security Protection: Proteksi WAF & DDoS aktif secara otomatis (Security policy hits 0 times).
   • Access Overview: Grafik real-time Total Requests, Total Traffic, dan Error Rate (0.00%).
   • Deployment History & Active Branches: Riwayat commit dan status branch aktif (misal main -> Success).

Gambar 3.7: Dashboard Project Overview menampilkan metrik performa, keamanan aktif, dan statistik trafik.

Langkah 8: Mengatur Rule Engine & Dynamic Caching Strategy

1. Buka menu Acceleration Service > Rule Engine.
2. Buat aturan baru (New Rule) untuk membedakan perlakuan antara Aset Statis dan Request API Dinamis:
   • Aturan Aset Statis (.js, .css, .png, .jpg, .woff2):
     • Action: Set Cache TTL hingga 30 Hari (Max-Age: 2592000).
     • Action: Aktifkan Brotli & Gzip Compression.
   • Aturan Dynamic API Endpoints (/api/*):
     • Action: Set Smart Acceleration tanpa full-page caching untuk menjamin konsistensi data real-time dari database/AI backend.

💡 Tips: Saya sempat salah men-cache endpoint /api/auth/* yang menyebabkan session pengguna tidak terupdate. Pastikan selalu kecualikan endpoint autentikasi dari caching!

Langkah 9: Konfigurasi Keamanan Lanjutan (WAF & DDoS Shield)

1. Akses menu Security > Web Application Firewall (WAF).
2. Aktifkan Managed Rule Set dengan tingkat sensitivitas Medium-High untuk menangkal eksploitasi umum OWASP Top 10 (seperti SQLi, XSS, RCE).
3. Konfigurasikan CC Protection & Rate Limiting:
   • Batasi maksimum 100 request / menit per IP pada endpoint sensitif (/api/ai-chat) guna mencegah brute-force dan pembengkakan konsumsi token AI LLM.

📌 Sumber Rujukan Keamanan: Tencent EdgeOne WAF Managed Rules & Rate Limiting

💡 Pengalaman nyata: Setelah mengaktifkan Rate Limiting di endpoint AI chatbot, saya langsung melihat penurunan drastis pada request mencurigakan. Dalam 24 jam pertama, WAF EdgeOne berhasil memblokir lebih dari 300 request dari bot yang sebelumnya langsung menyentuh origin server saya.

Langkah 10: Implementasi Edge Functions (Security & Headers Middleware)

Buat Edge Function baru di konsol EdgeOne untuk menyuntikkan security headers modern dan menangani CORS secara otomatis di layer edge:

/**
 * Edge Function: Security Headers & CORS Middleware
 * Platform: Tencent EdgeOne Makers V8 Engine
 * 
 * Best Practices yang diterapkan:
 * - Content-Security-Policy (CSP) untuk mitigasi XSS
 * - Permissions-Policy untuk membatasi akses fitur browser
 * - CORS Whitelist (bukan wildcard) untuk endpoint sensitif
 * - X-XSS-Protection di-set '0' (header deprecated, digantikan CSP)
 * - Try-catch untuk graceful error handling
 */

// Daftar domain yang diizinkan untuk CORS (hindari wildcard '*' pada production)
const ALLOWED_ORIGINS = [
  'https://portfolio-astro-dp3zdipxwlqh.edgeone.dev',
  'https://app.domainanda.com',
  'http://localhost:4321' // Development only
];

addEventListener('fetch', event => {
  event.respondWith(handleEdgeRequest(event.request));
});

async function handleEdgeRequest(request) {
  const origin = request.headers.get('Origin') || '';
  const isAllowedOrigin = ALLOWED_ORIGINS.includes(origin);
  const corsOrigin = isAllowedOrigin ? origin : ALLOWED_ORIGINS[0];

  // 1. Tangani Preflight CORS Request di Edge Level
  if (request.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': corsOrigin,
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Requested-With',
        'Access-Control-Max-Age': '86400',
        'Vary': 'Origin',
      },
    });
  }

  try {
    // 2. Teruskan request asli ke Origin Server / AI API
    const response = await fetch(request);
    
    // 3. Modifikasi Header Response untuk Meningkatkan Keamanan
    const securedHeaders = new Headers(response.headers);
    
    // === Injeksi Security Headers Standar Industri ===
    
    // Content Security Policy — pertahanan utama terhadap XSS
    securedHeaders.set('Content-Security-Policy', 
      "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https:;");
    
    // Permissions Policy — batasi akses ke fitur browser sensitif
    securedHeaders.set('Permissions-Policy', 
      'camera=(), microphone=(), geolocation=(), payment=(), usb=()');
    
    securedHeaders.set('X-Content-Type-Options', 'nosniff');
    securedHeaders.set('X-Frame-Options', 'DENY');
    securedHeaders.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
    
    // X-XSS-Protection di-set '0' karena sudah DEPRECATED di browser modern.
    // Header ini bisa justru memperkenalkan vulnerability (XSS Auditor bypass).
    // Gunakan Content-Security-Policy sebagai pengganti utamanya.
    securedHeaders.set('X-XSS-Protection', '0');
    
    securedHeaders.set('Referrer-Policy', 'strict-origin-when-cross-origin');
    securedHeaders.set('X-Powered-By', 'Tencent-EdgeOne-Makers');
    
    // CORS Header — gunakan whitelist, bukan wildcard
    securedHeaders.set('Access-Control-Allow-Origin', corsOrigin);
    securedHeaders.set('Vary', 'Origin');

    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: securedHeaders
    });
  } catch (err) {
    // 4. Graceful Error Handling — jangan biarkan Edge Function crash tanpa response
    return new Response(JSON.stringify({ 
      error: 'Origin server unreachable', 
      detail: err.message 
    }), {
      status: 502,
      headers: { 
        'Content-Type': 'application/json',
        'X-Content-Type-Options': 'nosniff'
      }
    });
  }
}

📌 Sumber Rujukan Code API: EdgeOne Fetch Event Handler Reference

⚠️ Catatan Best Practice Penting:

• Jangan gunakan Access-Control-Allow-Origin: '*' pada endpoint yang menangani data sensitif atau autentikasi. Selalu gunakan whitelist domain spesifik.
• Header X-XSS-Protection sudah deprecated di browser modern (Chrome telah menghapus XSS Auditor sejak versi 78). Gunakan Content-Security-Policy sebagai pengganti utama. Set nilai 0 untuk menonaktifkan fitur legacy yang justru bisa dieksploitasi.
• Selalu tambahkan try-catch di Edge Function untuk menghindari error 500 yang tidak informatif saat origin server tidak merespons.

Langkah 11: Advanced Edge AI Use-Case (Edge Prompt Sanitization & LLM Caching)

Flow Diagram 3.1: Alur Pemrosesan Edge AI Security & Prompt Guard

[ User Input (AI Query) ]
          │
          ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                 TENCENT EDGEONE EDGE FUNCTION ENGINE                        │
│                                                                             │
│  1. Parse Request Body & Inspect Prompt String                              │
│  2. Execute Keyword Pattern Matching against Prompt Injection Dictionary    │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │
                    ┌──────────────────┴──────────────────┐
                    │                                     │
           (Malicious Detected)                          (Clean Prompt)
                    │                                     │
                    ▼                                     ▼
┌──────────────────────────────────────┐  ┌───────────────────────────────────┐
│ ❌ HTTP 400 Bad Request               │  │ ✅ Forward to OpenAI / LLM Backend │
│ "Blocked by Edge Security Guard"     │  │ & Cache Identical Responses       │
└──────────────────────────────────────┘  └───────────────────────────────────┘

Salah satu penggunaan terbaik Edge Functions pada aplikasi AI adalah menyaring input berbahaya (Prompt Guard) dan melakukan caching terhadap kueri AI yang berulang untuk menghemat token API:

/**
 * Advanced Edge Function: AI Prompt Guard & Edge Response Caching
 * 
 * Best Practices yang diterapkan:
 * - Prompt Injection detection dengan keyword + regex pattern matching
 * - Edge-level response caching untuk query AI identik (hemat token API)
 * - Try-catch error handling dengan fallback response
 * - Request body size limit untuk mencegah payload abuse
 */

// Daftar keyword berbahaya — kembangkan sesuai kebutuhan aplikasi
const FORBIDDEN_KEYWORDS = [
  'ignore previous instructions',
  'ignore all instructions', 
  'drop table',
  'system prompt override',
  'disregard above',
  'reveal your prompt',
  'act as developer mode',
  'bypass safety',
  'jailbreak'
];

// Batas maksimum ukuran body request (16KB) untuk mencegah payload abuse
const MAX_BODY_SIZE = 16 * 1024;

// In-memory edge cache untuk response AI identik
// Catatan: Cache ini hidup selama lifetime Edge Function instance
const aiResponseCache = new Map();
const CACHE_TTL_MS = 5 * 60 * 1000; // 5 menit TTL
const MAX_CACHE_ENTRIES = 100;

addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (url.pathname === '/api/ai-query') {
    event.respondWith(handleAIRequest(event.request));
  }
});

async function handleAIRequest(request) {
  try {
    if (request.method === 'POST') {
      const clone = request.clone();
      const bodyText = await clone.text();

      // 1. Validasi ukuran body request
      if (bodyText.length > MAX_BODY_SIZE) {
        return new Response(JSON.stringify({ 
          error: 'Request payload too large. Maximum 16KB allowed.' 
        }), {
          status: 413,
          headers: { 'Content-Type': 'application/json' }
        });
      }
      
      // 2. Sanitasi Prompt Guard di Layer Edge
      const lowerBody = bodyText.toLowerCase();
      const containsMaliciousPrompt = FORBIDDEN_KEYWORDS.some(kw => lowerBody.includes(kw));
      if (containsMaliciousPrompt) {
        return new Response(JSON.stringify({ 
          error: 'Blocked by Edge Security Guard: Invalid Prompt Injection pattern detected.' 
        }), {
          status: 400,
          headers: { 'Content-Type': 'application/json' }
        });
      }

      // 3. Edge Cache Lookup — cek apakah query identik sudah pernah dijawab
      const cacheKey = await generateCacheKey(bodyText);
      const cachedEntry = aiResponseCache.get(cacheKey);
      
      if (cachedEntry && (Date.now() - cachedEntry.timestamp) < CACHE_TTL_MS) {
        // Cache HIT — kembalikan response dari edge tanpa menyentuh LLM API
        return new Response(cachedEntry.body, {
          status: 200,
          headers: { 
            'Content-Type': 'application/json',
            'X-Edge-Cache': 'HIT',
            'X-Cache-Age': `${Math.round((Date.now() - cachedEntry.timestamp) / 1000)}s`
          }
        });
      }

      // 4. Cache MISS — teruskan ke LLM Backend
      const originResponse = await fetch(request);
      const responseBody = await originResponse.text();

      // 5. Simpan response ke Edge Cache (hanya jika response sukses)
      if (originResponse.status === 200) {
        // Bersihkan cache jika sudah penuh (LRU sederhana)
        if (aiResponseCache.size >= MAX_CACHE_ENTRIES) {
          const oldestKey = aiResponseCache.keys().next().value;
          aiResponseCache.delete(oldestKey);
        }
        aiResponseCache.set(cacheKey, {
          body: responseBody,
          timestamp: Date.now()
        });
      }

      return new Response(responseBody, {
        status: originResponse.status,
        headers: { 
          'Content-Type': 'application/json',
          'X-Edge-Cache': 'MISS'
        }
      });
    }

    return fetch(request);
  } catch (err) {
    // Graceful fallback — jangan biarkan error di edge mematikan seluruh request
    return new Response(JSON.stringify({ 
      error: 'Edge processing failed, please try again.',
      detail: err.message
    }), {
      status: 502,
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

/**
 * Menghasilkan cache key dari body text menggunakan hash sederhana.
 * Pada production, gunakan crypto.subtle.digest('SHA-256', ...) jika tersedia.
 */
async function generateCacheKey(text) {
  const normalized = text.trim().toLowerCase();
  // Simple hash — cukup untuk edge caching dengan TTL pendek
  let hash = 0;
  for (let i = 0; i < normalized.length; i++) {
    const char = normalized.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash; // Convert to 32-bit integer
  }
  return `ai_cache_${hash}`;
}

💡 Mengapa Edge Caching untuk AI Response itu penting? Setiap panggilan ke LLM API (seperti OpenAI atau Claude) mengonsumsi token yang berbayar. Jika 10 pengguna menanyakan hal yang persis sama dalam waktu berdekatan, tanpa edge caching kita membayar 10x token. Dengan edge caching, kita hanya membayar 1x dan 9 request berikutnya dilayani langsung dari edge — menghemat hingga 90% biaya token API untuk query berulang.

Langkah 12: Otomasi Cache Purging via Tencent EdgeOne Makers API Token

Untuk memastikan pembaruan konten secara otomatis saat proses deployment CI/CD, kita dapat menggunakan API Token Tencent EdgeOne untuk melakukan Purge Cache melalui skrip cURL/Node.js:

⚠️ Best Practice Keamanan API Token:

• Jangan pernah hardcode API token di source code atau commit ke repositori Git.
• Simpan token sebagai environment variable atau gunakan secret manager bawaan CI/CD platform Anda (misal: GitHub Actions Secrets, GitLab CI Variables).
• Terapkan prinsip least privilege — buat API token yang hanya memiliki permission PurgeUrls, bukan full-access token.
• Rotasi token secara berkala (minimal setiap 90 hari) dan segera revoke token yang sudah tidak digunakan.

# Skrip Purge Cache Otomatis di CI/CD Pipeline
# PENTING: Gunakan environment variable, jangan hardcode token!
curl -X POST "https://eo.tencentcloudapi.com/" \
  -H "Authorization: Bearer $EDGEONE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "Action": "PurgeUrls",
    "ZoneId": "'$EDGEONE_ZONE_ID'",
    "Urls": ["https://app.domainanda.com/"]
  }'

Contoh konfigurasi di GitHub Actions untuk menyimpan token secara aman:

# .github/workflows/deploy.yml
name: Deploy & Purge Cache
on:
  push:
    branches: [main]

jobs:
  deploy-and-purge:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Build
        run: npm ci && npm run build

      - name: Purge EdgeOne Cache
        env:
          EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }}
          EDGEONE_ZONE_ID: ${{ secrets.EDGEONE_ZONE_ID }}
        run: |
          curl -X POST "https://eo.tencentcloudapi.com/" \
            -H "Authorization: Bearer $EDGEONE_API_TOKEN" \
            -H "Content-Type: application/json" \
            -d '{
              "Action": "PurgeUrls",
              "ZoneId": "'$EDGEONE_ZONE_ID'",
              "Urls": ["https://app.domainanda.com/"]
            }'

📌 Sumber Rujukan API Token: Dokumentasi Tencent EdgeOne Open API - PurgeUrls

4. Benchmark & Analisis Performa Hasil Pengujian

Metodologi Pengujian

Pengujian dilakukan dari lokasi end-user di Jakarta, Indonesia menggunakan kombinasi alat ukur berikut untuk memastikan validitas data:

• Chrome DevTools Network Tab: Mengukur TTFB, DOM Content Loaded, dan total asset load time secara langsung di browser.
• curl dengan timing flags: Menggunakan curl -w "TTFB: %{time_starttransfer}s\nTotal: %{time_total}s\n" -o /dev/null -s <URL> untuk mengukur TTFB secara presisi dari terminal.
• WebPageTest (Jakarta Node): Pengujian dari server pengujian terdekat di region Indonesia untuk simulasi pengguna riil.

Setiap metrik diukur sebanyak 5 kali berturut-turut dan diambil nilai median untuk menghindari outlier.

Visualisasi Perbandingan Latensi & Offload Rate

TTFB Response Speed Comparison (End-User Jakarta, Indonesia):

Direct to Origin Server:  [██████████████████████████████] ~290 ms
Dengan Tencent EdgeOne:   [███] ~32 ms  (⚡ 89% Speedup!)

Origin Server Offload Rate:
Direct to Origin Server:  [ 0% Offloaded - 100% Hit Origin ]
Dengan Tencent EdgeOne:   [████████████████████ 78% Offloaded at Edge ]

Hasil Pengujian Detail

💡 Catatan personal: Perbedaan yang paling terasa secara langsung bagi saya adalah TTFB. Sebelumnya, setiap kali saya membuka halaman portfolio dari HP di jaringan 4G, ada jeda yang sangat terasa sebelum konten muncul. Setelah EdgeOne aktif, halaman langsung snap — terasa seperti membuka file lokal.

5. Troubleshooting & Pro-Tips Lapangan untuk Developer

Berdasarkan pengalaman pengujian langsung selama integrasi proyek ini, berikut adalah tips penting yang saya pelajari di lapangan:

1. DNS Propagation Delay Handling:
   Saat mengubah CNAME record di domain registrar, tunggu 5-15 menit untuk propagasi DNS global. Gunakan perintah dig CNAME app.domainanda.com +short atau website DNSChecker Global Service untuk memverifikasi apakah DNS telah terarah ke Node EdgeOne.

   📌 Sumber Tool: DNSChecker Global Propagation Tool

2. Penanganan CORS Header Collisions:
   Jika backend server (seperti Express atau Supabase) sudah mengirimkan header Access-Control-Allow-Origin, pastikan Edge Function tidak menggandakan (duplicate header) response tersebut. Gunakan metode headers.set() alih-alih headers.append(). Saya mengalami error Multiple Access-Control-Allow-Origin headers sebelum menyadari hal ini.

3. Pemisahan Cache Static vs Dynamic:
   Selalu pastikan endpoint API autentikasi (/api/auth/*) dan transaksi dinamis dikecualikan dari Full Page Caching pada Rule Engine agar data pengguna tetap konsisten. Saya pernah kehilangan waktu 2 jam karena session login ter-cache dan pengguna mendapat response milik orang lain.

4. Verifikasi Security Headers:
   Setelah men-deploy Edge Function untuk security headers, selalu verifikasi hasilnya menggunakan SecurityHeaders Security Auditor atau curl -I <URL> untuk memastikan header HSTS, X-Frame-Options, dan lainnya benar-benar terpasang.

   📌 Sumber Tool: SecurityHeaders Vulnerability Auditor

6. Kesimpulan & Pesan Inspiratif untuk Developer Muda Indonesia

Pengalaman mendalam menggunakan Tencent EdgeOne Makers dalam ajang DevHandal 2026 Batch 2 membuktikan bahwa optimasi performa skala besar, efisiensi biaya, dan keamanan aplikasi tingkat enterprise tidak lagi harus rumit dan memakan waktu berminggu-minggu. Dengan memanfaatkan infrastruktur edge computing yang tepat, developer muda Indonesia dapat membangun aplikasi berstandar internasional dengan developer experience yang luar biasa.

Yang paling berkesan bagi saya secara personal: teknologi edge computing bukan hanya untuk perusahaan besar. Bahkan untuk proyek portfolio sederhana seperti milik saya, dampaknya sangat nyata — website terasa lebih cepat, lebih aman, dan biaya infrastruktur lebih terkendali.

Dunia teknologi bergerak sangat cepat. Penguasaan terhadap teknologi Edge Computing, Serverless Architecture, dan Fullstack AI Integration bukan lagi sekadar opsi tambahan, melainkan kebutuhan mendasar bagi developer yang ingin bersaing di panggung global.

Mari terus berinovasi, tingkatkan kualitas arsitektur kode kita, dan tunjukkan potensi luar biasa developer Indonesia di kancah dunia! 🚀

📚 Daftar Referensi & Sumber Dokumentasi Resmi

1. 🌐 Tencent EdgeOne Official Platform: https://edgeone.ai/
2. 📖 Tencent EdgeOne Documentation Center: https://www.tencentcloud.com/document/product/1145
3. ⚡ Tencent EdgeOne Edge Functions Developer Guide: https://www.tencentcloud.com/document/product/1145/52688
4. 🛡️ Tencent EdgeOne Web Application Firewall (WAF) & Security: https://www.tencentcloud.com/document/product/1145/55888
5. 🚀 Tencent EdgeOne Acceleration & Rule Engine: https://www.tencentcloud.com/document/product/1145/46151
6. 🔑 Tencent EdgeOne Open API Reference (Purge API): https://www.tencentcloud.com/document/product/1145/46164
7. 🛡️ OWASP Top 10 Web Application Security Risks: https://owasp.org/www-project-top-ten/
8. 🔍 SecurityHeaders Audit Tool: https://securityheaders.com/
9. 🌍 DNSChecker Global DNS Propagation: https://dnschecker.org/

Hashtags:
#TencentEdgeOne #EdgeOneMakers #CODEPOLITAN #DevHandal #EdgeComputing #WebSecurity