Vercel Edge および Upstash Edge フラグを使用した Next.js アプリ向けのシームレスな国ベースのトラフィック制御

この投稿では、ある国から Web アプリへのトラフィックをブロックする方法を説明します。同じロジックを適用して、他のフィルター (IP アドレス、ユーザー エージェントなど) を使用してトラフィックを管理できます。私たちは、分離された、軽量で動的なソリューションを目指しています。

• 国を更新するためにコードを更新してデプロイする必要はありません。
• アプリケーションのオーバーヘッドとコストを最小限に抑える必要があります。

Vercel Edge Middleware と Upstash Edge Flags を使用します。

Vercel エッジ ミドルウェア

Vercel Edge ミドルウェアは、バックエンドによって処理される前に Web リクエストをインターセプトするコードです。次の理由により、これを使用して国とユーザー エージェントを確認します。

• 速くて安いです。
• アプリケーションから切り離されます。

アップスタッシュ エッジ フラグ

実際、以下に示すように、エッジ ミドルウェア コード内の単純な 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`);
}

では、なぜエッジフラグが必要なのでしょうか?エッジ フラグを使用すると、コードを更新せずにルールを管理できるようになります。

始めましょう..

ステップ 1:Redis と Edge Flags のセットアップ

Upstash コンソールで Redis データベースを作成します。最高のパフォーマンスを得るには、グローバルと、ユーザーが存在する可能性が高いリージョンを選択してください。

Edge flags ページに移動し、作成したばかりのデータベースを選択します。 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 を作成します (プロジェクト フォルダーの最上位):

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

ブロックされた人用のページを作成しましょう:

ページ/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 に追加してください。

米国にお住まいの場合は、このページにアクセスすると、ブロックされたページにリダイレクトされます。 VPN を使用してさまざまな国をテストします。

地理位置情報は開発中

地理位置情報データはローカルでは利用できません。アプリをテストするには、Vercel にデプロイする必要があります。

リンク

エッジ フラグのドキュメント

Vercel Edge ミドルウェア