【無料・ゼロコード】Cloudflare × OpenRouter × Langfuseで始めるLLM Observability入門

Last updated at 2026-05-06Posted at 2026-05-06

LLM APIを直接叩くだけだと、あとから「どのリクエストが高かったのか」「エラーはどこで起きたのか」「同じプロンプトを何度も投げていないか」を追いづらくなります。

この記事では、LLM Observabilityの入り口として、次の3パターンを試します。

Cloudflare AI GatewayでOpenAI APIをほぼそのままプロキシする
OpenRouterのObservabilityとBYOKを使う
Cloudflare AI Gateway → OpenRouter → OpenAI BYOK の二段構成にする

この記事は公式ドキュメントをベースにしています。Cloudflare AI Gatewayは、AIアプリの可視化と制御のために、analytics、logging、caching、rate limiting、retry、fallbackなどを提供すると説明されています。

この記事で作る構成

パターン1：Cloudflare AI Gatewayだけ

App
  ↓
Cloudflare AI Gateway
  ↓
OpenAI

Cloudflare側でログ、利用量、コスト、エラー、キャッシュなどを見たい場合の一番シンプルな構成です。

パターン2：OpenRouter + BYOK + Langfuse

App
  ↓
OpenRouter
  ↓
OpenAI / Anthropic / Gemini ...
  ↓
Langfuse

OpenRouterに自分のProvider API Keyを登録しつつ、OpenRouter BroadcastでLangfuseへTraceを送る構成です。

パターン3：Cloudflare AI Gateway + OpenRouter + BYOK

App
  ↓
Cloudflare AI Gateway
  ↓
OpenRouter
  ↓
OpenAI BYOK
  ↓
Langfuse

Cloudflare側でキャッシュやGatewayログを見つつ、OpenRouter側でLangfuse連携やBYOKを使う構成です。

1. Cloudflare AI GatewayでOpenAIを直接プロキシする

Cloudflare AI GatewayのOpenAI向けProvider Native Endpointは、次の形式です。

https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai

Cloudflare公式ドキュメントでは、OpenAIを呼び出すときに https://api.openai.com/v1 を上記のAI Gateway URLに置き換える、と説明されています。 [developers...dflare.com]

OpenAI SDKの例

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai",
});
// Ensure your OpenAI API key is stored with BYOK
// or Unified Billing has credits
const response = await client.chat.completions.create({
  model: "gpt-5.5",
  messages: [
    { role: "user", content: "Hello from Cloudflare AI Gateway" }
  ],
});

console.log(response.choices[0].message.content);

CloudflareのOpenAI providerページでも、OpenAI SDKで baseURL をAI GatewayのOpenAI endpointに設定する例が示されています。 [developers...dflare.com]

ここで見られるもの

Cloudflare AI Gatewayは、AIアプリのリクエスト数、トークン、コスト、ログ、エラーなどを確認できる機能を提供しています。 [developers...dflare.com]

2. Cloudflare AI Gatewayのキャッシュを使う

Cloudflare AI Gatewayは、AI providerからのレスポンスをキャッシュし、同一リクエストに対してCloudflareのキャッシュから返すことができます。公式ドキュメントでは、これにより繰り返しリクエストでproviderへの往復を避けられる、と説明されています。 [langfuse.com]

ただし注意点があります。

Cloudflareのキャッシュは、現在はtext/image response向けで、基本的には「完全に同一のリクエスト」に対して効きます。デフォルトのcache keyにはprovider、endpoint、model、provider authentication header、request bodyなどが含まれるため、messagesやmodel parametersが少しでも変わると別のcache entryになります。 [langfuse.com]

キャッシュが向いている例

FAQ
固定プロンプトの分類
テンプレート生成
同じ入力が繰り返される社内ツール
botの定型応答

キャッシュが効きづらい例

自由会話
毎回contextが変わるAgent
userごとにpromptが動的に変わる処理

3. OpenRouterのBYOKを使う

次はOpenRouter側です。

OpenRouterは、OpenRouter creditsだけでなく、ユーザー自身のprovider API keyを使うBYOKをサポートしています。OpenRouter公式ドキュメントでは、provider keyを使うことで、rate limitやcostをprovider account側で直接管理できると説明されています。また、登録したprovider keysは暗号化され、指定providerにルーティングされるリクエストで使われると説明されています。 [openrouter.ai]

BYOKで注意すること

OpenRouterは、利用可能なprovider keyがある場合はそれを優先します。ただしデフォルトでは、そのkeyがrate limitやfailureになった場合、OpenRouter shared creditsへfallbackする可能性があります。これを避けたい場合は、個別keyで “Always use this provider” を設定できます。 [openrouter.ai]

これは重要です。

「絶対に自分のOpenAI API Keyだけを使いたい」場合は、OpenRouter側でこの設定を確認しておいた方が安全です。

4. OpenRouterからLangfuse / DatadogへTraceを送る

OpenRouterはLangfuseとの連携も用意されています。

Langfuseの公式ドキュメントでは、OpenRouterとの連携方法として次の2つが紹介されています。

OpenRouter Broadcastを使って、コード変更なしでLangfuseへtraceを送る
Langfuse OpenAI SDK wrapperを使って、手動でtraceする

OpenRouterはOpenAI API schemaを使うため、LangfuseのOpenAI SDK連携を利用できると説明されています。 [langfuse.com]

No-codeで使う場合：OpenRouter Broadcast

OpenRouter公式ドキュメントでは、Langfuse向けBroadcastの設定手順として、LangfuseでAPI key pairを作成し、OpenRouterの Settings > Observability で Broadcast を有効化し、LangfuseのSecret Key / Public Key / Base URLを設定してTest Connectionを実行する流れが説明されています。 [openrouter.ai]

OpenRouterのBroadcastは、外部のobservability / analytics platformへtraceを自動送信する機能です。公式ドキュメントでは、request/response data、token usage、cost information、timing、model informationなどがtraceに含まれると説明されています。 [openrouter.ai]

LangFuse 例：

DataDog LLM Observability 例：

Datadogを利用している場合、同様の手順でLLM Observabilityに接続し、トークン消費やレイテンシを可視化できます。

5. Cloudflare AI GatewayからOpenRouterへ流す

Cloudflare AI GatewayはOpenRouter providerもサポートしています。

Cloudflare公式ドキュメントでは、OpenRouter向けendpointは次の形式です。

https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openrouter

OpenRouterへリクエストする場合、既存のOpenRouter API URLをCloudflare AI GatewayのOpenRouter endpointに置き換える、と説明されています。 [developers...dflare.com]

OpenAI SDKの例

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: env.OPENROUTER_TOKEN,
  baseURL:
    "https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY/openrouter",
});

try {
  const chatCompletion = await openai.chat.completions.create({
    model: "openai/gpt-5.4-mini",
    messages: [{ role: "user", content: "What is Cloudflare?" }],
  });

  const response = chatCompletion.choices[0].message;

  return new Response(JSON.stringify(response));
} catch (e) {
  return new Response(e);
}

CloudflareのOpenRouter providerページでも、OpenAI SDKを使い、baseURL にCloudflare AI GatewayのOpenRouter endpointを設定する例が示されています。 [developers...dflare.com]

6. 二段構成にしたときの考え方

最終的な構成はこうなります。

App
  ↓
Cloudflare AI Gateway
  ↓
OpenRouter
  ↓
OpenAI BYOK
  ↓
Langfuse

この構成で、それぞれの役割は次のようになります。

レイヤー	役割
Cloudflare AI Gateway	Gatewayログ、analytics、cache、rate limiting、retry / fallback
OpenRouter	model routing、BYOK、Langfuse Broadcast
OpenAI BYOK	実際のOpenAI API利用、OpenAI側のrate limit / cost管理
Langfuse	trace、debug、LLM observability

Cloudflare AI GatewayはAIアプリとproviderの間に入り、observabilityとcontrolを提供するものとして説明されています。
OpenRouterのBYOKは、自分のprovider keyを使ってprovider account側のrate limitやcostを直接管理できるものとして説明されています。
OpenRouter Broadcastは、追加のアプリケーション計装なしに外部observability platformへtraceを送る機能として説明されています。 [developers...dflare.com] [openrouter.ai] [openrouter.ai]

7. どの構成を選ぶべきか

Cloudflare AI Gatewayだけでよいケース

まずは簡単にログを見たい
OpenAI SDKのbaseURLだけ変えたい
キャッシュやrate limitをCloudflare側で扱いたい
Langfuseまでは不要

OpenRouter + Langfuseが向いているケース

複数provider / 複数modelをまとめたい
BYOKで自分のAPI keyを使いたい
Langfuseにtraceを送りたい
Broadcastでコード変更を少なくしたい

二段構成が向いているケース

Cloudflare AI Gatewayのcacheやgateway logもほしい
OpenRouterのBYOKやLangfuse連携も使いたい
LLM Gatewayを二重にしてでも観測点を増やしたい

一方で、二段構成は中継レイヤーが増えます。公式ドキュメント上、Cloudflare AI GatewayとOpenRouterの組み合わせ自体はサポートされていますが、二段構成の実測レイテンシは自分の環境で確認する必要があります。CloudflareのOpenRouter provider endpointは公式に用意されています。 [developers...dflare.com]

まとめ

LLM Observabilityは、最初から大きな仕組みを作らなくても始められます。

まずはCloudflare AI GatewayでbaseURLを差し替えるだけでも、ログやanalyticsを見られるようになります。Cloudflare公式ドキュメントでも、AI GatewayはAIアプリのvisibilityとcontrolを提供すると説明されています。 [developers...dflare.com]

次に、OpenRouterを使うと、BYOKで自分のprovider keyを使いつつ、OpenRouter側のroutingやLangfuse連携を利用できます。OpenRouterのBYOK公式ドキュメントでは、provider keysを安全に保存し、指定providerへのリクエストで利用すると説明されています。 [openrouter.ai]

さらに観測点を増やしたい場合は、Cloudflare AI Gateway → OpenRouter → OpenAI BYOKという二段構成も選択肢になります。CloudflareのOpenRouter provider endpointは公式に用意されており、OpenRouter側ではLangfuse Broadcastによるtrace連携も利用できます。 [developers...dflare.com], [openrouter.ai]

個人的には、まずは次の順番で試すのが分かりやすいです。

Cloudflare AI Gateway → OpenAI
OpenRouter → OpenAI BYOK → Langfuse
Cloudflare AI Gateway → OpenRouter → OpenAI BYOK → Langfuse

いきなり全部入れるより、どのレイヤーで何が見えるのかを分けて確認した方が、トラブルシュートしやすいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up