이 글에서는 특정 국가에서 들어오는 웹 앱 트래픽을 차단하는 방법을 소개합니다. 동일한 로직을 활용하면 IP 주소, 사용자 에이전트(User-Agent) 등 다양한 조건으로 트래픽을 관리할 수도 있습니다.
우리가 목표로 하는 솔루션은 다음과 같은 조건을 충족해야 합니다.
- 차단 국가를 변경할 때 코드를 수정하고 다시 배포할 필요가 없어야 합니다.
- 애플리케이션에 최소한의 오버헤드와 비용만 발생해야 합니다.
이를 위해 Vercel Edge Middleware와 Upstash Edge Flags를 함께 사용합니다.
Vercel Edge Middleware란?
Vercel Edge 미들웨어는 웹 요청이 백엔드에서 처리되기 전에 이를 가로채는 코드입니다. 국가 정보와 사용자 에이전트를 확인하는 용도로 적합한 이유는 다음과 같습니다.
- 빠르고 저렴하게 동작합니다.
- 애플리케이션 로직과 분리(decoupled)되어 있어 유지보수가 쉽습니다.
Upstash Edge Flags란?
사실 아래처럼 엣지 미들웨어 코드에 간단한 if 문을 작성하는 것만으로도 국가를 확인하고 트래픽을 차단할 수 있습니다.
const BLOCKED_COUNTRY = "BAD_COUNTRY";
export function middleware(req: NextRequest) {
const country = req.geo.country;
if (country === BLOCKED_COUNTRY) {
return new Response("Blocked ", { status: 451 });
}
return new Response(`Greetings`);
}그렇다면 왜 엣지 플래그(Edge Flags)가 필요할까요? 엣지 플래그를 사용하면 코드를 수정하지 않고도 차단 규칙을 자유롭게 관리할 수 있습니다. 즉, 대시보드에서 규칙을 변경하면 즉시 반영됩니다.
그럼 시작해 보겠습니다.
1단계: Redis 데이터베이스 및 Edge Flags 설정
Upstash 콘솔에서 Redis 데이터베이스를 생성합니다. 최상의 성능을 위해 Global 옵션을 선택하고, 사용자가 주로 접속할 것으로 예상되는 리전을 지정하세요.
Edge Flags 페이지로 이동하여 방금 생성한 데이터베이스를 선택합니다. 그런 다음 blockTraffic이라는 이름으로 새 플래그를 만들고, 차단할 국가에 대한 규칙을 추가합니다.
Country → is in array → United States → on
설정을 저장하고 플래그를 활성화합니다.
위 플래그는 요청이 미국(United States)에서 발생한 경우에만 활성화됩니다.
2단계: Next.js 프로젝트 설정
먼저 Next.js 애플리케이션을 생성합니다.
npx create-next-app@latest --typescript@upstash 패키지를 설치합니다.
$ 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("blockTraffic", req.geo ?? {});
if (!enabled) {
const url = new URL(req.url);
url.pathname = "/blocked";
return NextResponse.rewrite(url);
}
return NextResponse.next();
}
export const config = {
matcher: "/",
};이제 차단된 방문자에게 보여줄 페이지를 만듭니다.
pages/blocked.tsx
import styles from "@/styles/Home.module.css";
export default function Blocked() {
return (
<div>
<main className={styles.main}>
<h3>Access blocked.</h3>
</main>
</div>
);
}이것으로 끝입니다! 이제 앱을 Vercel에 배포하세요.
vercel deploy배포 시 Upstash 콘솔에서 환경 변수를 복사하거나, Upstash Vercel 통합(Integration) 기능을 사용하여 환경 변수를 반드시 추가해야 합니다.
페이지에 접속해 보세요. 미국에서 접속했다면 차단 페이지로 리다이렉트될 것입니다. VPN을 사용하면 여러 국가에서의 동작을 직접 테스트해 볼 수 있습니다.
개발 환경에서의 지역(Geolocation) 확인
지역 정보(Geolocation)는 로컬 개발 환경에서는 제공되지 않습니다. 따라서 앱을 테스트하려면 Vercel에 배포해야 합니다.
참고 링크
Edge Flags 공식 문서
Vercel Edge Middleware 공식 문서