Next.js & Vercel Edge Config で簡単にメンテナンスモードを実装する
はじめに
本記事では、Vercel と Next.js/App Router を活用してメンテナンスモードを実現する方法を紹介します。Vercel の Edge Config を使い、ミドルウェアと組み合わせた効率的な実装方法について解説します。
Edge Config とは
Edge Config は、Vercel プロジェクトで利用可能な Key-Value 型のデータストアです。Edge Middleware と連携して、以下のようなユースケースで活用できます。
- メンテナンスモードの管理
- A/B テストの設定
- フィーチャーフラグの制御
- IP 制限
など。
Edge Config は、Vercel のエッジネットワークでデータ取得が可能であるため、超低遅延でのデータ読み込みを実現します。また、設定が更新されるたびに自動的にバックアップが生成され、過去の設定に復元できるので、運用時のリスク軽減にも寄与します。
Edge Config と他の代替手段の比較
| Edge Config vs alternatives | Read latency | Write latency | Redeployment required | Added risk of downtime |
|---|---|---|---|---|
| Edge Config | Ultra-low | Varies | No | No |
| Remote JSON files | Varies | Varies | No | Yes |
| Embedded JSON files | Lowest | Highest | Yes | No |
| Environment Variables | Lowest | Highest | Yes | No |
Ref: https://vercel.com/docs/storage/edge-config#why-use-edge-config-instead-of-alternatives
Edge Config は再デプロイを必要とせず、すぐに設定を反映できるため、ダウンタイムや運用負荷を最小限に抑えたいユースケースに特に適しています。
メンテナンスモードの実装例
ここでは、Edge Config を利用してメンテナンスモードを実装する方法を紹介します。Edge Config でフラグを設定し、Next.js のミドルウェアでそのフラグに応じてページをリダイレクトします。
Ref: https://edge-maintenance-page.vercel.app/
1. Edge Config の設定
まず、Vercel のプロジェクトページから Edge Config に「メンテナンスモード」のフラグを設定します。
{
"isMaintenance": true
}
2. Next.js ミドルウェアでのフラグ読み取り
次に、Next.js のミドルウェアで Edge Config からフラグの値を取得し、必要に応じてメンテナンスページへリダイレクト（Rewrite）します。
Edge Config client SDK を利用することで、簡単にデータを読み取ることができます。
import { get } from "@vercel/edge-config";
import { type NextRequest, NextResponse } from "next/server";
export async function middleware(request: NextRequest) {
...
const isInMaintenanceMode = await get("isMaintenance");
// メンテナンスモードがTrueの場合は、メンテナンスページを表示する
if (isInMaintenanceMode) {
request.nextUrl.pathname = "/maintenance";
return NextResponse.rewrite(request.nextUrl);
}
...
}
さいごに
Edge Config は Vercel プロジェクト内で利用できる軽量で便利なデータストアです。外部データベースのようなセットアップや管理の手間が不要で、効率的な運用が可能になります。メンテナンスモードなどの動的な機能の実装が求められるプロジェクトでは、Edge Config の活用をぜひ検討してみてください。
Discussion