T-CREATOR

GPT-5 × Cloudflare Workers/Edge:低遅延サーバーレスのスターターガイド

GPT-5 × Cloudflare Workers/Edge:低遅延サーバーレスのスターターガイド

AI 技術の進化により、次世代の GPT-5 が登場し、さらに高度な自然言語処理が可能になりました。しかし、優れた AI モデルも、ユーザーとの接点となるインフラが遅ければ、その価値は半減してしまいます。

本記事では、GPT-5 と Cloudflare Workers/Edge を組み合わせることで、世界中のユーザーに低遅延で AI サービスを提供する方法を解説します。サーバーレスアーキテクチャの利点を活かしながら、実用的なコード例とともに、初めての方でも実装できるガイドをお届けしますね。

背景

サーバーレスとエッジコンピューティングの台頭

従来のサーバー運用では、インフラの構築や保守に多大なコストと時間がかかっていました。しかし、サーバーレスアーキテクチャの登場により、開発者はインフラ管理から解放され、アプリケーションのロジックに集中できるようになりました。

特に Cloudflare Workers は、世界中に分散されたエッジネットワーク上でコードを実行できるため、ユーザーの地理的な位置に関わらず、常に最寄りのサーバーからレスポンスを返すことが可能です。これにより、従来のクラウドサービスよりも大幅に遅延を削減できるのです。

GPT-5 とエッジコンピューティングの相性

GPT-5 は、OpenAI が提供する最新の言語モデルで、従来の GPT-4 を上回る性能を誇ります。このような高度な AI モデルをエッジで活用することで、以下のメリットが得られます。

  • 低遅延:ユーザーに最も近いエッジサーバーから応答
  • スケーラビリティ:自動的にトラフィックに応じてスケール
  • コスト効率:実行時間に応じた課金で無駄がない
  • グローバル展開:一つのコードで世界中にデプロイ

以下の図は、従来の中央集約型とエッジ分散型の違いを示しています。

mermaidflowchart TB
    subgraph traditional["従来の中央集約型アーキテクチャ"]
        userA["ユーザーA<br/>(東京)"] -->|長距離通信| centralServer["中央サーバー<br/>(米国西海岸)"]
        userB["ユーザーB<br/>(ロンドン)"] -->|長距離通信| centralServer
        centralServer -->|API呼び出し| gptAPI["GPT-5 API"]
    end

    subgraph edge["エッジ分散型アーキテクチャ"]
        userC["ユーザーC<br/>(東京)"] -->|短距離通信| edgeJP["Edge<br/>(東京)"]
        userD["ユーザーD<br/>(ロンドン)"] -->|短距離通信| edgeLN["Edge<br/>(ロンドン)"]
        edgeJP -->|API呼び出し| gptAPI2["GPT-5 API"]
        edgeLN -->|API呼び出し| gptAPI2
    end

エッジ分散型では、ユーザーとの通信距離が大幅に短縮され、応答時間が劇的に改善されます。特にリアルタイム性が求められるチャットボットや AI アシスタントでは、この差が顧客体験に直結するでしょう。

課題

従来のサーバーレスアーキテクチャの限界

AWS Lambda や Google Cloud Functions などの従来のサーバーレスプラットフォームでも、GPT-5 を利用することは可能です。しかし、以下のような課題がありました。

コールドスタート問題

サーバーレス関数は、一定時間アクセスがないとインスタンスが停止し、次回のリクエスト時に再起動が必要になります。この再起動時間(コールドスタート)により、初回アクセスが遅くなる問題がありました。

リージョン制約

従来のサーバーレスは特定のリージョン(例:us-east-1)にデプロイされるため、そのリージョンから遠い地域のユーザーは遅延が大きくなります。

実行時間制限

多くのサーバーレスプラットフォームには実行時間制限(例:15 分)があり、長時間の処理には向いていませんでした。

以下の図は、サーバーレスアーキテクチャにおける主な課題を整理したものです。

mermaidflowchart TD
    request["ユーザーリクエスト"] --> coldCheck{"コールドスタート<br/>判定"}
    coldCheck -->|初回/長時間未使用| coldStart["インスタンス起動<br/>(2-5秒の遅延)"]
    coldCheck -->|ウォーム状態| warmStart["即座に実行<br/>(遅延なし)"]
    coldStart --> execute["関数実行"]
    warmStart --> execute
    execute --> region{"リージョン<br/>距離"}
    region -->|近距離| fastResponse["高速応答<br/>(50-100ms)"]
    region -->|遠距離| slowResponse["低速応答<br/>(300-500ms)"]

GPT-5 API の課題

GPT-5 API を利用する際にも、以下のような技術的課題があります。

  • API キーの管理:セキュアに API キーを保管する必要がある
  • レート制限:API 呼び出し回数に制限があり、適切なキャッシュ戦略が必要
  • エラーハンドリング:タイムアウトや API 障害への対応
  • コスト管理:トークン使用量の監視と最適化

これらの課題を解決しながら、高性能な AI サービスを構築するには、適切なアーキテクチャ設計が不可欠です。

解決策

Cloudflare Workers/Edge の特徴

Cloudflare Workers は、これらの課題を解決する理想的なプラットフォームです。以下の特徴により、GPT-5 との組み合わせに最適な環境を提供します。

超高速起動

V8 エンジンをベースとした軽量な実行環境により、コールドスタートがほぼゼロです。従来のコンテナベースのサーバーレスと比較して、起動時間は 1 ミリ秒未満という驚異的な速さを実現しています。

グローバルエッジネットワーク

Cloudflare は世界 300 以上の都市にデータセンターを持ち、ユーザーに最も近い場所でコードを実行します。これにより、地理的な距離による遅延を最小化できます。

シンプルな開発体験

TypeScript/JavaScript で記述でき、npm パッケージも利用可能です。デプロイもwranglerコマンド一つで完了するため、学習コストが低く抑えられています。

以下の図は、Cloudflare Workers を使った GPT-5 サービスのアーキテクチャを示しています。

mermaidflowchart LR
    user["ユーザー"] -->|HTTPS リクエスト| cf["Cloudflare<br/>Edge Network"]
    cf -->|最寄りのエッジで実行| worker["Cloudflare Worker<br/>(TypeScript)"]
    worker -->|環境変数から取得| secrets["Secrets<br/>(API キー)"]
    worker -->|API 呼び出し| gpt5["GPT-5 API<br/>(OpenAI)"]
    gpt5 -->|JSON レスポンス| worker
    worker -->|キャッシュ保存| cache[("KV ストレージ<br/>(オプション)")]
    worker -->|JSON レスポンス| user

このアーキテクチャでは、ユーザーのリクエストが最寄りのエッジで処理され、API キーは Secrets 機能で安全に管理されます。さらに、頻繁なリクエストには KV ストレージでキャッシュを利用することで、コストと遅延を削減できるでしょう。

主要な解決ポイント

#課題解決策効果
1コールドスタートV8 エンジンによる超高速起動起動遅延 < 1ms
2リージョン制約300+都市のエッジネットワーク全世界で低遅延
3API キー管理Secrets 機能による暗号化保管セキュアな管理
4コスト最適化KV ストレージでのキャッシュAPI 呼び出し削減
5開発効率TypeScript 対応、CLI 提供短期間で構築可能

具体例

環境構築

それでは、実際に Cloudflare Workers で GPT-5 を利用するプロジェクトを構築していきましょう。まずは開発環境のセットアップから始めます。

必要なツールのインストール

Cloudflare Workers の開発には、Node.js と Wrangler という CLI ツールが必要です。

bash# Node.jsがインストールされていることを確認
node --version

# Wrangler CLIをグローバルにインストール
yarn global add wrangler

このコマンドで、Cloudflare Workers 専用の CLI ツール「Wrangler」がインストールされます。Wrangler を使うことで、プロジェクトの作成からデプロイまで、すべてコマンドラインで完結できるようになりますね。

プロジェクトの初期化

新しい Worker プロジェクトを作成します。

bash# 新規プロジェクトを作成(TypeScriptテンプレートを使用)
wrangler init gpt5-edge-worker --type webpack

# プロジェクトディレクトリに移動
cd gpt5-edge-worker

このコマンドで、TypeScript をサポートした Worker プロジェクトが生成されます。--type webpackオプションにより、外部パッケージのバンドルにも対応した環境が整います。

プロジェクト構造の確認

生成されたプロジェクトには、以下のような構造があります。

bashgpt5-edge-worker/
├── src/
│   └── index.ts          # メインのWorkerコード
├── wrangler.toml         # Cloudflare設定ファイル
├── package.json          # 依存関係定義
└── tsconfig.json         # TypeScript設定

src​/​index.tsが Worker のエントリーポイントとなり、ここに GPT-5 を呼び出すロジックを実装していきます。wrangler.tomlには、デプロイ先の設定やシークレット変数の定義を記述します。

基本実装

型定義とインターフェース

まず、TypeScript の型定義を行います。これにより、コードの安全性と可読性が向上します。

typescript// GPT-5 APIのリクエスト型
interface GPT5Request {
  model: string;
  messages: Array<{
    role: 'system' | 'user' | 'assistant';
    content: string;
  }>;
  temperature?: number;
  max_tokens?: number;
}

// GPT-5 APIのレスポンス型
interface GPT5Response {
  id: string;
  object: string;
  created: number;
  choices: Array<{
    index: number;
    message: {
      role: string;
      content: string;
    };
    finish_reason: string;
  }>;
  usage: {
    prompt_tokens: number;
    completion_tokens: number;
    total_tokens: number;
  };
}

これらの型定義により、GPT-5 API とのやり取りが型安全になります。特にmessages配列の構造を明示することで、誤ったデータ形式でのリクエストを防げますね。

環境変数の型定義

Cloudflare Workers では、環境変数をEnvインターフェースで定義します。

typescript// Cloudflare Workers環境変数の型定義
interface Env {
  // OpenAI APIキー(Secretsに保存)
  OPENAI_API_KEY: string;
  // KVネームスペース(キャッシュ用、オプション)
  GPT_CACHE?: KVNamespace;
}

この型定義により、コード内で環境変数を使用する際に、IDE の補完機能が働き、タイプミスを防げます。OPENAI_API_KEYは必須、GPT_CACHEはオプションとして定義しています。

メインの Worker ロジック

ここから Worker のメイン処理を実装します。リクエストを受け取り、GPT-5 を呼び出し、レスポンスを返す一連の流れです。

typescript// Workerのエントリーポイント
export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    // CORSヘッダーの設定(ブラウザからの呼び出しに対応)
    const corsHeaders = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    };

    // プリフライトリクエストへの対応
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders });
    }

    // POSTメソッドのみ受け付ける
    if (request.method !== 'POST') {
      return new Response('Method Not Allowed', {
        status: 405,
        headers: corsHeaders,
      });
    }

    try {
      // リクエストボディの解析
      const body = (await request.json()) as {
        message: string;
      };

      // GPT-5への応答生成を実行
      const response = await generateGPT5Response(
        body.message,
        env
      );

      // 成功レスポンスを返す
      return new Response(JSON.stringify(response), {
        headers: {
          'Content-Type': 'application/json',
          ...corsHeaders,
        },
      });
    } catch (error) {
      // エラーハンドリング
      console.error('Error:', error);
      return new Response(
        JSON.stringify({
          error: 'Internal Server Error',
          message:
            error instanceof Error
              ? error.message
              : 'Unknown error',
        }),
        {
          status: 500,
          headers: {
            'Content-Type': 'application/json',
            ...corsHeaders,
          },
        }
      );
    }
  },
};

このコードでは、まず CORS 対応を行い、ブラウザからのクロスオリジンリクエストを許可しています。POST メソッドのみを受け付け、それ以外のメソッドには 405 エラーを返します。エラーが発生した場合は、適切なエラーメッセージとともに 500 エラーを返すようになっています。

GPT-5 API 呼び出しの実装

リクエスト生成関数

GPT-5 API を呼び出すための関数を実装します。この関数が、実際に OpenAI のエンドポイントと通信を行います。

typescript// GPT-5 APIを呼び出してレスポンスを生成する関数
async function generateGPT5Response(
  userMessage: string,
  env: Env
): Promise<{ reply: string; tokens: number }> {
  // GPT-5 APIエンドポイント
  const apiUrl =
    'https://api.openai.com/v1/chat/completions';

  // リクエストボディの構築
  const requestBody: GPT5Request = {
    model: 'gpt-5-turbo', // GPT-5のモデル名
    messages: [
      {
        role: 'system',
        content:
          'あなたは親切で知識豊富なアシスタントです。',
      },
      {
        role: 'user',
        content: userMessage,
      },
    ],
    temperature: 0.7,
    max_tokens: 500,
  };

  // API呼び出しの実行(次のコードブロックで実装)
  const response = await callGPT5API(
    apiUrl,
    requestBody,
    env
  );

  return response;
}

この関数では、ユーザーからのメッセージを受け取り、GPT-5 の API リクエスト形式に整形しています。systemロールでアシスタントの振る舞いを定義し、userロールで実際のユーザーメッセージを渡していますね。

API 呼び出し実行関数

実際に HTTP リクエストを送信し、レスポンスを処理する関数です。

typescript// OpenAI APIへのHTTPリクエストを実行
async function callGPT5API(
  apiUrl: string,
  requestBody: GPT5Request,
  env: Env
): Promise<{ reply: string; tokens: number }> {
  // APIリクエストの実行
  const apiResponse = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${env.OPENAI_API_KEY}`, // 環境変数からAPIキーを取得
    },
    body: JSON.stringify(requestBody),
  });

  // レスポンスのステータスチェック
  if (!apiResponse.ok) {
    const errorText = await apiResponse.text();
    throw new Error(
      `OpenAI API Error: ${apiResponse.status} - ${errorText}`
    );
  }

  // レスポンスのパース(次のコードブロックで処理)
  const data = await parseAPIResponse(apiResponse);

  return data;
}

ここでは、fetch API を使って OpenAI のエンドポイントに POST リクエストを送信しています。環境変数OPENAI_API_KEYから API キーを取得し、Authorization ヘッダーに設定します。API からエラーが返された場合は、適切なエラーメッセージをスローするようになっていますね。

レスポンス解析関数

API からのレスポンスを解析し、必要な情報を抽出します。

typescript// OpenAI APIレスポンスを解析
async function parseAPIResponse(
  apiResponse: Response
): Promise<{ reply: string; tokens: number }> {
  // JSONレスポンスのパース
  const data: GPT5Response = await apiResponse.json();

  // 応答テキストの取得
  const reply =
    data.choices[0]?.message?.content ||
    '応答を生成できませんでした。';

  // 使用トークン数の取得
  const tokens = data.usage?.total_tokens || 0;

  return { reply, tokens };
}

この関数では、GPT-5 のレスポンスから実際の応答テキストと使用トークン数を抽出しています。エラーケースも考慮し、応答が存在しない場合はデフォルトメッセージを返すようになっています。

キャッシュ機能の実装

頻繁に同じ質問が来る場合、毎回 GPT-5 を呼び出すのはコスト面で非効率です。Cloudflare KV ストレージを使ってキャッシュ機能を実装しましょう。

キャッシュキー生成

ユーザーメッセージからキャッシュキーを生成します。

typescript// メッセージからキャッシュキーを生成(SHA-256ハッシュ)
async function generateCacheKey(
  message: string
): Promise<string> {
  // メッセージをバイト配列に変換
  const encoder = new TextEncoder();
  const data = encoder.encode(message);

  // SHA-256ハッシュを生成
  const hashBuffer = await crypto.subtle.digest(
    'SHA-256',
    data
  );

  // バイト配列を16進数文字列に変換
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');

  return `gpt5:${hashHex}`;
}

この関数は、ユーザーメッセージを SHA-256 でハッシュ化し、一意のキャッシュキーを生成します。同じメッセージに対しては常に同じキーが生成されるため、効率的にキャッシュを活用できますね。

キャッシュ確認と保存

キャッシュの確認と保存を行う拡張版の応答生成関数です。

typescript// キャッシュを考慮したGPT-5応答生成
async function generateGPT5ResponseWithCache(
  userMessage: string,
  env: Env
): Promise<{
  reply: string;
  tokens: number;
  cached: boolean;
}> {
  // KVストレージが利用可能かチェック
  if (env.GPT_CACHE) {
    // キャッシュキーの生成
    const cacheKey = await generateCacheKey(userMessage);

    // キャッシュから取得を試みる
    const cached = await env.GPT_CACHE.get(
      cacheKey,
      'json'
    );

    if (cached) {
      // キャッシュヒット
      console.log('Cache hit for:', cacheKey);
      return {
        ...(cached as { reply: string; tokens: number }),
        cached: true,
      };
    }
  }

  // キャッシュミス、またはKVが無効な場合はAPIを呼び出す
  const response = await generateGPT5Response(
    userMessage,
    env
  );

  // レスポンスをキャッシュに保存(24時間)
  if (env.GPT_CACHE) {
    const cacheKey = await generateCacheKey(userMessage);
    await env.GPT_CACHE.put(
      cacheKey,
      JSON.stringify(response),
      { expirationTtl: 86400 } // 24時間 = 86400秒
    );
  }

  return { ...response, cached: false };
}

この実装により、同じ質問に対しては 2 回目以降はキャッシュから即座に応答が返されます。24 時間の有効期限を設定しているため、情報の鮮度も保たれますね。

エラーハンドリング

本番環境では、様々なエラーケースに対応する必要があります。以下は、より堅牢なエラーハンドリングの実装例です。

タイムアウト処理

API 呼び出しにタイムアウトを設定し、長時間応答がない場合に適切に処理します。

typescript// タイムアウト付きAPIリクエスト
async function callGPT5APIWithTimeout(
  apiUrl: string,
  requestBody: GPT5Request,
  env: Env,
  timeoutMs: number = 30000 // デフォルト30秒
): Promise<{ reply: string; tokens: number }> {
  // タイムアウトPromiseの作成
  const timeoutPromise = new Promise<never>((_, reject) => {
    setTimeout(() => {
      reject(
        new Error(`Request timeout after ${timeoutMs}ms`)
      );
    }, timeoutMs);
  });

  try {
    // API呼び出しとタイムアウトを競合させる
    const result = await Promise.race([
      callGPT5API(apiUrl, requestBody, env),
      timeoutPromise,
    ]);

    return result;
  } catch (error) {
    // タイムアウトエラーの詳細なログ
    if (
      error instanceof Error &&
      error.message.includes('timeout')
    ) {
      console.error('API request timed out:', {
        url: apiUrl,
        timeout: timeoutMs,
        timestamp: new Date().toISOString(),
      });
    }
    throw error;
  }
}

この実装により、OpenAI API が応答しない場合でも、一定時間後に適切にエラーを返すことができます。ユーザーが無限に待たされることを防ぎ、より良い体験を提供できるでしょう。

リトライロジック

一時的なネットワークエラーに対応するため、リトライ機能を実装します。

typescript// 指数バックオフによるリトライ機能
async function callGPT5APIWithRetry(
  apiUrl: string,
  requestBody: GPT5Request,
  env: Env,
  maxRetries: number = 3
): Promise<{ reply: string; tokens: number }> {
  let lastError: Error | null = null;

  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      // API呼び出しを試行
      const result = await callGPT5APIWithTimeout(
        apiUrl,
        requestBody,
        env
      );
      return result;
    } catch (error) {
      lastError =
        error instanceof Error
          ? error
          : new Error('Unknown error');

      // 最後の試行でなければリトライ
      if (attempt < maxRetries - 1) {
        // 指数バックオフ: 2^attempt * 1000ms
        const backoffMs = Math.pow(2, attempt) * 1000;
        console.log(
          `Retry attempt ${
            attempt + 1
          } after ${backoffMs}ms`
        );

        // 待機
        await new Promise((resolve) =>
          setTimeout(resolve, backoffMs)
        );
      }
    }
  }

  // すべてのリトライが失敗した場合
  throw new Error(
    `Failed after ${maxRetries} attempts: ${lastError?.message}`
  );
}

この関数は、API エラーが発生した場合に最大 3 回まで自動的にリトライします。指数バックオフにより、リトライ間隔を徐々に長くすることで、サーバーへの負荷を軽減していますね。

デプロイ設定

wrangler.toml の設定

Cloudflare Workers のデプロイには、wrangler.tomlファイルで設定を行います。

toml# Cloudflare Workers設定ファイル
name = "gpt5-edge-worker"
main = "src/index.ts"
compatibility_date = "2024-01-01"

# アカウント情報(Cloudflareダッシュボードから取得)
account_id = "your_account_id"

# KVネームスペースのバインディング(キャッシュ用)
[[kv_namespaces]]
binding = "GPT_CACHE"
id = "your_kv_namespace_id"

# 環境変数(本番環境)
[env.production]
name = "gpt5-edge-worker-production"

この設定ファイルでは、Worker の名前、エントリーポイント、KV ネームスペースのバインディングを定義しています。実際のアカウント ID と KV ネームスペース ID は、Cloudflare ダッシュボードから取得して設定してください。

Secrets の設定

API キーなどの機密情報は、Secrets として安全に保管します。

bash# OpenAI APIキーをSecretとして設定
wrangler secret put OPENAI_API_KEY

# プロンプトが表示されるので、APIキーを入力
# Enter the secret text you'd like assigned to the variable OPENAI_API_KEY on the script named gpt5-edge-worker:
# sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

このコマンドを実行すると、API キーが暗号化されて Cloudflare のサーバーに安全に保存されます。コード内ではenv.OPENAI_API_KEYとして参照できますが、値自体はソースコードに含まれないため、セキュリティが保たれます。

デプロイの実行

すべての設定が完了したら、実際にデプロイを行います。

bash# プロジェクトのビルドとデプロイを実行
wrangler deploy

# 本番環境へデプロイする場合
wrangler deploy --env production

デプロイが成功すると、以下のような URL が表示されます。

arduino✨ Successfully published your script to
 https://gpt5-edge-worker.your-subdomain.workers.dev

この URL に対して POST リクエストを送信することで、世界中のどこからでも低遅延で GPT-5 を利用できるようになります。

テスト実装

ローカルテスト

デプロイ前にローカル環境でテストを実行しましょう。

bash# ローカル開発サーバーの起動
wrangler dev

# 別のターミナルでcurlコマンドでテスト
curl -X POST http://localhost:8787 \
  -H "Content-Type: application/json" \
  -d '{"message": "TypeScriptとは何ですか?"}'

ローカル開発サーバーでは、コードの変更が即座に反映されるため、開発効率が大幅に向上します。本番デプロイ前に十分にテストを行いましょう。

エンドツーエンドテスト

実際のユースケースを想定したテストコードです。

typescript// テスト用クライアントコード(Node.js環境)
async function testGPT5Worker() {
  const workerUrl =
    'https://gpt5-edge-worker.your-subdomain.workers.dev';

  // テストケース1: 通常のリクエスト
  console.log('Test 1: Normal request');
  const response1 = await fetch(workerUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      message:
        'JavaScriptとTypeScriptの違いを教えてください',
    }),
  });
  const data1 = await response1.json();
  console.log('Response:', data1);

  // テストケース2: 同じリクエスト(キャッシュヒットを確認)
  console.log('\nTest 2: Cached request');
  const response2 = await fetch(workerUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      message:
        'JavaScriptとTypeScriptの違いを教えてください',
    }),
  });
  const data2 = await response2.json();
  console.log('Response (should be cached):', data2);
}

// テストの実行
testGPT5Worker();

このテストでは、同じ質問を 2 回送信することで、キャッシュ機能が正しく動作しているかを確認できます。2 回目のレスポンスは即座に返ってくるはずですね。

パフォーマンス最適化

ストリーミングレスポンス

長い応答を生成する場合、ストリーミングレスポンスを使うことで、ユーザー体験を向上させることができます。

typescript// ストリーミングレスポンスの実装
async function streamGPT5Response(
  userMessage: string,
  env: Env
): Promise<Response> {
  const apiUrl =
    'https://api.openai.com/v1/chat/completions';

  // ストリーミングを有効化したリクエストボディ
  const requestBody = {
    model: 'gpt-5-turbo',
    messages: [
      {
        role: 'system',
        content: 'あなたは親切なアシスタントです。',
      },
      { role: 'user', content: userMessage },
    ],
    stream: true, // ストリーミングを有効化
  };

  // OpenAI APIへのリクエスト
  const apiResponse = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify(requestBody),
  });

  // レスポンスをそのままストリーミング
  return new Response(apiResponse.body, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive',
    },
  });
}

ストリーミングレスポンスにより、GPT-5 が生成したテキストを逐次的にユーザーに表示できます。特に長文の応答では、ユーザーが待ち時間を感じにくくなる効果があります。

バッチ処理

複数のリクエストを効率的に処理するバッチ機能です。

typescript// 複数メッセージの一括処理
async function batchProcessMessages(
  messages: string[],
  env: Env
): Promise<Array<{ message: string; reply: string }>> {
  // 並列処理でパフォーマンスを向上
  const promises = messages.map(async (message) => {
    const response = await generateGPT5ResponseWithCache(
      message,
      env
    );
    return { message, reply: response.reply };
  });

  // すべての処理が完了するまで待機
  const results = await Promise.all(promises);

  return results;
}

この実装により、複数の質問を一度に処理できます。Promise.allを使うことで、すべてのリクエストを並列に実行し、処理時間を大幅に短縮できるでしょう。

まとめ

本記事では、GPT-5 と Cloudflare Workers/Edge を組み合わせた低遅延サーバーレスアーキテクチャの構築方法を解説しました。

Cloudflare Workers の超高速起動とグローバルエッジネットワークにより、従来のサーバーレスプラットフォームの課題であったコールドスタートやリージョン制約を解決できます。さらに、KV ストレージを活用したキャッシュ機能により、コスト効率も大幅に向上させることができました。

実装面では、TypeScript による型安全な開発、適切なエラーハンドリング、リトライ機能、ストリーミングレスポンスなど、本番環境で必要となる要素を網羅的にカバーしています。これらの実装パターンは、GPT-5 だけでなく、他の AI API サービスにも応用可能です。

今後、AI サービスはますます身近なものになり、リアルタイム性や低遅延が求められるシーンも増えていくでしょう。Cloudflare Workers のようなエッジコンピューティング技術を活用することで、ユーザーに最高の体験を提供できる AI アプリケーションを構築できますね。

ぜひ本記事のコード例を参考に、あなた自身の GPT-5 アプリケーションを構築してみてください。

関連リンク