Vercel Edge 및 Upstash Edge 플래그를 사용하여 Next.js 앱에 대한 원활한 국가 기반 트래픽 제어

이 게시물에서는 특정 국가에서 웹 앱으로의 트래픽을 차단하는 방법을 보여 드리겠습니다. 동일한 논리를 적용하여 다른 필터(IP 주소, 사용자 에이전트 등)를 사용하여 트래픽을 관리할 수 있습니다. 우리는 분리되고 가볍고 동적인 솔루션을 목표로 합니다:

• 국가를 업데이트하기 위해 코드를 업데이트하고 배포할 필요가 없습니다.
• 애플리케이션에 대한 오버헤드와 비용이 최소화되어야 합니다.

Vercel Edge Middleware와 Upstash Edge Flag를 사용하겠습니다.

Vercel Edge 미들웨어

Vercel Edge 미들웨어는 백엔드에서 처리되기 전에 웹 요청을 가로채는 코드입니다. 다음과 같은 이유로 국가 및 사용자 에이전트를 확인하는 데 사용됩니다.

• 빠르고 저렴합니다.
• 애플리케이션에서 분리되었습니다.

Upstash 엣지 플래그

실제로 아래와 같이 에지 미들웨어 코드에서 간단한 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 플래그를 사용하면 코드를 업데이트하지 않고도 규칙을 관리할 수 있습니다.

시작해 보겠습니다..

1단계:Redis 및 Edge 플래그 설정

Upstash 콘솔에서 Redis 데이터베이스를 생성합니다. 최상의 성능을 얻으려면 사용자가 있을 가능성이 있는 글로벌 및 지역을 선택하십시오.

Edge 플래그 페이지로 이동하여 방금 생성한 데이터베이스를 선택합니다. 이름이 blockTraffic인 새 플래그를 만듭니다. . 그런 다음 차단된 국가에 대한 규칙을 추가하세요:Country is in array United States -> on

플래그를 저장하고 활성화하세요.

요청이 미국에서 시작된 경우 위 플래그가 활성화됩니다.

2단계:Next.js 프로젝트 설정

Next.js 애플리케이션을 생성하세요.

npx create-next-app@latest --typescript

@upstash 패키지 설치:

$ npm install @upstash/edge-flags @upstash/redis

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: "/",
};

차단된 사람들을 위한 페이지를 만들어 봅시다:

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에 환경 변수를 추가하세요.

페이지를 방문하면 미국에 있는 경우 차단된 페이지로 리디렉션됩니다. VPN을 사용하여 다양한 국가를 테스트해 보세요.

개발 중인 위치정보

지리적 위치 데이터는 로컬에서 사용할 수 없습니다. 앱을 테스트하려면 Vercel에 배포해야 합니다.

링크

Edge 플래그 문서

Vercel Edge 미들웨어