Vercel Edge と Upstash Redis を使用して Next.js にレート制限を実装する

この記事では、Vercel Edge Middleware と @upstash/ratelimit ライブラリを利用して Web アプリケーションにレート制限を実装するプロセスについて説明します。後者は、レート制限データの保存と管理のためにバックエンドで 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/ratelimit

middleware.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 パッケージの便利な機能は、エッジ機能が「ホット」である限りデータをキャッシュすることです。これは、関数が「コールド」なときにのみ Redis からデータがフェッチされることを意味し、リモート呼び出しの数が減少します。キャッシュは、ratelimit を宣言することで実装できます。 ハンドラー function middleware の外側のオブジェクト .

レート制限アルゴリズム

上の例では、スライディング ウィンドウ アルゴリズムを使用しました。ニーズに応じて、固定ウィンドウ アルゴリズムとリーク バケット アルゴリズムを使用できます。ここをチェックしてください

マルチリージョン Redis

エッジ機能のパフォーマンスを向上させるには、異なるリージョンに複数の Redis データベースを配置することが合理的です。ここで説明されているように、複数のリージョン Redis を構成できます

リンク

Next.js によるレート制限 (非エッジ)

Vercel Edge ミドルウェア

レート制限 SDK