M

MLOG

Latviešu

Izpētiet Next.js Edge Config: jaudīgu risinājumu konfigurācijas globālai izplatīšanai ar ātrumu un efektivitāti. Uzziniet, kā optimizēt savu lietotni ar dinamisku konfigurāciju.

Next.js Edge Config: Vienkāršota globālās konfigurācijas izplatīšana

Mūsdienu straujajā tīmekļa izstrādes vidē ir ļoti svarīgi nodrošināt personalizētu un dinamisku pieredzi lietotājiem visā pasaulē. Next.js, populārs React ietvars, piedāvā stabilu risinājumu veiktspējīgu un mērogojamu tīmekļa lietotņu izveidei. Viena no tā galvenajām funkcijām ir Edge Config – jaudīgs rīks konfigurācijas pārvaldībai un globālai izplatīšanai tīkla malā (edge). Šis emuāra ieraksts sniedz visaptverošu ceļvedi, kā izprast un izmantot Next.js Edge Config, lai optimizētu savas lietotnes veiktspēju un nodrošinātu pielāgotu pieredzi savai globālajai auditorijai.

Kas ir Next.js Edge Config?

Next.js Edge Config ir globāli izplatīta, zema latentuma atslēgas-vērtības krātuve, kas īpaši paredzēta konfigurācijas datu apkalpošanai Next.js Edge Functions. Atšķirībā no tradicionālajām datu bāzēm vai API, Edge Config ir optimizēts ātrumam un efektivitātei, ļaujot jums piekļūt konfigurācijas datiem milisekundēs no jebkuras vietas pasaulē. Tas ļauj dinamiski pielāgot lietotnes darbību, pamatojoties uz konfigurācijas vērtībām, nezaudējot veiktspēju.

Iedomājieties to kā globāli replicētu JSON failu, kuram varat neticami ātri piekļūt no Edge Functions. Tas padara to ideāli piemērotu:

Kāpēc izmantot Edge Config?

Šeit ir galvenās Next.js Edge Config priekšrocības:

Kā sākt darbu ar Edge Config

Šeit ir soli pa solim ceļvedis, kā sākt darbu ar Next.js Edge Config:

1. Projekta iestatīšana

Pārliecinieties, ka jums ir Next.js projekts. Ja nē, izveidojiet to, izmantojot:

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

2. Izveidojiet Edge Config

Lai izmantotu Edge Config, jums būs nepieciešams Vercel konts. Kad esat pieteicies, dodieties uz savu Vercel projektu un izveidojiet jaunu Edge Config. Piešķiriet tam aprakstošu nosaukumu.

3. Instalējiet Edge Config SDK

Instalējiet @vercel/edge-config SDK savā Next.js projektā:

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

4. Konfigurējiet vides mainīgos

Jums būs jākonfigurē EDGE_CONFIG vides mainīgais. Šī mainīgā vērtību varat atrast Vercel informācijas panelī savam Edge Config. Pievienojiet to savam .env.local failam (vai Vercel projekta iestatījumiem produkcijas videi):

EDGE_CONFIG=your_edge_config_url

Svarīgi: Nekad nepievienojiet savu .env.local failu repozitorijam. Produkcijas vidēm izmantojiet Vercel vides mainīgo iestatījumus.

5. Piekļuve konfigurācijas vērtībām kodā

Tagad jūs varat piekļūt savām Edge Config vērtībām savā Next.js kodā. Šeit ir piemērs:

// 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 ir ieslēgta!</p> : <p>Funkcija ir izslēgta.</p>}
    </div>
  );
}

Šajā piemērā mēs iegūstam featureFlag un welcomeMessage vērtības no Edge Config funkcijā getServerSideProps. Šīs vērtības pēc tam tiek nodotas kā rekvizīti (props) Home komponentei.

6. Konfigurācijas vērtību atjaunināšana

Jūs varat atjaunināt vērtības savā Edge Config, izmantojot Vercel informācijas paneli. Izmaiņas tiek izplatītas globāli dažu milisekunžu laikā.

Padziļināti lietošanas gadījumi un piemēri

A/B testēšana ar Edge Config

Edge Config ir ideāli piemērots A/B testēšanai. Jūs varat definēt konfigurācijas vērtību, kas nosaka, kuru lietotnes versiju pasniegt lietotājam. Piemēram:

  1. Izveidojiet Edge Config ar atslēgu abTestGroup.
  2. Iestatiet vērtību uz A vai B.
  3. Savā Edge Function nolasiet abTestGroup vērtību.
  4. Pamatojoties uz vērtību, pasniedziet vai nu A, vai B versijas saturu.

Šeit ir piemērs:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = 'Šī ir A versija!';
  } else {
    content = 'Šī ir B versija!';
  }

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

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

Jūs varat izmantot analītikas rīkus, lai sekotu katras versijas veiktspējai un noteiktu, kura versija darbojas labāk. Apsveriet tādus rīkus kā Google Analytics, Amplitude vai Mixpanel visaptverošai A/B testēšanas datu vākšanai un analīzei.

Funkciju karodziņi ar Edge Config

Funkciju karodziņi ļauj iespējot vai atspējot funkcijas, neizvietojot jaunu kodu. Tas ir noderīgi, lai testētu jaunas funkcijas produkcijā vai pakāpeniski ieviestu funkcijas noteiktai lietotāju daļai. Līdzīgi kā A/B testēšanā, jūs varat kontrolēt funkciju pieejamību ar vienkāršu Būla karodziņu savā Edge Config.

  1. Izveidojiet Edge Config ar atslēgu newFeatureEnabled.
  2. Iestatiet vērtību uz true vai false.
  3. Savā Edge Function nolasiet newFeatureEnabled vērtību.
  4. Pamatojoties uz vērtību, iespējojiet vai atspējojiet jauno funkciju.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>Jaunā funkcija ir ieslēgta!</p> : <p>Jaunā funkcija ir izslēgta.</p>}
    </div>
  );
}

export default MyComponent;

Personalizācija ar Edge Config

Jūs varat izmantot Edge Config, lai personalizētu saturu un pieredzi, pamatojoties uz lietotāja preferencēm vai atrašanās vietu. Piemēram, jūs varat glabāt lietotāja preferences datu bāzē un pēc tam izmantot Edge Config, lai pasniegtu atšķirīgu saturu, pamatojoties uz šīm preferencēm.

Piemēra scenārijs: Globāla e-komercijas vietne vēlas rādīt produktu ieteikumus, pamatojoties uz lietotāja valsti. Viņi varētu izmantot Edge Config, lai kartētu valstis ar ieteikumu kategorijām.

  1. Izveidojiet Edge Config ar atslēgu countryToCategoryMap.
  2. Iestatiet vērtību uz JSON objektu, kas kartē valstis ar produktu kategorijām (piem., {"US": "Elektronika", "GB": "Mode", "JP": "Mājas preces"}).
  3. Savā Edge Function nolasiet countryToCategoryMap vērtību.
  4. Nosakiet lietotāja valsti (piem., no viņu IP adreses vai sīkdatnes).
  5. Izmantojiet countryToCategoryMap, lai noteiktu atbilstošo produktu kategoriju.
  6. Rādiet produktu ieteikumus no šīs kategorijas.
// 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'; // Noklusējums uz ASV
  const category = countryToCategoryMap[country] || 'General'; // Noklusējums uz Vispārīgi

  // Iegūstiet produktu ieteikumus, pamatojoties uz kategoriju
  const products = await fetchProducts(category);

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

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

async function fetchProducts(category) {
  // Aizstājiet ar savu faktisko produktu iegūšanas loģiku
  return [
    { id: 1, name: `Produkts 1 (${category})` },
    { id: 2, name: `Produkts 2 (${category})` },
  ];
}

Šis piemērs izmanto x-vercel-ip-country galveni, lai noteiktu lietotāja valsti. Šo galveni automātiski pievieno Vercel. Ir svarīgi atzīmēt, ka paļaušanās tikai uz IP balstītu ģeolokāciju ne vienmēr var būt precīza. Uzlabotai precizitātei apsveriet citas metodes, piemēram, lietotāja norādīto atrašanās vietu vai sarežģītākus ģeolokācijas pakalpojumus.

Ģeogrāfiskā maršrutēšana ar Edge Config

Jūs varat novirzīt lietotājus uz dažādiem resursiem, pamatojoties uz viņu atrašanās vietu, izmantojot Edge Config. Tas ir noderīgi, lai pasniegtu lokalizētu saturu vai ievērotu reģionālos noteikumus.

  1. Izveidojiet Edge Config ar atslēgu countryToRedirectMap.
  2. Iestatiet vērtību uz JSON objektu, kas kartē valstis ar URL (piem., {"CN": "/china", "DE": "/germany"}).
  3. Savā Edge Function nolasiet countryToRedirectMap vērtību.
  4. Nosakiet lietotāja valsti (piem., no viņu IP adreses).
  5. Novirziet lietotāju uz atbilstošo 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'; // Noklusējums uz ASV
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

Šis piemērs izmanto req.geo.country īpašību, kuru Vercel Edge Network automātiski aizpilda ar lietotāja valsts kodu. Šī ir tīrāka un uzticamāka pieeja nekā tieša x-vercel-ip-country galvenes parsēšana. Starpniekprogrammatūras funkcija pārbauda, vai Edge Config ir definēts novirzīšanas URL lietotāja valstij. Ja tā, tas novirza lietotāju uz šo URL. Pretējā gadījumā tas turpina apstrādāt pieprasījumu.

Ātruma ierobežošana ar Edge Config

Lai gan Edge Config nav paredzēts kā pilnvērtīgs ātruma ierobežošanas risinājums, jūs to varat izmantot kopā ar citām metodēm, lai ieviestu pamata ātruma ierobežošanu. Ideja ir uzglabāt ātruma ierobežošanas parametrus (piem., pieprasījumi minūtē) Edge Config un pēc tam izmantot šos parametrus savās Edge Functions, lai ieviestu ātruma ierobežojumus.

Svarīga piezīme: Šī pieeja ir piemērota vienkāršiem ātruma ierobežošanas scenārijiem. Lai nodrošinātu stabilāku ātruma ierobežošanu, apsveriet specializētu ātruma ierobežošanas pakalpojumu vai starpniekprogrammatūras izmantošanu.

  1. Izveidojiet Edge Config ar atslēgām, piemēram, requestsPerMinute un blockedIps.
  2. Iestatiet requestsPerMinute vērtību uz vēlamo ātruma ierobežojumu.
  3. Iestatiet blockedIps vērtību uz IP adrešu masīvu, kas būtu jābloķē.
  4. Savā Edge Function nolasiet requestsPerMinute un blockedIps vērtības.
  5. Pārbaudiet, vai lietotāja IP adrese ir blockedIps masīvā. Ja tā, bloķējiet pieprasījumu.
  6. Izmantojiet kešatmiņas mehānismu (piem., Redis vai Vercel Edge Cache), lai sekotu pieprasījumu skaitam no katras IP adreses pēdējās minūtes laikā.
  7. Ja pieprasījumu skaits no lietotāja IP adreses pārsniedz requestsPerMinute limitu, bloķējiet pieprasījumu.

Piemērs (ilustratīvs - nepieciešama papildu implementācija kešatmiņai):

// 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; // Iegūstiet lietotāja IP

  // Pārbaudiet, vai IP ir bloķēts
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Ieviest pieprasījumu skaitīšanu un kešošanu (piem., izmantojot Redis vai Vercel Edge Cache)
  // Piemērs (konceptuāls):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Jūsu aizsargātā maršruta loģika šeit
  res.status(200).send('Aizsargātais maršruts veiksmīgi sasniegts!');
}

Svarīgi apsvērumi ātruma ierobežošanai:

Labākā prakse Edge Config izmantošanai

Edge Config alternatīvas

Lai gan Edge Config ir jaudīgs rīks, tas ne vienmēr ir labākais risinājums katram lietošanas gadījumam. Šeit ir dažas alternatīvas, ko apsvērt:

Noslēgums

Next.js Edge Config ir jaudīgs rīks konfigurācijas pārvaldībai un globālai izplatīšanai tīkla malā. Izmantojot Edge Config, jūs varat optimizēt savas lietotnes veiktspēju, nodrošināt personalizētu pieredzi un vienkāršot konfigurācijas pārvaldības darbplūsmu. Neatkarīgi no tā, vai veidojat globālu e-komercijas vietni, sociālo mediju platformu vai jebkura cita veida tīmekļa lietotni, Edge Config var palīdzēt jums nodrošināt ātru un saistošu pieredzi lietotājiem visā pasaulē. Izpētiet iespējas un integrējiet Edge Config savos Next.js projektos jau šodien, lai atraisītu tā potenciālu!