Vercel Edge Configの活用事例
Vercelが提供するEdge Configは、現在ベータ版が提供されている便利な機能です。
Edge Configは、キーと値のデータストアとして機能し、エッジサーバーを設置することで低レイテンシーなデータ取得が可能になります。
今回はEdge Configの活用事例に焦点を当てて紹介します。
事前準備
公式から進めていけば、簡単にEdge Configを利用できます。ここでは詳細な手順は割愛します。
活用事例
Edge Configを使用することで、コードを修正することなく、画面の制御ができるという利点があります。
これは特に、緊急のメンテナンスや、セキュリティ対策など、素早い対応が必要な場合に役立ちます。また、複数のプロジェクトや環境で同じ設定を使用できるため、設定の共通化や管理も容易になります。
重要なリダイレクト
ここではメンテナンスモードを実装する例を紹介します。
以下のように、Edge Configにメンテナンスモードのフラグを作成します。
{
"isMaintenance": true
}
一方、フロントエンド側では、メンテナンスモードのフラグを取得し、メンテナンスページにリダイレクトします。
import { NextRequest, NextResponse } from 'next/server';
import { get } from '@vercel/edge-config';
export const config = { matcher: '/((?!api|_next|static|public|favicon.ico).*)' };
export async function middleware(req: NextRequest) {
const isMaintenance = await get('isMaintenance') // Edge Configから値を取得してくる
if (isMaintenance) {
req.nextUrl.pathname = '/maintenance'
return NextResponse.rewrite(req.nextUrl)
}
}
悪意のあるipをブロックする
ここでは、悪意のあるipをブロックする例を紹介します。
以下のように、Edge Configにブロックしたいipを配列で定義します。
{
// ブロックしたいipを配列で定義する
"blockIps": [
"xxx.xxx.xxx.xxx"
]
}
一方、フロントエンド側では、ブロックしたいipを取得し、403ページにリダイレクトします。
export async function middleware(req: NextRequest) {
const blockIps = await get<string[]>('blockIps')
const accessIp = req.ip
if (accessIp && blockIps?.includes(accessIp)) {
req.nextUrl.pathname = '403.html'
return NextResponse.rewrite(req.nextUrl, { status: 403 })
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>403 Forbidden</title>
</head>
<body>
<p>Forbidden</p>
</body>
</html>
使用できる場面
Edge Configは、Edge Functions
、Edge Middleware
、およびServerless Functions
で使用できます。
Edge Config Limits
制限があるので注意が必要です。
ひとつのプロジェクトにつき、Edge Configは最大で10個まで作成できます。
また、Edge Configのサイズは最大で1MBまでです。
詳しくは以下参照してください。
さいごに
Edge Configは、VercelのEdge Networkを活用した、簡単な設定管理ツールです。
開発環境や使用制限に注意しながら導入できれば、フロントエンドの開発をより効率的に行うことができます。
参考
Discussion