M

MLOG

한국어

Next.js Edge Config를 살펴보세요: 빠르고 효율적으로 설정을 전역으로 배포하는 강력한 솔루션입니다. 엣지에서 동적 설정으로 애플리케이션을 최적화하는 방법을 알아보세요.

Next.js Edge Config: 간편해진 전역 설정 배포

오늘날 빠르게 변화하는 웹 개발 환경에서 전 세계 사용자에게 개인화되고 동적인 경험을 제공하는 것은 매우 중요합니다. 인기 있는 React 프레임워크인 Next.js는 성능이 뛰어나고 확장 가능한 웹 애플리케이션을 구축하기 위한 강력한 솔루션을 제공합니다. 그 핵심 기능 중 하나는 Edge Config로, 엣지에서 전역적으로 설정을 관리하고 배포하는 강력한 도구입니다. 이 블로그 게시물은 Next.js Edge Config를 이해하고 활용하여 애플리케이션의 성능을 최적화하고 전 세계 고객에게 맞춤형 경험을 제공하는 방법에 대한 포괄적인 가이드를 제공합니다.

Next.js Edge Config란 무엇인가?

Next.js Edge Config는 Next.js 엣지 함수에 설정 데이터를 제공하기 위해 특별히 설계된 전역적으로 분산된 저지연 키-값 저장소입니다. 기존 데이터베이스나 API와 달리 Edge Config는 속도와 효율성에 최적화되어 있어 전 세계 어디에서나 밀리초 단위로 설정 데이터에 접근할 수 있습니다. 이를 통해 성능 저하 없이 설정 값에 따라 애플리케이션의 동작을 동적으로 조정할 수 있습니다.

엣지 함수에서 매우 빠르게 쿼리할 수 있는 전역적으로 복제된 JSON 파일이라고 생각하면 됩니다. 이는 다음과 같은 경우에 이상적입니다:

Edge Config를 사용하는 이유

Next.js Edge Config 사용의 주요 이점은 다음과 같습니다:

Edge Config 시작하는 방법

Next.js Edge Config를 시작하기 위한 단계별 가이드는 다음과 같습니다:

1. 프로젝트 설정

Next.js 프로젝트가 있는지 확인하세요. 없다면 다음을 사용하여 생성하세요:

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

2. Edge Config 생성

Edge Config를 사용하려면 Vercel 계정이 필요합니다. 로그인한 후 Vercel 프로젝트로 이동하여 새 Edge Config를 생성하세요. 설명적인 이름을 지정하세요.

3. Edge Config SDK 설치

Next.js 프로젝트에 @vercel/edge-config SDK를 설치하세요:

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

4. 환경 변수 설정

EDGE_CONFIG 환경 변수를 설정해야 합니다. 이 변수의 값은 Edge Config의 Vercel 대시보드에서 찾을 수 있습니다. .env.local 파일에 추가하거나 프로덕션을 위해 Vercel 프로젝트 설정에 추가하세요:

EDGE_CONFIG=your_edge_config_url

중요: .env.local 파일을 리포지토리에 절대 커밋하지 마세요. 프로덕션 환경에서는 Vercel의 환경 변수 설정을 사용하세요.

5. 코드에서 설정 값 접근하기

이제 Next.js 코드에서 Edge Config 값에 접근할 수 있습니다. 다음은 예제입니다:

// 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>기능이 활성화되었습니다!</p> : <p>기능이 비활성화되었습니다.</p>}
    </div>
  );
}

이 예제에서는 getServerSideProps에서 Edge Config의 featureFlag와 welcomeMessage 값을 가져옵니다. 이 값들은 Home 컴포넌트에 props로 전달됩니다.

6. 설정 값 업데이트하기

Vercel 대시보드를 통해 Edge Config의 값을 업데이트할 수 있습니다. 변경 사항은 밀리초 내에 전역으로 전파됩니다.

고급 사용 사례 및 예제

Edge Config를 사용한 A/B 테스팅

Edge Config는 A/B 테스팅에 완벽합니다. 사용자에게 제공할 애플리케이션 버전을 결정하는 설정 값을 정의할 수 있습니다. 예를 들어:

  1. abTestGroup이라는 키를 가진 Edge Config를 생성합니다.
  2. 값을 A 또는 B로 설정합니다.
  3. 엣지 함수에서 abTestGroup 값을 읽습니다.
  4. 값에 따라 콘텐츠의 A 버전 또는 B 버전을 제공합니다.

다음은 예제입니다:

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

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

  let content;
  if (abTestGroup === 'A') {
    content = '이것은 A 버전입니다!';
  } else {
    content = '이것은 B 버전입니다!';
  }

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

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

분석 도구를 사용하여 각 버전의 성능을 추적하고 어떤 버전이 더 나은 성과를 내는지 결정할 수 있습니다. 포괄적인 A/B 테스팅 데이터 수집 및 분석을 위해 Google Analytics, Amplitude 또는 Mixpanel과 같은 도구를 고려해보세요.

Edge Config를 사용한 기능 플래그

기능 플래그를 사용하면 새 코드를 배포하지 않고도 기능을 활성화하거나 비활성화할 수 있습니다. 이는 프로덕션 환경에서 새로운 기능을 테스트하거나 사용자 일부에게 점진적으로 기능을 배포할 때 유용합니다. A/B 테스팅과 유사하게 Edge Config의 간단한 불리언 플래그로 기능 가용성을 제어할 수 있습니다.

  1. newFeatureEnabled라는 키를 가진 Edge Config를 생성합니다.
  2. 값을 true 또는 false로 설정합니다.
  3. 엣지 함수에서 newFeatureEnabled 값을 읽습니다.
  4. 값에 따라 새 기능을 활성화하거나 비활성화합니다.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

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

  return (
    <div>
      {newFeatureEnabled ? <p>새 기능이 활성화되었습니다!</p> : <p>새 기능이 비활성화되었습니다.</p>}
    </div>
  );
}

export default MyComponent;

Edge Config를 사용한 개인화

Edge Config를 사용하여 사용자 선호도나 위치에 따라 콘텐츠와 경험을 개인화할 수 있습니다. 예를 들어, 사용자 선호도를 데이터베이스에 저장한 다음 Edge Config를 사용하여 해당 선호도에 따라 다른 콘텐츠를 제공할 수 있습니다.

예제 시나리오: 글로벌 전자상거래 사이트가 사용자의 국가에 따라 제품 추천을 표시하려고 합니다. Edge Config를 사용하여 국가를 추천 카테고리에 매핑할 수 있습니다.

  1. countryToCategoryMap이라는 키를 가진 Edge Config를 생성합니다.
  2. 값을 국가와 제품 카테고리를 매핑하는 JSON 객체로 설정합니다 (예: {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. 엣지 함수에서 countryToCategoryMap 값을 읽습니다.
  4. 사용자의 국가를 결정합니다 (예: IP 주소 또는 쿠키에서).
  5. countryToCategoryMap을 사용하여 적절한 제품 카테고리를 결정합니다.
  6. 해당 카테고리의 제품 추천을 표시합니다.
// 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'; // 기본값 US
  const category = countryToCategoryMap[country] || 'General'; // 기본값 General

  // 카테고리를 기반으로 제품 추천 가져오기
  const products = await fetchProducts(category);

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

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

async function fetchProducts(category) {
  // 실제 제품 가져오기 로직으로 교체하세요
  return [
    { id: 1, name: `제품 1 (${category})` },
    { id: 2, name: `제품 2 (${category})` },
  ];
}

이 예제는 x-vercel-ip-country 헤더를 사용하여 사용자의 국가를 결정합니다. 이 헤더는 Vercel에 의해 자동으로 추가됩니다. IP 기반 지역 정보에만 의존하는 것은 항상 정확하지 않을 수 있다는 점에 유의해야 합니다. 정확도를 높이려면 사용자가 제공한 위치나 더 정교한 지역 정보 서비스를 사용하는 등 다른 방법을 고려하세요.

Edge Config를 사용한 지역별 라우팅

Edge Config를 사용하여 사용자의 위치에 따라 다른 리소스로 라우팅할 수 있습니다. 이는 현지화된 콘텐츠를 제공하거나 지역 규정을 준수하는 데 유용합니다.

  1. countryToRedirectMap이라는 키를 가진 Edge Config를 생성합니다.
  2. 값을 국가와 URL을 매핑하는 JSON 객체로 설정합니다 (예: {"CN": "/china", "DE": "/germany"}).
  3. 엣지 함수에서 countryToRedirectMap 값을 읽습니다.
  4. 사용자의 국가를 결정합니다 (예: IP 주소에서).
  5. 사용자를 적절한 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'; // 기본값 US
  const redirectUrl = countryToRedirectMap[country];

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

  return NextResponse.next()
}

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

이 예제는 Vercel의 엣지 네트워크에 의해 사용자의 국가 코드로 자동 채워지는 req.geo.country 속성을 사용합니다. 이것은 x-vercel-ip-country 헤더를 직접 파싱하는 것보다 더 깔끔하고 신뢰할 수 있는 접근 방식입니다. 미들웨어 함수는 Edge Config에 사용자의 국가에 대한 리디렉션 URL이 정의되어 있는지 확인합니다. 만약 그렇다면 사용자를 해당 URL로 리디렉션합니다. 그렇지 않으면 요청 처리를 계속합니다.

Edge Config를 사용한 속도 제한

Edge Config는 완전한 속도 제한 솔루션으로 설계되지는 않았지만, 다른 기술과 함께 사용하여 기본적인 속도 제한을 구현할 수 있습니다. 아이디어는 속도 제한 매개변수(예: 분당 요청 수)를 Edge Config에 저장한 다음, 엣지 함수에서 해당 매개변수를 사용하여 속도 제한을 적용하는 것입니다.

중요 참고: 이 접근 방식은 간단한 속도 제한 시나리오에 적합합니다. 더 강력한 속도 제한을 위해서는 전용 속도 제한 서비스나 미들웨어를 사용하는 것을 고려하세요.

  1. requestsPerMinute와 blockedIps와 같은 키를 가진 Edge Config를 생성합니다.
  2. requestsPerMinute 값을 원하는 속도 제한으로 설정합니다.
  3. blockedIps 값을 차단해야 할 IP 주소 배열로 설정합니다.
  4. 엣지 함수에서 requestsPerMinute와 blockedIps 값을 읽습니다.
  5. 사용자의 IP 주소가 blockedIps 배열에 있는지 확인합니다. 그렇다면 요청을 차단합니다.
  6. 캐싱 메커니즘(예: Redis 또는 Vercel의 Edge Cache)을 사용하여 지난 1분 동안 각 IP 주소의 요청 수를 추적합니다.
  7. 사용자의 IP 주소로부터의 요청 수가 requestsPerMinute 제한을 초과하면 요청을 차단합니다.

예제 (설명용 - 캐싱을 위한 추가 구현 필요):

// 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; // 사용자 IP 가져오기

  // IP가 차단되었는지 확인
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: 요청 수 계산 및 캐싱 구현 (예: Redis 또는 Vercel Edge Cache 사용)
  // 예제 (개념적):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // 보호된 라우트 로직
  res.status(200).send('Protected route accessed successfully!');
}

속도 제한에 대한 중요 고려사항:

Edge Config 사용을 위한 모범 사례

Edge Config의 대안

Edge Config는 강력한 도구이지만 모든 사용 사례에 항상 최상의 솔루션은 아닙니다. 고려해 볼 만한 몇 가지 대안은 다음과 같습니다:

결론

Next.js Edge Config는 엣지에서 전역적으로 설정을 관리하고 배포하는 강력한 도구입니다. Edge Config를 활용하여 애플리케이션의 성능을 최적화하고, 개인화된 경험을 제공하며, 설정 관리 워크플로우를 단순화할 수 있습니다. 글로벌 전자상거래 사이트, 소셜 미디어 플랫폼 또는 다른 유형의 웹 애플리케이션을 구축하든, Edge Config는 전 세계 사용자에게 빠르고 매력적인 경험을 제공하는 데 도움이 될 수 있습니다. 가능성을 탐색하고 오늘 Next.js 프로젝트에 Edge Config를 통합하여 그 잠재력을 발휘해 보세요!