Proxyman で Node.js の OpenAI API をデバッグする

このチュートリアルでは、OpenAI API（/chat/completions）を呼び出すシンプルな NodeJS サーバーとチャットクライアントを作成し、Proxyman で HTTP/HTTPS 通信を確認する方法を紹介します。OpenAI を使ったときに裏側で何が起きているのかをデバッグしたい場合に役立ちます。

このチュートリアルで達成できることは次のとおりです：

Proxyman macOS をセットアップする
Express JS で、OpenAI を呼び出すシンプルな NodeJS サーバーを開発する
NodeJS サーバーにメッセージを送信するシンプルな HTML チャットクライアント
✅ Proxyman で OpenAI への HTTP/HTTPS のリクエストとレスポンスをキャプチャする

Proxyman で OpenAI への HTTP/HTTPS のリクエストとレスポンスをキャプチャしているところ

1. 前提条件

Proxyman macOS（Proxyman.com からダウンロード）OpenAI

2. Proxyman のセットアップ

Proxyman.com から Proxyman をインストールします
Proxyman を開き、Certificate Menu → Install Certificate for macOS に進んで、画面の手順に従って証明書をインストールします

macOS 向け Proxyman 証明書をインストールする

これで Proxyman は、Mac 上のあらゆる HTTPS 通信をインターセプトできる状態になりました。

3. ChatGPT サンプルアプリを起動する

OpenAI の ChatGPT API を呼び出す、シンプルな RESTful サーバーが必要です。

GitHub からソースコードをクローンして実行しましょう。

git clone https://github.com/ProxymanApp/chatgpt-nodejs-app
cd https://github.com/ProxymanApp/chatgpt-nodejs-app
npm install

.env ファイルを開き、OPENAI_API_KEY を自分の OpenAI API キーに更新します。キーは OpenAI Dashboard から取得できます

OPENAI_API_KEY=your_openai_api_key

NodeJS サーバーを起動します

npm run dev

これで NodeJS サーバーがポート 3000 で起動し、http://localhost:3000 で静的な HTML ファイルを配信します。

GPT とチャットして、どのように動作するか確認してみてください。

ChatGPT サンプルアプリ

基本的な構成図は次のとおりです：

NodeJS サーバー

チャットクライアントは、ユーザーのメッセージを含む POST /chat リクエストを NodeJS サーバーに送信します
NodeJS サーバーは、OpenAI の https://api.openai.com/v1/chat/completions に API リクエストを送信します
NodeJS サーバーは、レスポンスをチャットクライアントに返します
チャットクライアントがメッセージを表示します

チャットクライアントから直接 API を呼び出さない理由は、OpenAI の API キーをチャットクライアントから隠したいからです。

コードを理解するために、server.js と index.html ファイルを確認しましょう。

よくある質問

1. NodeJS サーバーが `https://api.openai.com/v1/chat/completions` へリクエストを送る様子を見たい

回答：

幸い、Proxyman なら、チャットクライアントから NodeJS サーバーへの HTTP/HTTPS 通信を 1 クリックでキャプチャできます。

Proxyman で Setup Menu → Automatic Setup を開き、好みのターミナルを選択します（私は iTerm を使っています）。「Open new Terminal」ボタンをクリックします

Automatic Setup で NodeJS サーバーの HTTPS 通信をキャプチャする

このターミナルで NodeJS サーバーを実行します

npm run dev

Web ブラウザに戻り、http://localhost:3000 にアクセスして ChatGPT サンプルアプリを開きます
GPT と何度かチャットして、どのように動作するか確認します
Proxyman に戻ると、チャットクライアントから NodeJS サーバーへの HTTP/HTTPS 通信が表示されます

Proxyman で OpenAI への HTTP/HTTPS のリクエストとレスポンスをキャプチャしているところ

ご覧のとおり、NodeJS サーバーから OpenAI を呼び出すときの HTTP/HTTPS 通信は、Proxyman が自動的にキャプチャします。

2. チャットクライアントからの /chat リクエストの詳細を見たい

回答：

localhost:3000 にアクセスして何度かチャットすると、Proxyman は標準の状態では localhost:3000 の通信をキャプチャできません。理由は、localhost へのすべての通信がプロキシを経由しないためです。これは macOS の仕組みによるものです。

最近のバージョンの Proxyman では、Setup → Automatic Setup から、準備済みの Chrome ウィンドウを開けます。これは、ブラウザの localhost 通信をキャプチャする最も簡単な方法です。この設定を使えない場合でも、下の /etc/hosts の方法が引き続き有効な代替手段になります。

sudo vim /etc/hosts

ファイルに次の行を追加します：

127.0.0.1 proxyman.debug
::1 proxyman.debug

proxyman.debug は任意のドメイン名に変更できます。

ファイルを保存して終了します。

次に、Google Chrome を開いて http://proxyman.debug:3000 にアクセスし、何度かチャットしてください。チャットクライアントからの /chat リクエストの詳細が表示されます。

localhost の通信をキャプチャする

詳しくは localhost サーバーからリクエストが表示されない場合をご覧ください。

4. 次のステップ

このチュートリアルでは、Automatic Setup を使って、Node.js サーバーから OpenAI への HTTP/HTTPS 通信をキャプチャする方法を紹介しました。サンプルは Chat Completions エンドポイントを使用しています。新しいプロジェクトでは、代わりに Responses API を使う場合もあります。どちらの呼び出しも api.openai.com に送られるため、Proxyman はどちらもキャプチャできます。

OPENAI_API_KEY はサーバー側に置き、ソースコード管理の外に保存してください。ブラウザ側のコードには決して書き込まないでください。Proxyman のログをエクスポートまたは共有する前に、Authorization ヘッダーと、非公開のプロンプトやレスポンスのデータを削除してください。キーが漏えいした場合は、OpenAI ダッシュボードで新しいキーに置き換えてください。

Automatic Setup は次の環境にも対応しています：

NodeJS
Python
Ruby
PHP
Go

ご不明な点があれば、Proxyman ドキュメントをご覧ください。

Proxyman は、高性能な macOS/Windows/Linux アプリで、開発者が iOS デバイス、iOS シミュレータ、Android デバイスの HTTPS 通信をキャプチャできるようにします。

https://proxyman.com から入手できます

Noah Tran

2025年3月30日