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}`
 
  try {
    const response = await fetch(`${gatewayBase}/openai/chat/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${c.env.OPENAI_API_KEY}`,
        // キャッシュ設定: 同一プロンプトを24時間キャッシュ
        'cf-aig-cache-ttl': cache ? '86400' : '0',
        // キャッシュスキップ条件（ユーザー固有のプロンプトはキャッシュしない）
        'cf-aig-skip-cache': userId.startsWith('personal:') ? 'true' : 'false',
      },
      body: JSON.stringify({
        model,
        messages: [{ role: 'user', content: prompt }],
        max_tokens: 1000,
      }),
    })
 
    if (!response.ok) {
      // OpenAI エラー時は Gemini にフォールバック
      console.warn(`OpenAI error: ${response.status}, falling back to Gemini`)
      return await callGeminiFallback(c, prompt, gatewayBase)
    }
 
    const data = await response.json()
    return c.json(data)
 
  } catch (error) {
    console.error('OpenAI request failed:', error)
    // ネットワークエラー時も Gemini にフォールバック
    return await callGeminiFallback(c, prompt, gatewayBase)
  }
})
 
// Gemini フォールバック関数
async function callGeminiFallback(c: any, prompt: string, gatewayBase: string) {
  try {
    const response = await fetch(
      `${gatewayBase}/google-ai-studio/v1beta/models/gemini-2.0-flash:generateContent`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-goog-api-key': c.env.GEMINI_API_KEY,
          'cf-aig-cache-ttl': '86400',
        },
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }],
        }),
      }
    )
 
    if (!response.ok) {
      throw new Error(`Gemini also failed: ${response.status}`)
    }
 
    const data: any = await response.json()
    
    // OpenAI 互換フォーマットに変換して返す
    return c.json({
      choices: [{
        message: {
          content: data.candidates[0].content.parts[0].text
        }
      }],
      _provider: 'gemini-fallback', // デバッグ用
    })
 
  } 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()
    .replace(/\s+/g, ' ')    // 複数スペースを単一スペースに
    .replace(/。\s*\n/g, '。') // 句読点後の改行を除去
    .toLowerCase()             // 大文字小文字を統一
}

// 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
  provider: string
}
 
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:${btoa(prompt).slice(0, 50)}`
      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
      const provider = data._provider || 'openai'
      
      const result: AIResponse = { content, fromCache: false, provider }
 
      // ローカルキャッシュに保存
      if (cache) {
        const cacheKey = `ai_cache:${btoa(prompt).slice(0, 50)}`
        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'
})