이 기사에서는 Vercel Edge Middleware 및 @upstash/ratelimit 라이브러리를 활용하여 웹 애플리케이션에서 속도 제한을 구현하는 프로세스를 안내합니다. 후자는 속도 제한 데이터의 저장 및 관리를 위해 백엔드에서 Redis를 사용합니다.
Vercel Edge 사용의 장점
Vercel Edge는 사용자에게 가장 가까운 위치에서 계산을 수행하는 컴퓨팅 플랫폼입니다. 요청이 백엔드에 도달하기 전에 차단하는 Vercel Edge Middleware를 활용하겠습니다. 나는 이것이 여러 가지 이유로 속도 제한 구현에 이상적이라고 생각합니다:
- 백엔드에서 분리되어 트래픽이 백엔드에 도달하기 전에 엣지 위치에서 차단할 수 있습니다.
- 빠르고 콜드 스타트 문제가 없으므로 오버헤드가 최소화됩니다.
- 서버리스 기능에 비해 비용 효율적입니다.
왜 @upstash/ratelimit를 사용하나요?
- @upstash/ratelimit는 에지 기능을 위해 특별히 설계되고 테스트된 속도 제한 라이브러리입니다.
- 에지 위치에서 최적의 지연 시간을 위해 다중 지역 Redis를 지원합니다.
- Upstash Redis는 REST API 덕분에 에지 기능에서 액세스할 수 있는 유일한 관리형 Redis입니다.
이제 구현을 시작하겠습니다:
1단계:Redis 설정
Upstash 콘솔 또는 Upstash CLI에서 Redis 데이터베이스를 생성합니다. UPSTASH_REDIS_REST_URL 및 UPSTASH_REDIS_REST_TOKEN 다음 단계를 위해 필요합니다.
2단계:Next.js 설정
Next.js 애플리케이션을 만듭니다. (다른 프레임워크는 이것을 확인하세요)
npx create-next-app@latest --typescript@upstash/ratelimit 설치:
npm i @upstash/ratelimitmiddleware.ts 생성(프로젝트 폴더의 최상위 수준):
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
const redis = new Redis({
url: "https://us1-merry-snake-32728.upstash.io",
token: "AX_sAdsdfsgODM5ZjExZGEtMmmVjNmE345445kGVmZTk5MzQ=",
});
const ratelimit = new Ratelimit({
redis: redis,
limiter: Ratelimit.slidingWindow(5, "10 s"),
});
export default async function middleware(
request: NextRequest,
event: NextFetchEvent,
): Promise<Response | undefined> {
const ip = request.ip ?? "127.0.0.1";
const { success, pending, limit, reset, remaining } =
await ratelimit.limit(ip);
return success
? NextResponse.next()
: NextResponse.redirect(new URL("/blocked", request.url));
}
export const config = {
matcher: "/",
};
Redis URL과 토큰을 교체하는 것을 잊지 마세요. 코드는 slidingWindow을 사용합니다. 알고리즘을 사용하여 10초 안에 동일한 IP에서 5개의 요청을 허용합니다. 사용자 고유의 속성(사용자 ID, 이메일 등)이 있는 경우 IP 대신 이를 사용할 수 있습니다. 요청의 속도가 제한된 경우 미들웨어는 요청을 blocked로 리디렉션합니다. 페이지.
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에 앱을 배포할 수 있습니다.
페이지를 새로 고치면 3회 후에 차단된 페이지로 리디렉션됩니다.
캐싱을 통한 원격 통화 감소
요청이 있을 때마다 원격 호출을 하는 것은 효율적이지 않습니다. @uptash/ratelimit 패키지의 유용한 기능은 Edge 기능이 "핫"한 동안 데이터를 캐시한다는 것입니다. 즉, 함수가 "콜드"일 때만 Redis에서 데이터를 가져오므로 원격 호출 수가 줄어듭니다. 캐싱은 ratelimit을 선언하여 구현할 수 있습니다. 핸들러 function middleware 외부의 객체 .
속도 제한 알고리즘
위의 예에서는 슬라이딩 윈도우 알고리즘을 사용했습니다. 필요에 따라 고정 창 및 누수 버킷 알고리즘을 사용할 수 있습니다. 여기를 확인하세요
다중 지역 Redis
에지 기능의 성능을 향상하려면 다양한 지역에 여러 Redis 데이터베이스를 보유하는 것이 합리적입니다. 여기에 설명된 대로 여러 지역 Redis를 구성할 수 있습니다
링크
Next.js를 통한 속도 제한(비엣지)
Vercel Edge 미들웨어
속도 제한 SDK