コンテンツにスキップ

OpenAIに接続するWorkerをAI Gateway経由でデプロイする

Last reviewed: 12 months ago

このチュートリアルでは、AI Gatewayを通じてOpenAIに呼び出しを行うWorkerをデプロイする方法を学びます。AI Gatewayは、より多くの分析、キャッシング、レート制限、ロギングを使用してAIアプリケーションをより良く観察し、制御するのに役立ちます。

このチュートリアルでは、2023年8月にリリースされた最新のv4 OpenAIノードライブラリを使用します。

始める前に

すべてのチュートリアルは、Cloudflare Workersアカウント、C3 ↗、およびWranglerのセットアップを行うスタートガイドをすでに完了していることを前提としています。

1. AI GatewayとOpenAI APIキーを作成する

CloudflareダッシュボードのAI Gatewayページで、右上のプラスボタンをクリックして新しいAI Gatewayを作成します。ゲートウェイとエンドポイントの名前を設定できます。APIエンドポイントボタンをクリックしてエンドポイントをコピーします。OpenAI、HuggingFace、Replicateなどのプロバイダー固有のエンドポイントから選択するか、特定のスキーマを受け入れ、モデルのフォールバックとリトライをサポートするユニバーサルエンドポイントを使用できます。

このチュートリアルでは、OpenAIプロバイダー固有のエンドポイントを使用するので、ドロップダウンからOpenAIを選択し、新しいエンドポイントをコピーします。

このチュートリアルにはOpenAIアカウントとAPIキーが必要です。まだ持っていない場合は、新しいOpenAIアカウントを作成し、APIキーを作成してこのチュートリアルを続行してください。APIキーは後で使用できるように安全な場所に保管してください。

2. 新しいWorkerを作成する

コマンドラインでWorkerプロジェクトを作成します：

Terminal window
npm create cloudflare@latest -- openai-aig

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

新しいopen Workerプロジェクトに移動します：

新しいプロジェクトディレクトリを開く
cd openai-aig

新しいopenai-aigディレクトリ内で、src/index.jsファイルを見つけて開きます。このファイルをチュートリアルのほとんどの設定に使用します。

最初に生成されたindex.jsファイルは次のようになります：

export default {
  async fetch(request, env, ctx) {
    return new Response("Hello World!");
  },
};

3. WorkerでOpenAIを設定する

Workerプロジェクトが作成されたので、OpenAIへの最初のリクエストを行う方法を学びます。OpenAI APIと対話するためにOpenAIノードライブラリを使用します。npmを使用してOpenAIノードライブラリをインストールします：

OpenAIノードライブラリをインストールする
npm install openai

src/index.jsファイル内で、export defaultの上にopenaiのインポートを追加します：

import OpenAI from "openai";

fetch関数内で、設定を行い、作成したAI Gatewayエンドポイントを使用してOpenAIApiクライアントをインスタンス化します：

import OpenAI from "openai";


export default {
  async fetch(request, env, ctx) {
    const openai = new OpenAI({
      apiKey: env.OPENAI_API_KEY,
      baseURL:
        "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai", // ここにAI Gatewayエンドポイントを貼り付けてください
    });
  },
};

これを機能させるには、wrangler secret putを使用してOPENAI_API_KEYを設定する必要があります。これにより、APIキーが環境に保存され、Workerがデプロイされたときにアクセスできるようになります。このキーは、OpenAIダッシュボードで以前に作成したAPIキーです：

APIキーをWorkers環境に保存する
npx wrangler secret put OPENAI_API_KEY

ローカル開発でこれを機能させるために、Workerプロジェクト内に新しいファイル.dev.varsを作成し、この行を追加します。OPENAI_API_KEYを自分のOpenAI APIキーに置き換えてください：

ローカルにAPIキーを保存する
OPENAI_API_KEY = "<YOUR_OPENAI_API_KEY_HERE>"

4. OpenAIリクエストを行う

これで、OpenAIのChat Completions API ↗にリクエストを行うことができます。

使用したいモデル、役割とプロンプト、リクエストの最大トークン数を指定できます。

import OpenAI from "openai";


export default {
  async fetch(request, env, ctx) {
    const openai = new OpenAI({
      apiKey: env.OPENAI_API_KEY,
      baseURL:
        "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai",
    });


    try {
      const chatCompletion = await openai.chat.completions.create({
        model: "gpt-4o-mini",
        messages: [{ role: "user", content: "ニューロンとは何ですか？" }],
        max_tokens: 100,
      });


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


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

5. Workerアプリケーションをデプロイする

アプリケーションをデプロイするには、npx wrangler deployコマンドを実行してWorkerアプリケーションをデプロイします：

Workerをデプロイする
npx wrangler deploy

これで、<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.devでWorkerをプレビューできます。

6. AI Gatewayを確認する

CloudflareダッシュボードのAI Gatewayに移動すると、最近のリクエストがログに記録されているのが見えるはずです。また、設定を調整して、ログ、キャッシング、レート制限の設定を管理することもできます。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings