Cloudflare Workersで公開したNext.jsがすぐCPUエラーになるバグを修正✨（at MCP Spaces / エムスペ）
最初に経緯...
最近、MCPがめっちゃ流行っているのでMCP入門サイトであるエムスペを作成し、Cloudflare Workersで公開しました！
ただページを何回かリロードすると、エラーになってしまいログを見るとCPUが足りないようでした。
仕方がないのでWorkersではなくPagesの方に移行して静的表示にしてエラーを回避していました。
でも、なんとかこの問題を解決しようと試みた結果、無事修正できたので共有します！
まず前提：エムスペはOpenNextで公開している
Cloudflare WorkersにNext.jsを公開する際、OpenNextというライブラリを使用することで簡単にデプロイできます！
（OpenNextスゲー！！）
ヌギーのブログサイトであるAsk NugeyもこのOpenNextを使用して公開しています。
疑問「元々SSGで生成されたページはずなのに...？？」
そもそも疑問だったのが、SSGで生成されたページを表示しているだけなのになぜそんなにCPUが使用されているのか。
解決法「Workers KVでキャッシュを利用する！！」
そこで、静的ページであれば一度生成されたものをキャッシュで保存すればいいのではないか？と考えました。
OpenNextのドキュメントにちょうどcachingに関するページを発見しました。
さらにちょうどSSGに関するキャッシュの利用方法があったので、これを参考にしました！
これで解決や！と思ったのも束の間、実際に設定してみるとstaticAssetsIncrementalCacheがエラーに！
どうやら最新のバージョンのOpenNext（0.6）ではどうやら使えなくなったようでした。
改めて調べると現状使用できるのは以下の2択でした
- Workers KV：Cloudflareの 階層型キャッシュ（Tiered Cache） を活用した高速なキーバリューストレージです。データをWorkers KVに書き込むと、Cloudflareのどのロケーションからでもそのデータを読み取ることができるようになります。つまり、アプリが一度データを取得してKVにキャッシュすれば、その後のリクエストは世界中どこからでもこのキャッシュにアクセスできます。なお、ビルド時に設定された値はWorkers Assetsによって配信されます。料金についてはCloudflareの公式ドキュメントをご参照ください。
- R2オブジェクトストレージ：大量の非構造化データ向けに設計された、コスト効率の高いS3互換のオブジェクトストレージです。データは単一のリージョンに保存されるため、キャッシュとの連携はやや遅くなる可能性がありますが、 リージョナルキャッシュ を使うことでその影響を軽減できます。
今回はKVを使用することにしました。
Workers KVの設定・使用方法
まずはKVのネームスペースを作成する必要があります。
以下のコマンドを叩くことでmcpspaces-NEXT_INC_CACHE_KVというKVを作成できます。
またはCloudflareのコンソール上からも作成できます。
npx wrangler@latest kv namespace create mcpspaces-NEXT_INC_CACHE_KV
その後、wrangler.jsoncファイルにkv_namespacesの設定を追加してデプロイすることでKVのキャッシュを使用することが可能になります。
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "mcpspaces",
~~~
"kv_namespaces": [
{
"binding": "mcpspaces_NEXT_INC_CACHE_KV",
"id": "XXXXXXXXXXXX"
}
]
}
結果は...
KVを設定してデプロイし、リロードしまっくてもサイトが落ちないか検証したところ...
無事、サイトは落ちずに正常に動作するようになりました🎉🎉🎉
（万が一、まだ落ちるようであればこっそり教えてください🥲）
あまり、KVについて理解できていなかったのですが、今回の調査でめっちゃKVいいじゃん！！状態になれました😊
おわりに
「「Cloudflare WorkersでNext.jsを公開するなら、最初からWorkers KVを設定しよう！！！」」
ヌギーのSNS（連絡先など）
Discussion