Next.js Edge Functions 사용법: 성능 향상과 보안 강화

작성일 : 2024-07-17

Next.js Edge Functions 사용법: 성능 향상과 보안 강화

Next.js와 Edge Functions 개요

Next.js는 React 기반의 프레임워크로서 서버 사이드 렌더링(Server-Side Rendering, SSR)과 정적 사이트 생성(Static Site Generation, SSG) 기능을 제공합니다. 이는 성능 최적화와 SEO(검색 엔진 최적화) 측면에서 강력한 도구입니다. 여기서 Edge Functions는 콘텐츠 배포 네트워크(Content Delivery Network, CDN)의 엣지 서버에서 코드를 실행할 수 있게 해주는 기능을 말합니다. 이를 통해 사용자는 서로 다른 지역에 위치한 사용자에게 더 빠르게 콘텐츠를 전달할 수 있습니다.

Next.js Edge Functions의 장점

성능 향상

Edge Functions를 사용하면 요청을 엣지 서버에서 직접 처리할 수 있으므로 응답 시간을 줄이고 서버 부하를 줄일 수 있습니다. 예를 들어 getServerSideProps를 엣지에서 실행하면 사용자에게 더 빠른 응답을 제공할 수 있습니다.

보안 강화

엣지 서버에서 코드를 실행하므로, 사용자 요청이 원본 서버에 도달하기 전에 필터링하거나 변형할 수 있습니다. 이는 기본적인 보안 강화를 제공하며, 특히 공격 방지와 데이터 검증에 유용합니다.

Edge Functions 설정 방법

프로젝트 초기화

먼저 Next.js 프로젝트를 초기화합니다. 이미 프로젝트가 있다면 다음 단계를 건너뛰어도 좋습니다.


bash
npx create-next-app@latest next-edge-functions-example
cd next-edge-functions-example

Edge Functions 추가

Next.js 12 버전 이상부터 Edge API Routes를 정의할 수 있습니다. 이를 위해 pages/api 디렉터리에 파일을 생성합니다.

먼저 pages/api/edge-function.js 파일을 생성합니다:


javascript
export const config = {
  runtime: 'edge'
};

export default async function handler(req) {
  return new Response(JSON.stringify({ message: 'Hello from the Edge!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

위 코드는 Edge Runtime에서 실행될 함수를 정의하는 예제입니다. config 객체의 runtime을 edge로 설정하면 이 함수가 엣지 서버에서 실행됩니다.

Edge Functions와 일반 API Routes 비교

일반적인 API Routes와 비교했을 때, Edge Functions는 다음과 같은 차이점이 있습니다:

Edge Functions는 Lambda@Edge와 같은 엣지 서버에서 실행되며, 이는 전세계 여러 엣지 서버에 배포될 수 있습니다.
Edge Functions는 Node.js 환경이 아닌 Web Standards와 유사한 환경에서 실행되기 때문에 일부 Node.js 모듈을 사용할 수 없습니다.

실습: 사용자 요청을 필터링하기

이제 사용자 요청을 필터링하는 간단한 예제를 구현해보겠습니다. 예를 들어, 특정 IP 주소에서 오는 요청을 차단하는 코드를 작성할 수 있습니다.

pages/api/ip-filter.js 파일을 생성하고 다음 코드를 입력합니다:


javascript
export const config = {
  runtime: 'edge'
};

const blockedIPs = ['123.456.789.0'];

export default async function handler(req) {
  const clientIP = req.headers.get('x-forwarded-for');

  if (blockedIPs.includes(clientIP)) {
    return new Response('Forbidden', { status: 403 });
  }

  return new Response(JSON.stringify({ message: 'Access Granted' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

이 코드는 특정 IP 주소에서 오는 요청을 차단하고, 차단되지 않은 경우 접근을 허용하는 간단한 예제입니다. x-forwarded-for 헤더를 사용하여 클라이언트 IP 주소를 얻고, 이를 blockedIPs 배열에 있는지 확인합니다.

Edge Functions 배포하기

배포 과정에서 대부분의 CDN이나 서버리스 플랫폼이 Edge Functions를 지원합니다. 대표적으로 Vercel이나 Cloudflare Workers와 같은 플랫폼이 있습니다. Vercel에 배포하는 방법을 간단히 설명하겠습니다.

Vercel을 사용하면 vercel.json 설정 파일에 Edge Functions를 명시할 수 있습니다:


json
{
  "rewrites": [
    { "source": "/api/:path*", "destination": "/api/edge-function" }
  ]
}

이 설정을 통해 모든 /api 경로가 Edge Function으로 라우팅됩니다.

결론

Next.js의 Edge Functions는 웹 애플리케이션의 성능을 향상시키고 보안을 강화할 수 있는 강력한 도구입니다. 엣지 서버에서 코드를 실행하여 사용자 요청을 필터링하고, 더 빠른 응답을 제공하며, 전 세계에 걸친 사용자를 대상으로 최적화된 성능을 제공할 수 있습니다. 이 기능을 활용하여 뛰어난 사용자 경험과 보안을 제공하는 웹 애플리케이션을 개발해 보세요.