😽

Vercel Edge Configの活用事例

2023/01/23に公開

Next.js

Vercel

Serverless

tech

はじめに

Vercelが提供するEdge Configは、現在ベータ版が提供されている便利な機能です。
Edge Configは、キーと値のデータストアとして機能し、エッジサーバーを設置することで低レイテンシーなデータ取得が可能になります。

今回はEdge Configの活用事例に焦点を当てて紹介します。

事前準備

公式から進めていけば、簡単にEdge Configを利用できます。ここでは詳細な手順は割愛します。

活用事例

Edge Configを使用することで、コードを修正することなく、画面の制御ができるという利点があります。
これは特に、緊急のメンテナンスや、セキュリティ対策など、素早い対応が必要な場合に役立ちます。また、複数のプロジェクトや環境で同じ設定を使用できるため、設定の共通化や管理も容易になります。

重要なリダイレクト

ここではメンテナンスモードを実装する例を紹介します。
以下のように、Edge Configにメンテナンスモードのフラグを作成します。

Edge Config

{
  "isMaintenance": true
}

一方、フロントエンド側では、メンテナンスモードのフラグを取得し、メンテナンスページにリダイレクトします。

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') // Edge Configから値を取得してくる

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

悪意のあるipをブロックする

ここでは、悪意のあるipをブロックする例を紹介します。
以下のように、Edge Configにブロックしたいipを配列で定義します。

Edge Config

{
  // ブロックしたいipを配列で定義する
  "blockIps": [
    "xxx.xxx.xxx.xxx"
  ]
}

一方、フロントエンド側では、ブロックしたいipを取得し、403ページにリダイレクトします。

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 })
  }
}

public/403.html

<!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を活用した、簡単な設定管理ツールです。
開発環境や使用制限に注意しながら導入できれば、フロントエンドの開発をより効率的に行うことができます。