M

MLOG

Lietuvių

Atraskite Next.js Edge Config: galingą sprendimą greitam ir efektyviam konfigūracijos paskirstymui visame pasaulyje. Sužinokite, kaip optimizuoti savo aplikaciją naudojant dinaminę konfigūraciją.

Next.js Edge Config: paprastas visuotinis konfigūracijos paskirstymas

Šiuolaikiniame sparčiai besivystančiame interneto svetainių kūrimo pasaulyje, personalizuotų ir dinamiškų patirčių teikimas vartotojams visame pasaulyje yra gyvybiškai svarbus. Next.js, populiari React karkaso sistema, siūlo tvirtą sprendimą našios ir mastelį keičiančios interneto programėlėms kurti. Viena iš pagrindinių jos funkcijų yra Edge Config – galingas įrankis, skirtas konfigūracijos valdymui ir visuotiniam paskirstymui „edge“ tinkle. Šiame tinklaraščio įraše pateikiamas išsamus vadovas, kaip suprasti ir naudoti Next.js Edge Config, siekiant optimizuoti jūsų programėlės našumą ir teikti pritaikytas patirtis pasaulinei auditorijai.

Kas yra Next.js Edge Config?

Next.js Edge Config yra visame pasaulyje paskirstyta, mažos delsos „raktas-reikšmė“ saugykla, specialiai sukurta konfigūracijos duomenims teikti Next.js Edge funkcijoms. Skirtingai nuo tradicinių duomenų bazių ar API, Edge Config yra optimizuota greičiui ir efektyvumui, leidžianti pasiekti konfigūracijos duomenis per milisekundes iš bet kurios pasaulio vietos. Tai leidžia dinamiškai koreguoti jūsų programėlės elgseną, remiantis konfigūracijos reikšmėmis, neaukojant našumo.

Galima tai įsivaizduoti kaip visame pasaulyje replikuotą JSON failą, kurį galite neįtikėtinai greitai užklausti iš Edge funkcijų. Dėl to jis idealiai tinka:

Kodėl verta naudoti Edge Config?

Štai pagrindiniai Next.js Edge Config naudojimo privalumai:

Kaip pradėti naudoti Edge Config

Štai žingsnis po žingsnio vadovas, kaip pradėti naudoti Next.js Edge Config:

1. Projekto paruošimas

Įsitikinkite, kad turite Next.js projektą. Jei ne, sukurkite jį naudodami:

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

2. Sukurkite Edge Config

Norint naudoti Edge Config, jums reikės Vercel paskyros. Prisijungę, pereikite į savo Vercel projektą ir sukurkite naują Edge Config. Suteikite jam aprašomąjį pavadinimą.

3. Įdiekite Edge Config SDK

Įdiekite @vercel/edge-config SDK savo Next.js projekte:

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

4. Konfigūruokite aplinkos kintamuosius

Jums reikės sukonfigūruoti EDGE_CONFIG aplinkos kintamąjį. Šio kintamojo reikšmę galite rasti Vercel prietaisų skydelyje savo Edge Config. Pridėkite jį į savo .env.local failą (arba į Vercel projekto nustatymus gamybinei aplinkai):

EDGE_CONFIG=your_edge_config_url

Svarbu: Niekada neįkelkite savo .env.local failo į repozitoriją. Gamybinėms aplinkoms naudokite Vercel aplinkos kintamųjų nustatymus.

5. Prieiga prie konfigūracijos reikšmių jūsų kode

Dabar galite pasiekti savo Edge Config reikšmes savo Next.js kode. Štai pavyzdys:

// 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>Funkcija įjungta!</p> : <p>Funkcija išjungta.</p>}
    </div>
  );
}

Šiame pavyzdyje mes gauname featureFlag ir welcomeMessage reikšmes iš Edge Config getServerSideProps funkcijoje. Šios reikšmės vėliau perduodamos kaip savybės (props) Home komponentui.

6. Konfigūracijos reikšmių atnaujinimas

Savo Edge Config reikšmes galite atnaujinti per Vercel prietaisų skydelį. Pakeitimai visame pasaulyje pasklinda per kelias milisekundes.

Pažangesni naudojimo atvejai ir pavyzdžiai

A/B testavimas su Edge Config

Edge Config puikiai tinka A/B testavimui. Galite apibrėžti konfigūracijos reikšmę, kuri nustato, kurią programėlės versiją pateikti vartotojui. Pavyzdžiui:

  1. Sukurkite Edge Config su raktu, pavadintu abTestGroup.
  2. Nustatykite reikšmę į A arba B.
  3. Savo Edge funkcijoje nuskaitykite abTestGroup reikšmę.
  4. Remdamiesi reikšme, pateikite A arba B versijos turinį.

Štai pavyzdys:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Tai yra A versija!';
  } else {
    content = 'Tai yra B versija!';
  }

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

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

Galite naudoti analizės įrankius, kad stebėtumėte kiekvienos versijos našumą ir nustatytumėte, kuri versija veikia geriau. Apsvarstykite tokius įrankius kaip „Google Analytics“, „Amplitude“ ar „Mixpanel“ išsamiam A/B testavimo duomenų rinkimui ir analizei.

Funkcionalumo vėliavėlės su Edge Config

Funkcionalumo vėliavėlės leidžia įjungti arba išjungti funkcijas nediegiant naujo kodo. Tai naudinga testuojant naujas funkcijas gamybinėje aplinkoje arba palaipsniui diegiant funkcijas daliai vartotojų. Panašiai kaip ir A/B testavime, galite valdyti funkcijų prieinamumą su paprasta loginės reikšmės (boolean) vėliavėle savo Edge Config.

  1. Sukurkite Edge Config su raktu, pavadintu newFeatureEnabled.
  2. Nustatykite reikšmę į true arba false.
  3. Savo Edge funkcijoje nuskaitykite newFeatureEnabled reikšmę.
  4. Remdamiesi reikšme, įjunkite arba išjunkite naują funkciją.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Nauja funkcija įjungta!</p> : <p>Nauja funkcija išjungta.</p>}
    </div>
  );
}

export default MyComponent;

Personalizavimas su Edge Config

Galite naudoti Edge Config personalizuoti turinį ir patirtis, remiantis vartotojo nuostatomis ar buvimo vieta. Pavyzdžiui, galite saugoti vartotojo nuostatas duomenų bazėje, o tada naudoti Edge Config, kad pateiktumėte skirtingą turinį, atsižvelgiant į tas nuostatas.

Pavyzdinis scenarijus: Pasaulinė el. prekybos svetainė nori rodyti produktų rekomendacijas pagal vartotojo šalį. Jie galėtų naudoti Edge Config, kad susietų šalis su rekomendacijų kategorijomis.

  1. Sukurkite Edge Config su raktu, pavadintu countryToCategoryMap.
  2. Nustatykite reikšmę į JSON objektą, kuris susieja šalis su produktų kategorijomis (pvz., {"US": "Elektronika", "GB": "Mada", "JP": "Namų prekės"}).
  3. Savo Edge funkcijoje nuskaitykite countryToCategoryMap reikšmę.
  4. Nustatykite vartotojo šalį (pvz., pagal jo IP adresą ar slapuką).
  5. Naudokite countryToCategoryMap, kad nustatytumėte tinkamą produkto kategoriją.
  6. Rodykite produktų rekomendacijas iš tos kategorijos.
// 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'; // Numatytoji reikšmė – JAV
  const category = countryToCategoryMap[country] || 'General'; // Numatytoji reikšmė – Bendra

  // Gauti produktų rekomendacijas pagal kategoriją
  const products = await fetchProducts(category);

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

export default function Products({ products }) {
  return (
    <div>
      <h1>Produktų rekomendacijos</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Pakeiskite savo tikrąja produktų gavimo logika
  return [
    { id: 1, name: `Produktas 1 (${category})` },
    { id: 2, name: `Produktas 2 (${category})` },
  ];
}

Šiame pavyzdyje naudojama x-vercel-ip-country antraštė vartotojo šaliai nustatyti. Šią antraštę automatiškai prideda Vercel. Svarbu pažymėti, kad pasikliauti vien IP pagrįsta geolokacija ne visada gali būti tikslu. Apsvarstykite galimybę naudoti kitus metodus, pvz., vartotojo pateiktą vietą ar sudėtingesnes geolokacijos paslaugas, siekiant didesnio tikslumo.

Geografinis maršrutizavimas su Edge Config

Galite nukreipti vartotojus į skirtingus resursus, atsižvelgiant į jų buvimo vietą, naudojant Edge Config. Tai naudinga teikiant lokalizuotą turinį arba laikantis regioninių taisyklių.

  1. Sukurkite Edge Config su raktu, pavadintu countryToRedirectMap.
  2. Nustatykite reikšmę į JSON objektą, kuris susieja šalis su URL adresais (pvz., {"CN": "/china", "DE": "/germany"}).
  3. Savo Edge funkcijoje nuskaitykite countryToRedirectMap reikšmę.
  4. Nustatykite vartotojo šalį (pvz., pagal jo IP adresą).
  5. Nukreipkite vartotoją į atitinkamą URL.
// 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'; // Numatytoji reikšmė – JAV
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Šiame pavyzdyje naudojama req.geo.country savybė, kurią Vercel Edge tinklas automatiškai užpildo vartotojo šalies kodu. Tai yra švaresnis ir patikimesnis būdas nei tiesioginis x-vercel-ip-country antraštės analizavimas. Tarpinės programinės įrangos (middleware) funkcija patikrina, ar Edge Config yra apibrėžtas nukreipimo URL vartotojo šaliai. Jei taip, ji nukreipia vartotoją į tą URL. Kitu atveju, ji tęsia užklausos apdorojimą.

Užklausų ribojimas su Edge Config

Nors Edge Config nėra sukurtas kaip visavertis užklausų ribojimo sprendimas, galite jį naudoti kartu su kitomis technikomis, kad įdiegtumėte pagrindinį užklausų ribojimą. Idėja yra saugoti užklausų ribojimo parametrus (pvz., užklausų skaičių per minutę) Edge Config ir tada naudoti tuos parametrus savo Edge funkcijose, kad būtų taikomi ribojimai.

Svarbi pastaba: Šis metodas tinka paprastiems užklausų ribojimo scenarijams. Norėdami patikimesnio užklausų ribojimo, apsvarstykite galimybę naudoti tam skirtas paslaugas ar tarpinę programinę įrangą.

  1. Sukurkite Edge Config su raktais, tokiais kaip requestsPerMinute ir blockedIps.
  2. Nustatykite requestsPerMinute reikšmę į norimą užklausų ribą.
  3. Nustatykite blockedIps reikšmę į IP adresų masyvą, kurie turėtų būti blokuojami.
  4. Savo Edge funkcijoje nuskaitykite requestsPerMinute ir blockedIps reikšmes.
  5. Patikrinkite, ar vartotojo IP adresas yra blockedIps masyve. Jei taip, blokuokite užklausą.
  6. Naudokite podėliavimo mechanizmą (pvz., Redis ar Vercel Edge Cache), kad stebėtumėte užklausų skaičių iš kiekvieno IP adreso per paskutinę minutę.
  7. Jei užklausų skaičius iš vartotojo IP adreso viršija requestsPerMinute ribą, blokuokite užklausą.

Pavyzdys (iliustracinis – reikalauja papildomo podėliavimo įgyvendinimo):

// 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; // Gauti vartotojo IP

  // Patikrinti, ar IP yra blokuojamas
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Per daug užklausų');
  }

  // TODO: Įdiegti užklausų skaičiavimą ir podėliavimą (pvz., naudojant Redis ar Vercel Edge Cache)
  // Pavyzdys (konceptualus):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Per daug užklausų');
  // }
  // await incrementRequestCount(ip);

  // Jūsų apsaugotos maršruto dalies logika čia
  res.status(200).send('Sėkmingai pasiekta apsaugota maršruto dalis!');
}

Svarbūs aspektai, susiję su užklausų ribojimu:

Geriausios Edge Config naudojimo praktikos

Edge Config alternatyvos

Nors Edge Config yra galingas įrankis, jis ne visada yra geriausias sprendimas kiekvienam naudojimo atvejui. Štai keletas alternatyvų, kurias verta apsvarstyti:

Išvada

Next.js Edge Config yra galingas įrankis, skirtas konfigūracijos valdymui ir visuotiniam paskirstymui „edge“ tinkle. Naudodami Edge Config, galite optimizuoti savo programėlės našumą, teikti personalizuotas patirtis ir supaprastinti konfigūracijos valdymo darbo eigą. Nesvarbu, ar kuriate pasaulinę el. prekybos svetainę, socialinės medijos platformą, ar bet kokio kito tipo interneto programėlę, Edge Config gali padėti jums teikti greitą ir įtraukiančią patirtį vartotojams visame pasaulyje. Ištirkite galimybes ir integruokite Edge Config į savo Next.js projektus jau šiandien, kad atskleistumėte jo potencialą!

Next.js Edge Config: paprastas visuotinis konfigūracijos paskirstymas | MLOG