⚡

Vercel Edge Configの活用事例

に公開
Next.js
Vercel
Serverless
Edge
tech

Vercel Edge Configは、低レイテンシーで設定値を管理できるキー・バリュー型データストアです。コード変更なしで動的に設定を切り替えられる実用的な活用事例を紹介します。

Edge Configとは

エッジサーバー上で動作するキー・バリュー型データストアで、以下の特徴があります。

  • 低レイテンシーなデータ取得
  • コード変更なしで設定変更可能
  • 複数プロジェクト・環境で設定を共有可能

公式ドキュメント: https://vercel.com/docs/concepts/edge-network/edge-config/get-started

活用事例1: メンテナンスモード

緊急メンテナンス時に、コードを変更せずに全ページをメンテナンス画面に切り替えられます。

Edge Config設定

{
  "isMaintenance": true
}

Middleware実装

// src/middleware.ts
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');

  if (isMaintenance) {
    req.nextUrl.pathname = '/maintenance';
    return NextResponse.rewrite(req.nextUrl);
  }
}

メリット:

  • 再デプロイ不要でメンテナンスモードに切り替え可能
  • ダッシュボードから即座に設定変更

活用事例2: IPアドレスブロック

悪意のあるアクセスを即座にブロックできます。

Edge Config設定

{
  "blockIps": [
    "xxx.xxx.xxx.xxx",
    "yyy.yyy.yyy.yyy"
  ]
}

Middleware実装

// src/middleware.ts
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 });
  }
}

403ページ

<!-- public/403.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>403 Forbidden</title>
</head>
<body>
  <h1>403 Forbidden</h1>
  <p>アクセスが拒否されました。</p>
</body>
</html>

メリット:

  • セキュリティインシデント発生時に即座に対応
  • コードデプロイなしでブロックリスト更新

使用可能な環境

Edge Configは以下の環境で利用できます。

  • Edge Functions
  • Edge Middleware
  • Serverless Functions

制限事項

項目 制限
プロジェクトあたりのEdge Config数 最大10個
Edge Configのサイズ 最大1MB

詳細: https://vercel.com/docs/concepts/edge-network/edge-config/edge-config-limits

まとめ

Vercel Edge Configを活用することで、以下が実現できます。

主なユースケース:

  • メンテナンスモードの即座切り替え
  • セキュリティ対策のリアルタイム適用
  • A/Bテストのフラグ管理
  • 機能フラグ（Feature Flag）の制御

利点:

  • 再デプロイ不要
  • 低レイテンシー
  • 複数環境での設定共有

緊急対応が必要なシナリオで特に有効な機能です。制限事項を理解した上で、適切に活用しましょう。

参考

https://vercel.com/docs/concepts/edge-network/edge-config

Discussion