Next.js Middlewareで特定の環境にIP制限をかける

はじめに

この記事はファンタアドベントカレンダー2023の3日目の記事です。

Next.jsのMiddlewareを使用してIP制限を付与する方法について紹介します。

※確認環境：next v13.4.9で、Pages Routerの使用を想定しています。

想定読者

• Next.jsのMiddlewareを使用して特定の環境にIP制限を設定したいと考えている方

実装方法

1. ミドルウェアの設定

src/middleware.ts を作成し、以下のコードを記述します。

import { NextRequest, NextResponse } from "next/server";

// ホワイトリスト形式で設定した許可IPアドレスを取得
const ALLOWED_IPS = process.env.NEXT_PUBLIC_ALLOWED_IPS
  ? process.env.NEXT_PUBLIC_ALLOWED_IPS.split(",")
  : [];

export default function middleware(req: NextRequest) {
  if (!ALLOWED_IPS || ALLOWED_IPS.length === 0) {
    console.error("Error: ALLOWED_IPS が設定されていません");
  }
  const forwardedFor = req.headers.get("x-forwarded-for");
  const ip = forwardedFor ? forwardedFor.split(",").at(0) : "";
  if (!ip || !ALLOWED_IPS.includes(ip))
    // クライアントのIPアドレスが許可IPアドレスに含まれていないならエラーにする
    return NextResponse.json({ error: "Access Denied" }, { status: 403 });
  return NextResponse.next();
}

2. npm scriptsの設定

IP制限を特定の環境でのみ使用したい場合、環境変数を設定してbuild時の処理を分けることができます。以下は環境変数REQUIRES_MIDDLEWAREを設定し、REQUIRES_MIDDLEWAREがfalseの時は src/middleware.ts が削除されるようにしています。

"scripts": {
    "build": "[ \"$REQUIRES_MIDDLEWARE\" = \"false\" ] && yarn remove:middleware || true && next build",
    "remove:middleware": "rm ./src/middleware.ts"
  }

3. 環境変数の設定

NEXT_PUBLIC_ALLOWED_IPS という名前で値を以下のようにカンマ区切りで設定してください。

これで許可したIPアドレス以外からのアクセスを制限できます。

XXX.XXX.XX.XXX,XXX.XXX.XX.XXX

おわりに

筆者はAmplifyでホスティングしているアプリケーションにIP制限を付与したかったのですが、現在AmplifyではIP制限を直接設定する機能は提供されていないため、今回紹介した方法で対応することになりました。

AmplifyでのIP制限設定に関する議論はこちらのissueで確認することができます。

明日4日目の記事は信頼と実績を兼ね備えたPM、石田さんが担当します。ぜひご覧ください！