vercel-cost-tuning

Vercel のコスト調整

概要

Fluid Compute の料金モデルを理解し、関数の実行時間を短縮し、エッジキャッシュを活用して関数の呼び出しを回避し、支出管理を設定することで、Vercel のコストを最適化します。プランの比較、コスト要因、監視について説明します。

前提条件

• Vercel の請求ダッシュボードにアクセスできること
• 現在のデプロイアーキテクチャを理解していること
• 使用状況の傾向を把握するために Vercel Analytics にアクセスできること

手順

ステップ 1：料金モデルを理解する

Vercel は、新規プロジェクトに Fluid Compute の料金モデルを使用します。

リソース	Hobby（無料）	Pro（$20/メンバー/月）	Enterprise
帯域幅	100 GB	1 TB を含む	カスタム
サーバーレス実行	100 GB-hrs	1000 GB-hrs を含む	カスタム
Edge Function の呼び出し	500K	1M を含む	カスタム
Edge Middleware の呼び出し	1M	1M を含む	カスタム
画像の最適化	1000	5000 を含む	カスタム
1 日あたりのビルド数	6000	6000	カスタム
同時ビルド数	1	1（追加可能）	カスタム

Fluid Compute の請求内訳：

• アクティブ CPU 時間：実際の CPU 使用量に対して 1 ミリ秒単位で課金されます
• 割り当てメモリ：割り当てられたメモリの 1 GB 秒単位で課金されます
• メリット：アイドル状態での待機時間（例：データベースの応答待ち）ではなく、実際の処理に対して課金されます

ステップ 2：コスト要因を特定する

# Check usage via API
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/usage" | jq .

# Top cost drivers on Vercel:
# 1. Serverless function execution time (CPU + memory)
# 2. Bandwidth (large responses, unoptimized images)
# 3. Edge Middleware invocations (runs on EVERY request)
# 4. Image optimizations (each unique transform costs)
# 5. Build minutes (frequent deploys or slow builds)

ステップ 3：関数の実行コストを削減する

// 1. Right-size function memory — don't over-allocate
// vercel.json
{
  "functions": {
    "api/lightweight.ts": { "memory": 128 },    // Simple JSON responses
    "api/standard.ts": { "memory": 512 },       // Database queries
    "api/heavy.ts": { "memory": 1024 }          // Image processing
  }
}

// 2. Move read-only endpoints to Edge Functions (cheaper, no cold starts)
// api/config.ts
export const config = { runtime: 'edge' };
export default function handler() {
  return Response.json({ features: ['a', 'b'] });
}

// 3. Cache function responses at the edge
// Eliminates function invocations entirely for cached routes
export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate=86400');
  res.json(data);
}

ステップ 4：帯域幅コストを削減する

// vercel.json — compress and cache aggressively
{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ],
  "images": {
    "sizes": [640, 750, 1080],
    "formats": ["image/avif", "image/webp"],
    "minimumCacheTTL": 86400
  }
}

帯域幅の削減に効果的な方法：

• Vercel の画像最適化を使用します（WebP／AVIF への自動変換）
• 静的アセットに積極的なキャッシュヘッダーを設定します
• SSR の代わりに ISR を使用して、静的 HTML を配信します
• API レスポンスを圧縮します（Vercel は Brotli で自動圧縮します）

ステップ 5：ミドルウェアのコストを最適化する

ミドルウェアは一致するすべてのリクエストで実行されます。適用範囲を最小限にします。

// middleware.ts — scope to specific paths only
export const config = {
  matcher: [
    // Only run middleware on API routes and protected pages
    '/api/:path*',
    '/dashboard/:path*',
    // Skip static files, images, and public assets
    '/((?!_next/static|_next/image|favicon.ico|public).*)',
  ],
};

export function middleware(request) {
  // Keep logic minimal — this runs on every matched request
  // Avoid: database queries, external API calls, heavy computation
  // Good: cookie checks, header modifications, redirects
}

ステップ 6：支出管理を設定する

Vercel ダッシュボードの Settings > Billing > Spend Management で設定します。

Default budget: $200/month on-demand usage
Options:
- Set custom budget limit
- Enable hard limit (pauses all projects when reached)
- Configure email alerts at 50%, 75%, 90%, 100%

# Check current usage against budget via API
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/usage?teamId=team_xxx" \
  | jq '{period: .period, bandwidth: .bandwidth, execution: .serverlessFunctionExecution}'

コスト最適化チェックリスト

アクション	効果	工数
s-maxage キャッシュヘッダーを追加する	高 — 関数の呼び出しをなくします	低
シンプルなエンドポイントに Edge Functions を使用する	中 — サーバーレスより低コストです	低
関数のメモリを適正化する	中 — GB-hr コストを削減します	低
ミドルウェアの matcher の適用範囲を設定する	中 — エッジでの呼び出しを削減します	低
画像最適化を有効にする	中 — 帯域幅を削減します	低
SSR の代わりに ISR を使用する	高 — キャッシュ済みの HTML を配信します	中
ビルド速度を最適化する	低 — ビルド時間を削減します	中
支出管理アラートを設定する	安全対策 — 予期しない請求を防ぎます	低

出力

• エンドポイントごとに関数のメモリを適正化
• エッジキャッシュにより関数の呼び出しを削減
• 呼び出しを最小限にするため、ミドルウェアの適用範囲を設定
• 予算アラートを設定して支出管理を構成
• API を使用した使用状況の監視

エラー処理

エラー	原因	解決策
請求額が予想外に急増する	トラフィックの多いエンドポイントがキャッシュされていない	レスポンスに s-maxage を追加します
プロジェクトが一時停止される	支出上限に達した	上限を引き上げるか、使用量を最適化します
画像最適化の割り当てを超過する	固有の画像変換が多すぎる	sizes 配列を縮小し、キャッシュ TTL を延長します
ビルド時間を超過する	ビルドが遅い、またはデプロイが多すぎる	ignoreCommand を使用して、コード以外の変更をスキップします

例

ロールバックを測定可能にして、呼び出しの急増を抑える

トラフィックの多い読み取りエンドポイントでは、プレビュー環境で保守的な s-maxage レスポンスポリシーを追加し、合成リクエストを使って、以前のリリースと呼び出し回数、キャッシュヒット率、レスポンスの正確性を比較します。ロールアウト前に支出アラートを設定し、オーナーが影響範囲を受け入れない限り、アカウント全体に適用されるハード停止は避けてください。個人向けコンテンツが誤ってキャッシュされた場合は、直ちにヘッダーの変更をロールバックし、対応している場合は影響を受けたデプロイのキャッシュのみをパージして、デグレードを記録します。

リソース

• Vercel の料金
• Fluid Compute の料金
• 支出管理
• 制限
• 使用状況 API

次のステップ

リファレンスアーキテクチャについては、vercel-reference-architecture を参照してください。