Edge-Flags를 사용하면 서버리스 애플리케이션의 기능 플래그(feature flag)를 손쉽게 관리할 수 있습니다. Edge-Flags는 Upstash Redis를 기반으로 동작하며, 강력한 지리적 위치(geolocation) 규칙을 지원합니다. 이번 글에서는 Next.js 미들웨어에 Edge-Flags를 적용해 사용자의 접속 위치에 따라 요청을 리라이트(rewrite)하는 아주 간단한 예제를 살펴보겠습니다.
1. 플래그 생성하기
이번 예제의 목표는 EU(유럽 연합)에 있는 사용자에게만 콘텐츠를 노출하는 것입니다. 먼저 새로운 Redis 데이터베이스를 생성한 뒤, edge-flags 페이지로 이동하여 방금 만든 데이터베이스와 production 환경을 선택합니다.
그다음 eu-countries라는 이름의 새 플래그를 만들고, EU에 속한 모든 국가를 조건으로 추가하면 됩니다.
2. 프로젝트 설정과 패키지 설치
프로젝트 생성 및 패키지 설치
기존에 Next.js 앱이 없다면 npx create-next-app 명령어로 새 프로젝트를 생성한 후, 아래 명령어로 필요한 패키지를 설치합니다.
$ npm install @upstash/edge-flags @upstash/redis미들웨어 작성
프로젝트 루트에 middleware.ts 파일을 새로 만들고 다음 코드를 추가합니다.
middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { Client as EdgeFlags } from "@upstash/edge-flags";
import { Redis } from "@upstash/redis";
const edgeFlags = new EdgeFlags({ redis: Redis.fromEnv() });
export default async function middleware(
req: NextRequest,
): Promise<NextResponse> {
const enabled = await edgeFlags
.getFlag("eu-countries", req.geo ?? {})
.catch((err) => {
console.error(err);
return false;
});
if (!enabled) {
const url = new URL(req.url);
url.pathname = "/blocked";
return NextResponse.rewrite(url);
}
return NextResponse.next();
}
export const config = {
matcher: "/",
};차단 페이지 생성
접근이 허용되지 않은 사용자에게 보여줄 /blocked 페이지를 간단하게 만들어 봅니다.
app/blocked/page.tsx
export default function Page() {
return <div>EU 지역이 아니므로 콘텐츠를 볼 수 없습니다.</div>;
}이제 남은 작업은 프로젝트를 Vercel에 배포하는 것뿐입니다.
$ npx vercelUpstash 콘솔에서 환경 변수를 직접 복사하거나, Vercel의 Upstash 통합(Integration)을 이용해 환경 변수를 반드시 등록해 주세요.
3. 테스트하기
개발 환경에서의 지리적 위치 정보
로컬 개발 환경에서는 지리적 위치(geolocation) 데이터를 확인할 수 없습니다. 실제 동작을 테스트하려면 앱을 Vercel에 배포해야 합니다.
배포가 완료되면 앱의 인덱스 페이지에 접속해 결과를 확인할 수 있습니다. EU 내에서 접속하면 정상적으로 콘텐츠가 표시되고, 그 외 지역에서는 /blocked 페이지가 대신 렌더링됩니다.
참고 자료
- Edge-Flags 공식 문서
- 예제 코드
- 예제 앱