Rork アプリの AI コストを月 ¥50,000 から ¥5,000 に削減させた Cloudflare AI Gateway 設計

// workers/ai-proxy/src/index.ts
import { Hono } from 'hono'
import { cors } from 'hono/cors'
 
const app = new Hono<{ Bindings: {
  OPENAI_API_KEY: string
  GEMINI_API_KEY: string
  ANTHROPIC_API_KEY: string
  AI_GATEWAY_ACCOUNT_ID: string
  AI_GATEWAY_ID: string
  RATE_LIMIT: KVNamespace
}}>()
 
app.use('*', cors({
  origin: ['https://your-app-domain.com'],
  allowHeaders: ['Content-Type', 'Authorization', 'X-User-ID'],
}))
 
// ミドルウェア: ユーザーID必須チェック
app.use('/ai/*', async (c, next) => {
  const userId = c.req.header('X-User-ID')
  if (!userId) {
    return c.json({ error: 'Unauthorized' }, 401)
  }
  c.set('userId', userId)
  await next()
})
 
// テキスト生成エンドポイント
app.post('/ai/generate', async (c) => {
  const userId = c.get('userId')
  const body = await c.req.json()
  const { prompt, model = 'gpt-4o-mini', cache = true } = body
 
  // レート制限チェック（ユーザー単位：1時間に50リクエスト）
  const rateLimitKey = `ratelimit:${userId}:${Math.floor(Date.now() / 3600000)}`
  const currentCount = parseInt(await c.env.RATE_LIMIT.get(rateLimitKey) || '0')
  
  if (currentCount >= 50) {
    return c.json({ 
      error: 'Rate limit exceeded. Please wait before making more requests.',
      retryAfter: 3600 - (Date.now() % 3600000) / 1000
    }, 429)
  }
 
  // カウンターをインクリメント（TTL: 1時間）
  await c.env.RATE_LIMIT.put(rateLimitKey, String(currentCount + 1), {
    expirationTtl: 3600
  })
 
  // AI Gateway 経由で OpenAI を呼び出す
  const gatewayBase = `https://gateway.ai.cloudflare.com/v1/${c.env.AI_GATEWAY_ACCOUNT_ID}/${c.env.AI_GATEWAY_ID}`
 
  // キャッシュキーは自分で決める（理由は次章）
  const cacheKey = buildCacheKey(prompt, model, 'generate')
  const cacheable = cache && !userId.startsWith('personal:') && isCacheable(prompt)
 
  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${c.env.OPENAI_API_KEY}`,
    // 最初の1バイトが返るまでの上限。超えたらエラーになり、下の分岐へ落ちる
    'cf-aig-request-timeout': '8000',
    // 一時的な失敗はゲートウェイ側で再送（試行は最大5回、遅延は最大5秒）
    'cf-aig-max-attempts': '3',
    'cf-aig-retry-delay': '500',
    'cf-aig-backoff': 'exponential',
  }
 
  if (cacheable) {
    // この2行がないと、正規化した文字列はキャッシュに届かない
    headers['cf-aig-cache-key'] = cacheKey
    headers['cf-aig-cache-ttl'] = '86400'
  } else {
    headers['cf-aig-skip-cache'] = 'true'
  }
 
  try {
    const response = await fetch(`${gatewayBase}/openai/chat/completions`, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        model,
        messages: [{ role: 'user', content: prompt }],
        temperature: 0,
        max_tokens: 1000,
      }),
    })
 
    if (!response.ok) {
      // 429 以外の 4xx は「送った内容そのもの」が原因。
      // 別のプロバイダーへ回しても同じ結果になるので、ここで返す
      if (response.status >= 400 && response.status < 500 && response.status !== 429) {
        const detail = await response.text()
        console.warn(`OpenAI rejected the request: ${response.status} ${detail.slice(0, 200)}`)
        return c.json({ error: 'Invalid request for the AI provider' }, 400)
      }
      console.warn(`OpenAI error: ${response.status}, falling back to Gemini`)
      return await callGeminiFallback(c, prompt, gatewayBase, cacheable ? cacheKey : null)
    }
 
    const data = await response.json()
    // HIT / MISS をそのままクライアントへ渡す（体感速度の説明に使える）
    return c.json(data, 200, {
      'x-ai-cache-status': response.headers.get('cf-aig-cache-status') ?? 'UNKNOWN',
      'x-ai-provider': 'openai',
    })
 
  } catch (error) {
    console.error('OpenAI request failed:', error)
    // ネットワークエラー・タイムアウトは Gemini にフォールバック
    return await callGeminiFallback(c, prompt, gatewayBase, cacheable ? cacheKey : null)
  }
})
 
// Gemini フォールバック関数
async function callGeminiFallback(
  c: any,
  prompt: string,
  gatewayBase: string,
  cacheKey: string | null
) {
  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
    'x-goog-api-key': c.env.GEMINI_API_KEY,
    'cf-aig-request-timeout': '8000',
  }
  if (cacheKey) {
    // プロバイダーが変わるとキーも変わるので、接頭辞で分けておく
    headers['cf-aig-cache-key'] = `gemini:${cacheKey}`
    headers['cf-aig-cache-ttl'] = '86400'
  } else {
    headers['cf-aig-skip-cache'] = 'true'
  }
 
  try {
    const response = await fetch(
      `${gatewayBase}/google-ai-studio/v1beta/models/gemini-2.0-flash:generateContent`,
      {
        method: 'POST',
        headers,
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }],
          generationConfig: { temperature: 0 },
        }),
      }
    )
 
    if (!response.ok) {
      throw new Error(`Gemini also failed: ${response.status}`)
    }
 
    const data: any = await response.json()
    const text = data?.candidates?.[0]?.content?.parts?.[0]?.text
 
    // 安全性フィルタで止まった応答には content が入らない。
    // ここを素通りさせると、ステージングでは緑のまま本番でだけ TypeError になる
    if (typeof text !== 'string') {
      const reason = data?.promptFeedback?.blockReason ?? data?.candidates?.[0]?.finishReason
      console.error('Gemini returned no text. reason:', reason)
      return c.json({ error: 'AI service temporarily unavailable' }, 503)
    }
 
    // OpenAI 互換フォーマットに変換して返す
    return c.json(
      {
        choices: [{ message: { content: text } }],
        _provider: 'gemini-fallback', // デバッグ用
      },
      200,
      {
        'x-ai-cache-status': response.headers.get('cf-aig-cache-status') ?? 'UNKNOWN',
        'x-ai-provider': 'gemini',
      }
    )
 
  } catch (fallbackError) {
    console.error('All providers failed:', fallbackError)
    return c.json({ error: 'AI service temporarily unavailable' }, 503)
  }
}
 
export default app

// キャッシュ可否の判定ロジック
function shouldCache(prompt: string, context: Record<string, any>): {
  cache: boolean
  reason: string
} {
  // 個人名が含まれるプロンプトはキャッシュしない
  const personalPatterns = /私の|私は|自分の|名前は|[A-Z][a-z]+さん/
  if (personalPatterns.test(prompt)) {
    return { cache: false, reason: 'personal_content' }
  }
 
  // 時刻・日付参照があるプロンプトはキャッシュしない
  const timePatterns = /今日|現在|今|昨日|最新|今週/
  if (timePatterns.test(prompt)) {
    return { cache: false, reason: 'time_sensitive' }
  }
 
  // プロンプトが短すぎる（50文字以下）はキャッシュしない
  // → 同じ短いプロンプトでも文脈が異なる可能性が高い
  if (prompt.length < 50) {
    return { cache: false, reason: 'too_short' }
  }
 
  // カテゴリ分類・要約・翻訳は積極的にキャッシュ
  const cacheFriendlyPatterns = /以下を分類|要約して|翻訳して|カテゴリは|ジャンルを|タグを付けて/
  if (cacheFriendlyPatterns.test(prompt)) {
    return { cache: true, reason: 'classification_task' }
  }
 
  // デフォルト: キャッシュする
  return { cache: true, reason: 'default' }
}
 
// プロンプトの正規化（キャッシュヒット率向上）
function normalizePrompt(prompt: string): string {
  return prompt
    .trim()
    .normalize('NFKC')         // 全角コロン・全角英数を半角へ寄せる
    .replace(/\s+/g, ' ')      // 複数スペースを単一スペースに
    .replace(/。\s*\n/g, '。')  // 句読点後の改行を除去
    .toLowerCase()             // 大文字小文字を統一
}
 
// 正規化した文字列を、そのままキャッシュキーへ落とす
// FNV-1a: 依存ゼロで、Workers でも React Native でも同じ値になる
function fnv1a(input: string): string {
  let hash = 0x811c9dc5
  for (let i = 0; i < input.length; i++) {
    hash ^= input.charCodeAt(i)
    hash = Math.imul(hash, 0x01000193) >>> 0
  }
  return hash.toString(16).padStart(8, '0')
}
 
export function buildCacheKey(prompt: string, model: string, task: string): string {
  // モデルを含めるのは、差し替えたときに古い答えを引かないため
  return `${task}:${model}:${fnv1a(normalizePrompt(prompt))}`
}
 
export function isCacheable(prompt: string): boolean {
  return shouldCache(prompt, {}).cache
}

// hooks/useAI.ts
import { useState, useCallback } from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage'
 
const AI_WORKER_URL = 'https://your-worker.your-subdomain.workers.dev'
 
interface AIRequestOptions {
  prompt: string
  model?: string
  cache?: boolean
  localCacheTTL?: number  // ローカルキャッシュの有効期間（秒）
}
 
interface AIResponse {
  content: string
  fromCache: boolean      // 端末内キャッシュから返したか
  cacheStatus: string     // ゲートウェイ側の HIT / MISS
  provider: string
}
 
// サーバーと同じ関数を共有する（値がずれるとキーが割れる）
import { buildCacheKey } from '../shared/cacheKey'
 
 
export function useAI() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
 
  const generate = useCallback(async (options: AIRequestOptions): Promise<AIResponse | null> => {
    const { prompt, model = 'gpt-4o-mini', cache = true, localCacheTTL = 3600 } = options
    
    setLoading(true)
    setError(null)
 
    // ローカルキャッシュ（AsyncStorage）チェック
    // Cloudflare キャッシュの前段として、アプリ内でもキャッシュする
    if (cache) {
      const cacheKey = `ai_cache:${buildCacheKey(prompt, model, 'generate')}`
      try {
        const cached = await AsyncStorage.getItem(cacheKey)
        if (cached) {
          const { data, timestamp } = JSON.parse(cached)
          if (Date.now() - timestamp < localCacheTTL * 1000) {
            setLoading(false)
            return { ...data, fromCache: true }
          }
        }
      } catch (e) {
        // ローカルキャッシュエラーは無視して続行
        console.warn('Local cache read error:', e)
      }
    }
 
    try {
      const userId = await getUserId() // デバイスIDまたはユーザーID
      
      const response = await fetch(`${AI_WORKER_URL}/ai/generate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-User-ID': userId,
        },
        body: JSON.stringify({ prompt, model, cache }),
        signal: AbortSignal.timeout(15000), // 15秒タイムアウト
      })
 
      if (response.status === 429) {
        setError('しばらく時間をおいてからお試しください')
        setLoading(false)
        return null
      }
 
      if (!response.ok) {
        throw new Error(`AI request failed: ${response.status}`)
      }
 
      const data = await response.json()
      const content = data.choices?.[0]?.message?.content
      if (typeof content !== 'string') {
        throw new Error('AI response had no content')
      }
      const provider = response.headers.get('x-ai-provider') || data._provider || 'openai'
      // ゲートウェイが HIT を返したかどうかは、ここでしか分からない
      const cacheStatus = response.headers.get('x-ai-cache-status') || 'UNKNOWN'
 
      const result: AIResponse = { content, fromCache: false, cacheStatus, provider }
 
      // ローカルキャッシュに保存
      if (cache) {
        const cacheKey = `ai_cache:${buildCacheKey(prompt, model, 'generate')}`
        await AsyncStorage.setItem(cacheKey, JSON.stringify({
          data: result,
          timestamp: Date.now(),
        })).catch(() => {}) // キャッシュ保存失敗は無視
      }
 
      setLoading(false)
      return result
 
    } catch (err: any) {
      if (err.name === 'TimeoutError') {
        setError('AI の応答がタイムアウトしました')
      } else {
        setError('AI サービスに接続できません')
      }
      setLoading(false)
      return null
    }
  }, [])
 
  return { generate, loading, error }
}
 
// デバイス固有IDの取得（ユーザー登録前でも使用可能）
async function getUserId(): Promise<string> {
  let userId = await AsyncStorage.getItem('user_id')
  if (!userId) {
    userId = `device:${Math.random().toString(36).slice(2)}`
    await AsyncStorage.setItem('user_id', userId)
  }
  return userId
}

// ❌ これはキャッシュが効かない
const response = await fetch(gatewayUrl, {
  body: JSON.stringify({ 
    stream: true,  // ← ストリーミングはキャッシュ不可
    ...
  })
})
 
// ✅ キャッシュしたいリクエストは stream: false に
// UI でのストリーミング体験が必要な場合は、
// キャッシュヒット時だけ非ストリーミングで返す設計にする
const useStream = !cacheHit
const response = await fetch(gatewayUrl, {
  body: JSON.stringify({ 
    stream: useStream,
    ...
  })
})

// ❌ temperature が異なるとキャッシュキーが変わる
const responses = await Promise.all([
  fetchWithGateway({ prompt, temperature: 0.7 }),
  fetchWithGateway({ prompt, temperature: 0.8 }),
  // → 同じプロンプトなのに別のキャッシュキー
])
 
// ✅ カテゴリ分類・要約タスクは temperature: 0 に固定
// キャッシュヒット率が劇的に向上する
const response = await fetchWithGateway({ 
  prompt, 
  temperature: 0,  // 決定論的な出力 → キャッシュ効率最大
})

// ❌ OpenAI のレート制限エラー（429）でフォールバックしても、
//    Gemini でも同様の問題が起きる場合がある
 
// ✅ エラー種別に応じてフォールバック戦略を変える
async function callWithFallback(prompt: string, env: Env) {
  try {
    return await callOpenAI(prompt, env)
  } catch (error: any) {
    // 429 (レート制限): フォールバックは有効
    if (error.status === 429) {
      console.warn('OpenAI rate limited, trying Gemini')
      return await callGemini(prompt, env)
    }
    
    // 500/503 (サーバーエラー): フォールバック有効
    if (error.status >= 500) {
      return await callGemini(prompt, env)
    }
    
    // 400 (不正リクエスト): フォールバックしても意味がない
    // プロンプト側の問題なので、エラーをそのまま返す
    if (error.status === 400) {
      throw new Error('Invalid prompt format')
    }
 
    // タイムアウト: フォールバックを試みる
    if (error.name === 'TimeoutError') {
      return await callGemini(prompt, env)
    }
 
    throw error
  }
}

// workers/ai-proxy/src/analytics.ts
// よく使われるプロンプトパターンを分析してキャッシュ効率を改善する
 
export async function logRequest(
  prompt: string,
  cacheHit: boolean,
  latencyMs: number,
  env: Bindings
) {
  // KVにリクエストパターンを記録（集計用）
  const hourKey = `stats:${new Date().getHours()}`
  const stats = JSON.parse(await env.RATE_LIMIT.get(hourKey) || '{"total":0,"cached":0,"latency":0}')
  
  stats.total++
  if (cacheHit) stats.cached++
  stats.latency = (stats.latency * (stats.total - 1) + latencyMs) / stats.total
  
  await env.RATE_LIMIT.put(hourKey, JSON.stringify(stats), { expirationTtl: 86400 })
}
 
// 統計を取得するエンドポイント（管理者用）
app.get('/admin/stats', async (c) => {
  const stats = []
  for (let h = 0; h < 24; h++) {
    const hourKey = `stats:${h}`
    const data = await c.env.RATE_LIMIT.get(hourKey)
    if (data) {
      const parsed = JSON.parse(data)
      stats.push({
        hour: h,
        ...parsed,
        cacheHitRate: parsed.total > 0 ? (parsed.cached / parsed.total * 100).toFixed(1) : 0,
      })
    }
  }
  return c.json({ stats })
})

function getCacheTTL(prompt: string): number {
  // リアルタイム性の高い問い合わせ: 短時間キャッシュ
  if (/(トレンド|話題|最新|今人気|現在)/.test(prompt)) {
    return 3600 // 1時間
  }
  // ユーザー投稿の分類: 中期間キャッシュ
  if (/(分類|カテゴリ|タグ|ラベル)/.test(prompt)) {
    return 604800 // 1週間
  }
  // 静的コンテンツからの抽出: 長期間キャッシュ
  if (/(抽出|要約|翻訳)/.test(prompt)) {
    return 2592000 // 30日
  }
  return 86400 // デフォルト24時間
}
// fetch のヘッダーで: 'cf-aig-cache-ttl': String(getCacheTTL(normalizedPrompt))

export async function warmCacheForContent(
  contentText: string,
  gatewayBase: string,
  apiKey: string
): Promise<void> {
  const snippet = contentText.slice(0, 500).toLowerCase().trim().replace(/\s+/g, ' ')
 
  const warmupPrompts = [
    `以下を次のいずれかに分類してください（テクノロジー・健康・金融・娯楽・教育・その他）。コンテンツ: ${snippet}`,
    `以下のコンテンツから上位3つのキーワードを抽出してください: ${snippet}`,
    `以下のコンテンツを一文で要約してください: ${snippet}`,
  ]
 
  // ウォームアップリクエストを並列発火し、実ユーザー到着前にキャッシュを満たす
  await Promise.allSettled(
    warmupPrompts.map(prompt =>
      fetch(`${gatewayBase}/openai/chat/completions`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${apiKey}`,
          'Content-Type': 'application/json',
          'cf-aig-cache-ttl': '86400',
        },
        body: JSON.stringify({
          model: 'gpt-4o-mini',
          messages: [{ role: 'user', content: prompt }],
          temperature: 0,
          max_tokens: 200,
        }),
      })
    )
  )
}

app.post('/ai/generate', async (c) => {
  const userId = c.get('userId')
  const body = await c.req.json()
  const { prompt, cache = true, forceRefresh = false } = body
 
  // プレミアム会員は forceRefresh: true で最新結果を要求できる
  // サーバー側で判定するため、無料ユーザーはキャッシュを回避できない
  const isPremiumUser = userId.startsWith('premium:')
  const bypassCache = forceRefresh && isPremiumUser
  const cacheEnabled = cache && !bypassCache && isCacheable(normalizePrompt(prompt))
 
  // 以降は本文の実装と同じ
  // ヘッダーで: 'cf-aig-cache-ttl': cacheEnabled ? '86400' : '0'
})