▲ PromNET

2026. május 8. · #edge-kv #tutorial #feature-flags #cloudflare

Edge KV: feature-flag és config-store a saját statikus weboldaladon, 5 perc alatt

Bejelentés-bannerek, A/B-flag-ek, futási-konfig — eddig hardkódoltad, deploy-jal módosítottad. Az Edge KV plugin egy 2-mezős admin-formot ad, amit a weboldalad fetch-eli edge-cache-ből, <10 ms latencyvel.

Edge KV: feature-flag és config-store a saját statikus weboldaladon, 5 perc alatt

Statikus weboldalad van — Astro, Hugo, vagy plain HTML — és időnként meg akarsz változtatni egy szöveget a banner-en vagy egy feature-flag-et deploy nélkül. A /app/edge-kv plugin pontosan erre való. Ebben a posztban arról, hogy mire jó, kinek nem, és hogyan kötöd be 5 perc alatt.

⚠️ A probléma

A statikus oldal-stack ereje a sebessége és az olcsósága. A korlátja: minden módosítás újrabuild + redeploy. Ha a hero-szöveget percenként akarod cserélni, vagy egy “early-access”-flag-et élesben kapcsolni-kapcsolni, akkor:

💡 Az Edge KV egy negyedik opció: a Cloudflare Workers KV plugin a PromNET-en, magyar UI, integrált a fiókoddal.

💡 Mi az a KV-store?

KV = Key-Value. Mint egy Map / dict / hashmap, de globálisan elérhető a CF-edge-en.

Példa-kulcsÉrték
banner_text”Új! 30% kedvezmény Q2-ben”
feature_dark_mode”true”
maintenance_mode”false”
pricing_v2_enabled”true”
popup_message”Új AI-funkció érkezett!”

⚡ Az érték lehet egyszerű string, vagy JSON-stringified komplex objektum. A KV <10 ms latencyvel olvasható bárhonnan a világból (a CF 300+ edge-node-ja között szétoszlik).

🎨 A /app/edge-kv UI

[itt screenshot — 2-oszlopos lista, kulcs / érték]

Egyszerű:

  1. Új namespace — pl. “weboldal-config”
  2. Új kulcs beírása + érték
  3. Mentés
  4. Megjelenik a fetch-URL: https://api.promnet.hu/api/edge-kv/<namespace>/<kulcs>

Ezt a URL-t a frontended fetch-eli, és kapja az értéket.

📝 Példa — banner-szöveg cserélés

Tegyük fel, hogy van egy Astro-projekted (/app/cloud/cukraszda), és van egy hero-bannered:

---
// src/components/Banner.astro
const bannerText = "Üdvözöljük!";  // <-- hardkódolt
---

<div class="banner">{bannerText}</div>

Ezt dinamikussá teszed:

---
// src/components/Banner.astro
const res = await fetch(
  "https://api.promnet.hu/api/edge-kv/cukraszda/banner_text"
);
const data = await res.json();
const bannerText = data.value || "Üdvözöljük!";  // fallback
---

<div class="banner">{bannerText}</div>

Astro-build során lefut a fetch, inline-kerül a build-output-ba. Csak újra-buildkor frissül. Ha kliens-oldali frissítés kell, átviszed a fetch-et a kliensre:

<div class="banner" id="banner">Üdvözöljük!</div>

<script>
  fetch("https://api.promnet.hu/api/edge-kv/cukraszda/banner_text")
    .then(r => r.json())
    .then(d => {
      if (d.value) document.getElementById("banner").textContent = d.value;
    });
</script>

✅ Eredmény: ha az admin a /app/edge-kv-n átírja a banner_text értéket, a következő látogatónál azonnal megjelenik az új szöveg, build nélkül.

📝 Példa — feature-flag

Egy “early-access”-flag bekapcsolása:

// app.ts
async function isFeatureEnabled(flag: string): Promise<boolean> {
  const res = await fetch(
    `https://api.promnet.hu/api/edge-kv/cukraszda/feature_${flag}`
  );
  const data = await res.json();
  return data.value === "true";
}

if (await isFeatureEnabled("dark_mode")) {
  document.body.classList.add("dark");
}

A /app/edge-kv UI-n a feature_dark_mode kulcs:

⚡ Két klikk = élesben kapcsolja a feature-t a teljes felhasználói-bázisra, deploy nélkül.

🎯 Példa — A/B-teszt-csoport

Komplex eset: A/B-teszt ahol felhasználói-id alapján sorolod csoportba:

async function getABGroup(userId: string): Promise<"A" | "B"> {
  // Hash a userId-ből → 0-100 tartomány
  const hash = simpleHash(userId);
  const bucket = hash % 100;
  
  // KV-ből kérdezzük le, hogy mi az aktuális split
  const res = await fetch(
    "https://api.promnet.hu/api/edge-kv/cukraszda/ab_split_pct"
  );
  const data = await res.json();
  const splitPct = parseInt(data.value || "50");  // alapértelmezett 50/50
  
  return bucket < splitPct ? "A" : "B";
}

Az admin kapcsolóit állíthatja:

💰 A Pricing — mibe kerül?

A CF Workers KV ingyen-szintje bőkezű:

🇭🇺 Egy átlag-magyar SMB-weboldal éves szinten nem haladja meg ezt a keretet. Gyakorlatilag ingyenes.

A felső-szintben:

TételKöltség
Read (100k fölött)0.5 USD / 10M
Write (1k fölött)5 USD / 1M
Tárolás (1 GB fölött)0.5 USD / GB / hó

💡 Egy nagy magyar webshop (havi 100k látogató, mindegyik 5 read-et csinál) is havi 0-1 USD-be kerülne.

❌ Mire NEM jó?

Az Edge KV NEM alkalmas:

✅ A fő use-case: konfiguráció, feature-flag, statikus admin-szöveg. Ezekre ideális.

🔒 Biztonság

Az Edge KV-értékek publikusan elérhetőek a fetch-URL-en. Ne tedd KV-be:

Ami OK KV-be:

💡 Ha autentikációval védett értéket akarsz adni, a /api/edge-kv-private/ útvonal API-token-szel védett olvasásra is alkalmas. Részletek a /sugo/edge-kv oldalon.

🚀 Hogyan kezdj?

  1. /app/edge-kv → “Új namespace”
  2. Kulcs-érték beírása
  3. Frontend-ből fetch-eled a megjelenítendő helyen
  4. Az admin-formban változtatsz, a weboldalad azonnal frissül

A starter-egyenleg egy ingyenes namespace-t ad. Második és további namespace per-projekt opcionális.

🔮 Mi jön ezután?

A roadmapen:

🎯 Próbáld ki

/app/edge-kv — 5 perc, és működik. Kérdés: /community/cloud vagy /app/support.

Polyák Csaba

© 2026 PromNET — Polyák Csaba. ← Vissza a blog-ra

Hozzászólások

Betöltés…