Vercel Edge MiddlewareとUpstash Edge Flagsで実現するNext.jsアプリの国別トラフィック制御

本記事では、特定の国からWebアプリケーションへのアクセスをブロックする方法を解説します。この仕組みは、IPアドレスやユーザーエージェントなど、他の条件によるトラフィック制御にもそのまま応用できます。目指すのは、以下のような疎結合・軽量・動的なソリューションです。

• 対象国を変更する際に、コードの更新や再デプロイが不要であること
• アプリケーションへのオーバーヘッドとコストを最小限に抑えられること

これらを実現するために、「Vercel Edge Middleware」と「Upstash Edge Flags」を活用します。

Vercel Edge Middlewareとは

Vercel Edge Middlewareは、バックエンドでリクエストが処理される前にWebリクエストを横取りするコードです。国やユーザーエージェントのチェックに利用する理由は以下の通りです。

• 高速かつ低コストで動作する
• アプリケーション本体から分離されており、メンテナンス性が高い

Upstash Edge Flagsとは

実は、Edge Middleware内にシンプルな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データベースを作成します。最高のパフォーマンスを得るには、グローバルオプションを選択し、ユーザーが多いと予想されるリージョンを指定してください。

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

続いて、ブロックされたユーザー向けのページを作成します。

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に必ず追加してください。

ページにアクセスすると、アメリカ国内からの場合はブロックページへリダイレクトされるはずです。VPNを使えば、さまざまな国からのアクセスをテストできます。

開発環境でのジオロケーションに関する注意点

ローカル環境ではジオロケーションデータを取得できません。アプリをテストするには、Vercelへのデプロイが必要です。

参考リンク

• Edge Flags ドキュメント
• Vercel Edge Middleware