Vercel Edge Configの活用事例
概要
Vercelが提供するEdge Configですが、これがまた便利な機能です。現在ベータ版の提供になっています。
Edge Config自体はキーと値のデータストアとして機能しており、エッジサーバーを設けることで低レイテンシーなデータの取得が可能になっています。
今回はそのEdge Configの設定からユースケースまでまとめて紹介していきます。
※Vercelアカウントを持っている前提で話を進めます。
事前準備
Edge Configを使用するための事前準備をします。
フロントエンド側
とりあえずNext.jsの雛形を作りましょう。
yarn create next-app
Edge Configを使用するために必要なライブラリをインストールします。
yarn add @vercel/edge-config
作成したらGitHubにホスティング作業をします。
Vercel側
ホスティングが完了したならば、Vercelとリポジトリを結びつけデプロイ作業を行います。
※ここの流れは省略します。公式の通りにしていけば難なくできるかと思います。
次にEdge ConfigタブからCreate Storeをクリックし、データを作成します。Edge Config Nameを尋ねられるので、ここではtest-edge-configとします。
作成すると、以下のようにデフォルトのデータが出来上がります。Connectボタンを押下しプロジェクトと紐づけましょう。
紐付け完了すると以下のような画面が現れます。
ここでは2,3は省略し、1のみ作業を行なっていきます。
環境変数を取得
フロントエンドで立ち上げたNext.jsプロジェクトのルートで先ほどの1のコマンドを実行します。
ですがVercelプロジェクトとのリンクができていないのでエラーが出ます。
Your codebase isn’t linked to a project on Vercel. Run vercel link to begin.
まずは言われた通りに設定します。
vercel link
その後に環境変数を作成します。
vercel env pull .env.development.local
ユースケース
準備ができましたので、いくつかEdge Configを使用する場面を見ていきます。
やはり良い点はコードを触ることなく画面制御できるようになることではないかと思っています。
重要なリダイレクト
ここではメンテナンスの切り替えを例とします。
今まではメンテナンス中に画面を切り替えるとき、わざわざコードを変えてデプロイをしなければなりませんでした。
しかしEdge Configを使用すればデータを変更することでメンテナンス画面の切り替えが可能になります。
ストア側のデータ構成は以下の通りです。
{
"isMaintenance": true
}
アプリ側ではミドルウェアを設定して簡単にメンテナンス画面に切り替えることが可能です。
メンテナンスを終える時はストア側のデータをfalseにすれば良いだけです。
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をブロックすることが可能です。
{
// ブロックしたいipを配列で定義する
"blockIps": [
"xxx.xxx.xxx.xxx"
]
}
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につき、Hobbyでは8KB、Proでは64KB、Enterpriseでは512KBと制限があったりします。
さらに各アカウントにつき作成できるEdge ConfigはHobbyでは1つと結構シビアです（当たり前か）。
詳しくは以下参照してください。
最後に
Edge Configいかがでしょう。
個人的にはユースケースのようにリダイレクト制御に一役買ってくれる素晴らしい機能だと思います。
ですが制限も厳しいため、実際にプロジェクトに使用するかは要検討しなければならないかと考えています。
参考
Discussion