Cloudflare Tunnelを使ってストリーミングレスポンスを返すときのコツ

#はじめに

今回は、Cloudflare Tunnelを使ってストリーミングレスポンスを返すときのコツについて紹介します。
生成AIをつかっていると、AIからのレスポンスをストリーミングにして、リアルタイムにメッセージを返すことでユーザー体験を向上させていると思います。
しかし、Cloudflare Tunnelを使っていると、ストリーミングされないことがありましたので、その対処法について紹介します。

#現象

メッセージをストリームで返してローカル環境で開発してきちんと動いていても、Cloudflare Tunnel経由だと、ストリーミングされない現象がありました。
次のような流れで、リクエスト・レスポンスが行われているとします。

1. Cloudflare Tunnel
2. cloudflared
3. traefik
4. Node.js Chat API Server(Vercel AI-SDK使用)
5. Ollama

#原因

調査をしていて、cloudflare経由だとNGで、traefik経由だとOKであることがわかりました。
以前も似たようなことあったなぁと思いつつ、下記のissueを見つけました。

Server-sent-events are buffered. · Issue #199 · cloudflare/cloudflared

I've been having difficulty streaming responses to clients using Server-Sent Events (SSE) while using Argo. Argo (or Cloudflare) appears to be doing some sort of buffering that is preventing data f...

github.com

原因は、Cloudflare Tunnelで使っているcloudflaredが、バッファリングしていて、ストリーミングされないようです。
この手のネットワーク上の問題である場合、デバッグが困難なので少し解決するのに時間がかかります。

#解決策

HTTPレスポンスヘッダーで下記のように設定すると解決しました。

Content-Type: text/event-stream

Github Issueにもコメントがあります。

Server-sent-events are buffered. · Issue #199 · cloudflare/cloudflared

I've been having difficulty streaming responses to clients using Server-Sent Events (SSE) while using Argo. Argo (or Cloudflare) appears to be doing some sort of buffering that is preventing data f...

github.com

#まとめ

今回は、Cloudflare Tunnelを使ってストリーミングレスポンスを返すときのコツについて紹介しました。
Cloudflare Tunnelを使ってストリーミングレスポンスを返すときは、HTTPレスポンスヘッダーにContent-Type: text/event-streamを設定しないと、ストリーミングとして処理されなかったので、注意が必要です。