Zenn
🔥

Cloudflare - API Gateway - OpenAI API

2023/12/23に公開
Node.js
Cloudflare
OpenAI
ChatGPT
tech

この記事はCloudflare Advent Calendar 2023 - Qiitaの24日目の記事です。

Cloudflare API Gatewayとはその名の通り、CloudflareをOpenAI APIへのゲートウェイとして使用できる機能です。つまり、Cloudflareのエンドポイント経由でOpenAI APIを叩くことができます。

ブラウザ -> Cloudflare -> OpenAI

https://developers.cloudflare.com/ai-gateway/get-started/

具体的には、エンドポイント https://gateway.ai.cloudflare.com/v1/を、https://api.openai.com/v1へのリバース・プロキシーとして設定できます。

それの何が嬉しいかと言うと、Cloudflareでリクエストのキャッシュやレートリミットをすることで、OpenAI APIの利用料金を安くすることができます。

また、CFダッシュボードからアクセス・ログを確認することができます。リクエストのキャッシュ・ヒット、消費トークン数、レスポンスデータなどを確認できます。

API Gatewayの作成

CloudflareのダッシュボードからAPI Gatewayのエンドポイントの作成をします。AI > API Gatewayから作成します。

新規にAI Gatewayを作成します。お好きな名前をつけてください。

作成が完了します。画面右上のリンク[API Endpoints]をクリックします。

作成されたAI Gatewayのエンドポイントと、cURLコマンドのサンプルが表示されます。

Workersプロジェクトの作成

Webブラウザ -> CF Workers -> AI GW(OpenAI API)の構成で作成します。
まずは、CF Workersのプロジェクトを作成します。Hello World Workerを選択します。

CF Workersのプロジェクト作成
pnpm create cloudflare@latest

生成されたフォルダにcdします。workerをローカルで起動します。

workerの起動
pnpm run start

8787ポートで起動します。cURLでアクセスします。

curl
curl http://127.0.0.1:8787

Hello World!

このworkerに機能を付け足していきます。

OpenAI API

まずはGWを使用しない、ダイレクトにOpenAI APIを呼び出すパターンを説明します。それを踏まえてAI GW経由に変更する段取りで説明していきます。

OpenAI APIのライブラリをインストールします。

pnpm i openai

よくあるchatCompletionのコードを書きます。

src/openai.ts
import OpenAI from 'openai';

export interface Env {
	OPENAI_API_KEY: string;
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
		const openai = new OpenAI({
			apiKey: env.OPENAI_API_KEY
		});
		// make our request to the OpenAI API
		const stream = await openai.chat.completions.create({
			model: 'gpt-3.5-turbo',
			messages: [{ role: 'user', content: 'Tell me a story' }],
			stream: true
		});

		// Using our readable and writable to handle streaming data
		let { readable, writable } = new TransformStream();

		let writer = writable.getWriter();
		const textEncoder = new TextEncoder();

		// loop over the data as it is streamed from OpenAI and write it using our writeable
		for await (const part of stream) {
			console.log(part.choices[0]?.delta?.content || '');
			writer.write(textEncoder.encode(part.choices[0]?.delta?.content || ''));
		}

		writer.close();

		// Send readable back to the browser, so it can read the stream content
		return new Response(readable);
	}
};

wrangler.tomlに環境変数OPENAI_API_KEYを設定し、mainに作成したソースコードを指定します。

wrangler.toml
name = "cf-ai-gw"
main = "src/openai.ts"
compatibility_date = "2023-12-18"

[vars]
OPENAI_API_KEY = "sk-あなたのOpenAI APIキー"

workerを起動し、cURLで呼び出します。

workerの起動
pnpm run start
curl http://127.0.0.1:8787

実行結果が返ります。

API Gateway経由に変更

準備ができたところで、API Gateway経由に変更してみましょう。といっても、baseURLにエンドポイントを指定するだけです。xxxのところを最初にCFダッシュボードで確認したエンドポイントのものに書き換えてください。エンドポイントの最後にopenaiを付けるのを忘れないでください。

openai-gw.ts
const openai = new OpenAI({
	apiKey: env.OPENAI_API_KEY,
	baseURL: 'https://gateway.ai.cloudflare.com/v1/xxx/mygw-1/openai'
});

このようにソースコードを１行変更するだけで動きます。簡単ですね。

CFダッシュボードからアクセス・ログを確認することができます。

レート・リミットの設定もできます。

ソースコードをこちらに置きます。

Discussion