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

cloudflare

2025-02-14

#はじめに

今回は、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...
Server-sent-events are buffered.   · Issue #199 · cloudflare/cloudflared favicon github.com
Server-sent-events are buffered.   · Issue #199 · cloudflare/cloudflared

原因は、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...
Server-sent-events are buffered.   · Issue #199 · cloudflare/cloudflared favicon github.com
Server-sent-events are buffered.   · Issue #199 · cloudflare/cloudflared

#まとめ

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