Full Stack Cloudflare Wokrers_at_Workers Tech Talks in Osaka_2025

Transcript

1. 大変だけど最高な Full Stack Cloudflare Wokrers @Workers Tech Talks in Osaka #2 Kosuke Horai
2. 自己紹介 • 名前: Kosuke Horai • X: @horai93 • 仕事: TypeScriptで全部書いちゃう少人数なチームでよく 働いています • 現職: “site:任意の転職サイト Cloudflare Workers” でhit した会社で働いています
3. 話すこと 1. Cloudflare Workers でFull Stack な Webアプリケーションを書きたい 2. Cloudflare Workers 全振りにおける課題 3. 運用してみた a. Bindingsが便利 4. 見えてきた課題と展望 a. Cache b. Database c. etc..
4. Cloudflare Workers でFull Stack な Webアプリ ケーションを書きたい
5. PagesじゃなくてWorkers? • WorkersでもPagesでも同じようなことができるが微妙に違う • 現状は双方に片方にしかない機能があったりする ◦ 雑にGithubと繋いでデプロイするのは Github Pagesの方が楽 ◦ 例えばStorybookはPagesとかでGithub接続でいいんじゃないかと思っています 1. Cloudflare Workers で Full Stack な Webアプリケーションを書きたい
6. WorkersとPagesは統合される（された？） 1. Cloudflare Workers で Full Stack な Webアプリケーションを書きたい
7. WorkersとPagesは統合される（された？） • 実際にはまだ中途半端な状態 • とはいえWorkersをベースにやっていくのが良さそう ◦ Pagesの方が特殊で、Workersの方が素直に感じている • これまではフロントエンドを考えるとPagesの方が有力だった ◦ Next.jsは next-on-pages (https://github.com/cloudflare/next-on-pages) でデプロイ可能 1. Cloudflare Workers で Full Stack な Webアプリケーションを書きたい
8. アプリケーションはNext.jsで書きたい！ • Remixを書いてたが求人を見てもNext.jsの方が多い • もちろんRemixや他のFWがダメな訳では無いがそれでもNext.jsが王道 ◦ （実際にはそんな理由で技術選定をするのは良くないですが、とはいえ Cloudflareを活かしたいとい う理由でNext.jsから離れてた筆者からするとキャッチアップが大変 ...） • Next.jsでcacheをうまく扱いながらサクサクなWeb Applicationを良い感じに書きた い！ 1. Cloudflare Workers で Full Stack な Webアプリケーションを書きたい
9. @opennextjs/opennextjs-cloudflare の登場 • 2024 9月26日にCloudflareのBuilder dayで発表された • WorkersでNext.jsが動かせる ◦ edge runtimeではなくNode.js runtime(Cloudflareによるnodejs compatibility) • 2025年3月7日時点ではまだ version@0.5.8 1. Cloudflare Workers で Full Stack な Webアプリケーションを書きたい
10. フロントエンドはNext.jsで書ける！！
11. APIはHonoで書きたい！
12. なぜ Hono? • Next.jsのApp Routerでサーバーも書い てしまうことはできる • とはいえapiとフロントは切り離しておき たい... • HonoでWeb StandardsなReq/Resに よるAPIの書き心地が最高 • Honoはどこでも動く のでもちろん Workersにデプロイできる！ 1. Cloudflare Workers で Full Stack な Webアプリケーションを書きたい https://x.com/honojs/status/1700865974201991635
13. FEもBEもWorkersで書いて、 どちらも妥協せず使える！ 最高！！
14. 本当に？？
15. @opennextjs/opennextjs-cloudflare の課題 • （再掲）2025年3月7日時点ではまだ version@0.5.8 • 直近までcacheサポートがなかった。。 • せっかくNext.js使うのにCacheが良い感じに扱えない 2. Cloudflare Workers 全振りにおける課題 (実は3月現在 d1によるCache サポートが入った @opennextjs/opennextjs-cloudflare#320)
16. データベースの枯れた選択肢がない • Cloudflare D1を採用する • トランザクションが必要だったり Writeヘビーだと怖いがReadメイ ンであれば使えそう • ただ10BGのsize limitがある 2. Cloudflare Workers 全振りにおける課題
17. 実際に運用してみた
18. CacheはProxyで実現 • HonoでProxyのWorkersを作成、KVにキャッシュする • Next.jsのアプリケーションは前段で全てCache Workersを通す 運用してみた 参考: Cloudflare Workersプロキシパターン https://zenn.dev/yusukebe/articles/647aa9ba8c1550
19. Service Bindingsが便利 • CacheのWorkerからNext.jsを呼び出すのにBindings(http)が使える • Next.jsからのデータ取得もBindings(RPC)でシームレスに繋がる 運用してみた
20. Service Bindingsが便利 • fetch部分を `c.env.NEXTJS_APP.fetch(...)` のようにするだけで呼べる • これによってNEXTJS_APPはhttpに露出しなくても呼び出せる 運用してみた
21. Next.jsからHonoへのデータ取得はRPCコール • 運用してみた
22. なんとか良い感じに！（？）
23. 課題、今後の展望
24. 今後の展望 • @opennextjs/cloudflareの成熟を待ちつつCacheを試す • BindingsでPR単位のプレビュー環境を作れない（作れても大変） • Cloudflare D1がまだ成熟していない？(有力なDBの選択肢の不足) ◦ データのエクスポートをするにも公式の export apiは処理がブロッキングされるため 気軽に実行できない (D1のdocumentより) > A running export will block other database requests. 󰢃ダメゼッタイ `npx wrangler d1 export <database_name> --remote --output=./database.sql` ◦ Branchingがサポートされる予定の模様
25. Appendix
26. Appendix - Service bindingsのLatencyがないは本当？ • new Date()を返すだけのWorkers を用意 • Service BindingsのRPCにより呼 び出してかかった時間を計測
27. Appendix - Service bindingsのLatencyがないは本当？ • 初回リクエストで10msぐらい余分にかかってそう • 直後のリクエストではそれがなくなる
28. Thank You!