Cloudflare AI Gatewayを設定してみた：コスト可視化とログ確認の記録

はじめに

このWEBサイトの右下にあるチャットbotは、Cloudflare Workers AI x Llama で動いています。 Workers AI のリクエストを可視化・管理できる AI Gateway というサービスがあったので、実際に設定してみました。

Part 1：AI Gateway の位置づけと機能

AI Gateway はアプリと LLM API の間に入るリバースプロキシ です。

AI Gateway の位置:

  Without AI Gateway:
  ┌──────────┐           ┌────────────┐
  │ Workers  │ ────────→ │  OpenAI    │
  │  (Hono)  │           │  Gemini    │
  └──────────┘           │  Workers AI│
                         └────────────┘
  問題: プロバイダ直結。可視化なし。フォールバックなし。

  With AI Gateway:
  ┌──────────┐    ┌─────────────────┐    ┌────────────┐
  │ Workers  │ →  │  AI Gateway     │ →  │  OpenAI    │
  │  (Hono)  │    │  ・キャッシュ    │    │  Gemini    │
  └──────────┘    │  ・レートリミット │    │  Workers AI│
                  │  ・フォールバック │    └────────────┘
                  │  ・ログ/分析     │
                  │  ・コスト可視化  │
                  └─────────────────┘
  利点: 1行のエンドポイント変更で全機能が有効(=アプリ側コード変更が不要)

基本機能（ログ・キャッシュ・レートリミット）は無料です。課金はリクエスト数に応じて発生します（月1,000万reqまで $5/月）。

Part 2：セットアップと基本的な接続

1. Cloudflareダッシュボードでゲートウェイを作成

Cloudflareのダッシュボードから「AI Gateway」→「Create Gateway」でゲートウェイIDを発行します。今回は portfolio-ai-gateway という名前にしました。

2. AI Gateway への接続

AI Gateway への接続には、2つの方法があります。「URL 置換」は既存コードの baseURL を変えるだけで動きますが、ログ操作 API にアクセスできません。今回は「Worker Binding」で接続しました。

wrangler.jsonc に binding を追加

{
  "ai": {
    "binding": "AI",
    "gateway": {
      "id": "portfolio-ai-gateway",
      "skip_cache": false
    }
  }
}

wrangler.jsonc で binding に gateway を指定するだけで、env.AI.run() の呼び出しが自動的に Gateway 経由になります。Worker 側のコードを変える必要はありません。

// このコードは Gateway あり・なしで同じ
const response = await env.AI.run(
  '@cf/meta/llama-3.1-8b-instruct',
  {
    messages: conversationHistory,
  }
);

Part 3：ログ・観測性の活用

ダッシュボードで確認できること

リクエストのタイムライン — いつ、何回 API が呼ばれたか
プロンプトと応答の内容 — 各リクエストの入出力がそのまま見える
トークン数 — 入力・出力それぞれのトークン数
推定コスト — トークン数から算出されたコスト

Workers AI の Llama は無料枠内で動いているため、現時点でコストは $0 です。

ローカル開発時の注意点

wrangler pages dev でローカル開発をしているとき、AI binding 自体は動きますが Gateway は経由しません（ローカルには Gateway がないため）。

そのため、Gateway の設定ミス（IDの typo など）はローカルでは気づけず、デプロイ後に初めてエラーが出ることがあります。設定変更後はデプロイして実際にダッシュボードにログが出るところまで確認するのが確実です。

また、--local フラグなしで wrangler を動かす場合は、AI binding のリモートアクセスに CLOUDFLARE_API_TOKEN が必要になります。

# .dev.vars（gitignore済み）
CLOUDFLARE_API_TOKEN=your_token_here

まとめ

AI Gateway は、wrangler.jsonc に数行追加するだけでリクエストの可視化・ログ記録が手に入るサービスです。リバースプロキシとして間に挟む構成なので、アプリケーション側のコードはほぼ変えずに導入できます。

今回はログとコスト可視化のために導入しましたが、他にもキャッシュ・レートリミット・フォールバックといった機能を備えているので、トラフィックが増えたタイミングで活用の幅が広がると思います。