M

MLOG

Magyar

Ismerje meg a Next.js Edge Configot: egy hatékony megoldást a konfiguráció globális, gyors és hatékony elosztására. Tanulja meg, hogyan optimalizálhatja alkalmazását dinamikus konfigurációval az edge hálózaton.

Next.js Edge Config: Globális Konfiguráció Elosztása Egyszerűen

A mai rohanó webfejlesztési világban kulcsfontosságú, hogy személyre szabott és dinamikus élményt nyújtsunk a felhasználóknak világszerte. A Next.js, egy népszerű React keretrendszer, robusztus megoldást kínál a nagy teljesítményű és skálázható webalkalmazások készítésére. Egyik kulcsfontosságú funkciója az Edge Config, egy hatékony eszköz a konfiguráció globális kezelésére és elosztására az edge hálózaton. Ez a blogbejegyzés átfogó útmutatót nyújt a Next.js Edge Config megértéséhez és használatához, hogy optimalizálhassa alkalmazása teljesítményét és személyre szabott élményeket nyújthasson globális közönségének.

Mi az a Next.js Edge Config?

A Next.js Edge Config egy globálisan elosztott, alacsony késleltetésű kulcs-érték tároló, amelyet kifejezetten a konfigurációs adatok Next.js Edge Functions számára történő kiszolgálására terveztek. A hagyományos adatbázisokkal vagy API-kkal ellentétben az Edge Config a sebességre és a hatékonyságra van optimalizálva, lehetővé téve a konfigurációs adatokhoz való ezredmásodperces hozzáférést a világ bármely pontjáról. Ez lehetővé teszi, hogy dinamikusan módosítsa alkalmazása viselkedését a konfigurációs értékek alapján, a teljesítmény feláldozása nélkül.

Gondoljon rá úgy, mint egy globálisan replikált JSON fájlra, amelyet hihetetlenül gyorsan lekérdezhet az Edge Functions-ből. Ez ideálissá teszi a következőkre:

Miért használja az Edge Configot?

Íme a Next.js Edge Config használatának legfőbb előnyei:

Hogyan kezdjen hozzá az Edge Config használatához?

Íme egy lépésről-lépésre útmutató a Next.js Edge Config használatának megkezdéséhez:

1. Projekt beállítása

Győződjön meg róla, hogy van egy Next.js projektje. Ha nincs, hozzon létre egyet a következő paranccsal:

npx create-next-app@latest my-app
cd my-app

2. Edge Config létrehozása

Az Edge Config használatához Vercel fiókra lesz szüksége. Miután bejelentkezett, navigáljon a Vercel projektjéhez, és hozzon létre egy új Edge Configot. Adjon neki egy leíró nevet.

3. Az Edge Config SDK telepítése

Telepítse a @vercel/edge-config SDK-t a Next.js projektjében:

npm install @vercel/edge-config
# vagy
yarn add @vercel/edge-config
# vagy
pnpm install @vercel/edge-config

4. Környezeti változók konfigurálása

Konfigurálnia kell az EDGE_CONFIG környezeti változót. Ennek a változónak az értékét a Vercel irányítópultján találja az Edge Configjához. Adja hozzá a .env.local fájljához (vagy éles környezetben a Vercel projekt beállításaihoz):

EDGE_CONFIG=your_edge_config_url

Fontos: Soha ne kötelezze el (commit) a .env.local fájlt a repository-jába. Használja a Vercel környezeti változó beállításait az éles (production) környezetekhez.

5. Konfigurációs értékek elérése a kódban

Most már hozzáférhet az Edge Config értékeihez a Next.js kódjában. Íme egy példa:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>A funkció engedélyezve van!</p> : <p>A funkció le van tiltva.</p>}
    </div>
  );
}

Ebben a példában a featureFlag és a welcomeMessage értékeit kérjük le az Edge Configból a getServerSideProps függvényben. Ezeket az értékeket azután prop-ként adjuk át a Home komponensnek.

6. Konfigurációs értékek frissítése

Az Edge Config értékeit a Vercel irányítópultján keresztül frissítheti. A változások ezredmásodperceken belül globálisan propagálódnak.

Haladó felhasználási esetek és példák

A/B tesztelés Edge Configgal

Az Edge Config tökéletes az A/B teszteléshez. Definiálhat egy konfigurációs értéket, amely meghatározza, hogy az alkalmazás melyik verzióját kell kiszolgálni a felhasználónak. Például:

  1. Hozzon létre egy Edge Configot egy abTestGroup nevű kulccsal.
  2. Állítsa az értékét A-ra vagy B-re.
  3. Az Edge Function-ben olvassa be az abTestGroup értékét.
  4. Az érték alapján szolgálja ki a tartalom A vagy B verzióját.

Íme egy példa:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'Ez az A verzió!';
  } else {
    content = 'Ez a B verzió!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Teszt</h1>
      <p>{content}</p>
    </div>
  );
}

Használhat analitikai eszközöket az egyes verziók teljesítményének nyomon követésére, és meghatározhatja, hogy melyik verzió teljesít jobban. Fontolja meg olyan eszközök használatát, mint a Google Analytics, az Amplitude vagy a Mixpanel az átfogó A/B tesztelési adatgyűjtéshez és elemzéshez.

Feature Flag-ek Edge Configgal

A feature flag-ek (funkciókapcsolók) lehetővé teszik a funkciók engedélyezését vagy letiltását új kód telepítése nélkül. Ez hasznos új funkciók éles környezetben történő teszteléséhez vagy a funkciók fokozatos bevezetéséhez a felhasználók egy részhalmaza számára. Hasonlóan az A/B teszteléshez, a funkciók elérhetőségét egy egyszerű logikai (boolean) kapcsolóval vezérelheti az Edge Configban.

  1. Hozzon létre egy Edge Configot egy newFeatureEnabled nevű kulccsal.
  2. Állítsa az értékét true-ra vagy false-ra.
  3. Az Edge Function-ben olvassa be a newFeatureEnabled értékét.
  4. Az érték alapján engedélyezze vagy tiltsa le az új funkciót.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>Az új funkció engedélyezve van!</p> : <p>Az új funkció le van tiltva.</p>}
    </div>
  );
}

export default MyComponent;

Személyre szabás Edge Configgal

Az Edge Configot használhatja a tartalom és az élmények személyre szabására a felhasználói preferenciák vagy a hely alapján. Például tárolhatja a felhasználói preferenciákat egy adatbázisban, majd az Edge Config segítségével különböző tartalmakat szolgálhat ki ezen preferenciák alapján.

Példa forgatókönyv: Egy globális e-kereskedelmi oldal termékajánlásokat szeretne megjeleníteni a felhasználó országa alapján. Használhatnának egy Edge Configot az országok és az ajánlási kategóriák összerendelésére.

  1. Hozzon létre egy Edge Configot egy countryToCategoryMap nevű kulccsal.
  2. Állítsa az értékét egy JSON objektumra, amely országokat rendel termékkategóriákhoz (pl. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Az Edge Function-ben olvassa be a countryToCategoryMap értékét.
  4. Határozza meg a felhasználó országát (pl. az IP-címéből vagy egy cookie-ból).
  5. Használja a countryToCategoryMap-ot a megfelelő termékkategória meghatározásához.
  6. Jelenítsen meg termékajánlásokat abból a kategóriából.
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Alapértelmezett: US
  const category = countryToCategoryMap[country] || 'General'; // Alapértelmezett: General

  // Termékajánlások lekérése a kategória alapján
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Termékajánlások</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Cserélje le a saját terméklekérési logikájával
  return [
    { id: 1, name: `1. termék (${category})` },
    { id: 2, name: `2. termék (${category})` },
  ];
}

Ez a példa az x-vercel-ip-country fejlécet használja a felhasználó országának meghatározására. Ezt a fejlécet a Vercel automatikusan hozzáadja. Fontos megjegyezni, hogy a kizárólag IP-alapú földrajzi helymeghatározásra való támaszkodás nem mindig lehet pontos. Fontolja meg más módszerek, például a felhasználó által megadott hely vagy kifinomultabb geolokációs szolgáltatások használatát a nagyobb pontosság érdekében.

Földrajzi útválasztás Edge Configgal

Az Edge Config segítségével a felhasználókat a tartózkodási helyük alapján különböző erőforrásokhoz irányíthatja. Ez hasznos lokalizált tartalom kiszolgálásához vagy a regionális szabályozásoknak való megfeleléshez.

  1. Hozzon létre egy Edge Configot egy countryToRedirectMap nevű kulccsal.
  2. Állítsa az értékét egy JSON objektumra, amely országokat rendel URL-ekhez (pl. {"CN": "/china", "DE": "/germany"}).
  3. Az Edge Function-ben olvassa be a countryToRedirectMap értékét.
  4. Határozza meg a felhasználó országát (pl. az IP-címéből).
  5. Irányítsa át a felhasználót a megfelelő URL-re.
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Alapértelmezett: US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

Ez a példa a req.geo.country tulajdonságot használja, amelyet a Vercel Edge hálózata automatikusan feltölt a felhasználó országkódjával. Ez egy tisztább és megbízhatóbb megközelítés, mint az x-vercel-ip-country fejléc közvetlen elemzése. A middleware funkció ellenőrzi, hogy van-e átirányítási URL definiálva a felhasználó országához az Edge Configban. Ha igen, átirányítja a felhasználót arra az URL-re. Ellenkező esetben folytatja a kérés feldolgozását.

Rate Limiting (sebességkorlátozás) Edge Configgal

Bár az Edge Config nem egy teljes értékű sebességkorlátozó megoldás, más technikákkal együtt használva alapvető sebességkorlátozást valósíthat meg vele. Az ötlet az, hogy a sebességkorlátozási paramétereket (pl. percenkénti kérések száma) az Edge Configban tárolja, majd ezeket a paramétereket használja az Edge Functions-ben a korlátok érvényesítésére.

Fontos megjegyzés: Ez a megközelítés egyszerű sebességkorlátozási forgatókönyvekre alkalmas. Robusztusabb sebességkorlátozáshoz fontolja meg dedikált sebességkorlátozó szolgáltatások vagy middleware-ek használatát.

  1. Hozzon létre egy Edge Configot olyan kulcsokkal, mint a requestsPerMinute és a blockedIps.
  2. Állítsa a requestsPerMinute értékét a kívánt sebességkorlátra.
  3. Állítsa a blockedIps értékét a blokkolandó IP-címek tömbjére.
  4. Az Edge Function-ben olvassa be a requestsPerMinute és blockedIps értékeket.
  5. Ellenőrizze, hogy a felhasználó IP-címe szerepel-e a blockedIps tömbben. Ha igen, blokkolja a kérést.
  6. Használjon egy gyorsítótárazási mechanizmust (pl. Redis vagy Vercel Edge Cache) az egyes IP-címekről az elmúlt percben érkezett kérések számának nyomon követésére.
  7. Ha a felhasználó IP-címéről érkező kérések száma meghaladja a requestsPerMinute korlátot, blokkolja a kérést.

Példa (Szemléltető - további implementációt igényel a gyorsítótárazáshoz):

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Felhasználó IP-címének lekérése

  // Ellenőrizze, hogy az IP blokkolva van-e
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implementálja a kérésszámlálást és a gyorsítótárazást (pl. Redis vagy Vercel Edge Cache használatával)
  // Példa (Koncepcionális):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // A védett útvonal logikája itt
  res.status(200).send('Védett útvonal sikeresen elérve!');
}

Fontos megfontolások a sebességkorlátozáshoz:

Bevált gyakorlatok az Edge Config használatához

Alternatívák az Edge Config helyett

Bár az Edge Config egy hatékony eszköz, nem mindig a legjobb megoldás minden felhasználási esetre. Íme néhány alternatíva, amit érdemes megfontolni:

Összegzés

A Next.js Edge Config egy hatékony eszköz a konfiguráció globális kezelésére és elosztására az edge hálózaton. Az Edge Config kihasználásával optimalizálhatja alkalmazása teljesítményét, személyre szabott élményeket nyújthat, és egyszerűsítheti a konfigurációkezelési munkafolyamatot. Akár egy globális e-kereskedelmi oldalt, egy közösségi média platformot vagy bármilyen más típusú webalkalmazást épít, az Edge Config segíthet gyors és lebilincselő élményt nyújtani a felhasználóknak világszerte. Fedezze fel a lehetőségeket, és integrálja az Edge Configot a Next.js projektjeibe még ma, hogy kiaknázza a benne rejlő potenciált!