CloudflareのJamstack(Cloudflare pagesとCloudflare workers sites)

Jamstackとは？

jam = JavaScript/APIs/Markupの頭文字

https://jamstack.org/
https://qiita.com/ozaki25/items/4075d03278d1fb51cc37

vercelのブログから引用

Jamstack(JavaScript・API・マークアップ)という設計手法が登場し、フロントエンドとバックエンドを切り分けることが容易になりました。これにより、バックエンドが足枷になることなく、フロントエンドを今まで以上に効率よく作ることができます。

どんな事ができるのか？

動的サイト

faasと組み合わせて動的サイトを作成する試みが出てきている。

静的サイト

ISR, SPA, SSR ,SSG等

この辺の単語がわからない方は下記をご覧ください。

静的サイト jamstack参考サイト

https://zenn.dev/unemployed/articles/5ae3040453bc1b
https://tech.012grp.co.jp/entry/2021/03/25/125014
https://scrapbox.io/riku19981027-69787355/CSR,_SSG,_SSR,_ISR%10%E8%BE%BA%E3%82%8A%E3%81%AE%E6%A6%82%E5%BF%B5%E3%82%92%E6%95%B4%E7%90%86%E3%81%99%E3%82%8B

cloudflareのJamstack

  • cloudflare pages : CDNにデプロイし静的なコンテンツを返す、所謂jamstack環境
  • cloudflare workers sites : workers KVにデプロイしworkersでリクエストを受けてworkers KVから返す。

の２つの選択肢があり。
まず workers sitesを説明します。
cloudflare pagesを説明し。
その後cloudflare pagesと他jamastackを比較します。

cloudflare workers site

cloudflare workers siteサマリー

公式説明

  • workers KVにデプロイしworkersでリクエストを受けてworkers KVから返す。
  • pagesよりもworkersに制限がない。(下記は上記公式からの抜粋) → Cloudflare pages functions の実装により問題が無くなりつつある？
    • you cannot port custom behavior in your Workers script — such as custom caching logic — over to your Cloudflare Pages.
    • Workers Sites template
  • 他jamstackと非互換率が高い。(移植性が高い)
  • workers siteの方が遅い
  • Git連携はなし
  • workersが常に呼ばれるのでリクエス数等の制限を受ける。

cloudflare workers site まとめ

Cloudflare pages functionsが実装され選ぶメリットが少なくなっている。

cloudflare pages

cloudflare pages サマリー

公式説明

  • CDNにデプロイし静的なコンテンツを返す。
  • workers sitesよりもworkersに制限があると公式にあるが、Cloudflare pages functionsが実装され問題がなくなりつつあるかもしれない。
  • pagesの方が、ベンダーロックが少なく他jamstackへの移行は楽。
  • workers sitesよりこちらの方が速い : (体感できる程ではない？)
  • jamastackサービスとして比較されるのは大抵pagesなので、pagesの方で他jamastackと比較します。
  • Git連携
    • git指定ブランチpull
      • build
      • deploy
  • deploy hook
  • ビルド時間は遅かったが、初期化速度はFast buildsにより改善された。
  • Cloudflare pages functionsが実装され、workers込のローカルテストも可能。

build環境

https://developers.cloudflare.com/pages/platform/build-configuration#language-support-and-tools

2022/06時点のサポート環境

  • Node.js : 17.x

その他の環境は上記を確認のこと

cloudflare pages 料金体系

https://pages.cloudflare.com/#pricing

  • 無料プラン有
  • リクエストと通信量、無制限無料
  • plan毎にビルド数制限
Free Pro Business
料金 $0 $20/mo $200/mo
build at a time 1 5 20
builds per month 500 5,000 20,000

cloudflare workers site とpages比較参考資料

公式のSitesからPagesへの移行説明。

Cloudflare Workers Sitesと、Cloudflare Pagesのパフォーマンス比較

競合サマリー

vercel・netlify

　上記二社は静的ホスティング環境(jamstack環境)のサービス提供がメインで、pop数から見ての通り純粋なCDN会社とはバックボーンが異なる。
技術スタック的にjamstack環境では優れてる反面、サーバーサイド側やそれ以外のエッジサービスが劣る面がある。

  • netlify
    jamstackを最初に作った会社、無料planは日本にCDNエッジが無い。

  • vercel
    Next.jsの開発元が作ったホスティングサービス、Next.jsとの相性がよく、Next.jsでSSR・ISRが作りやすくNext.jsユーザーに人気。

Vercel社のCEOを務める@rauchgによる記事 理念やVercel社の開発姿勢がよく書かれている。

また別ブログでVercel社のvisionが以下として記述されている。

Build the SDK for Web Lower the barrier of entry Focus on the end-user

cloudflare pages

　技術スタック的にセキュリティがメインの会社、エッジコンピューティングの１サービスとしてjamstack環境が提供されている。
jamstackとしては後発組、jamstack単体では負けている部分が多々ある。
　提供エッジサービスが多く他サービスとの連携に強み。
　無料planでも十分使える、基本従量課金はない。がトラフィックが多い場合コスパは最も優れる。

AWS (Amplify) ・GCP (Firebase)

　上記二社は大手クラウド会社、マルチクラウド等管理の手間が増えずに済む。

競合比較表 (2022/2/14)

サーバー種類
 プロトコル リクエスト・通信 課金 組み込みFaas
CDN POP
 ビルド速度
SSR・ISR
cloudflare pages HTTP/3 無し Cloudflare pages functions 国内:東京・大阪・九州・沖縄
世界:250箇所		 遅い→改善される vercelに劣る
vercel HTTP/2 従量課金 - 国内:東京
世界 16箇所		 速い best
netlify HTTP/2 従量課金 - 国内無料:無し
国有料:東京
世界無料:7箇所
世界有料:15箇所		 速い vercelに劣る
AWS (Amplify) HTTP/2 従量課金 - 国内:東京・大阪
世界:310箇所		 速い vercelに劣る
GCP (Firebase) HTTP/2 従量課金 - 国内:東京・大阪
世界:180箇所		 速い vercelに劣る

競合比較サマリー

あくまで個人的な評価

SPA、SSG

SPA、SSGの場合は横一線、どのサービスでも導入は簡易で乗り換えも楽だと思われる。

SSR・ISR 他

next.jsの場合現状vercel一強、他もできるものもあるが難易度が高かったり、制限や機能制限がある事がある。
今後next.jsに各種新機能が追加された場合vercelから真っ先に実装されると思われる。

ビルド時間

cloudflare pages が劣っていたが、Fast buildsが実装され環境構築時間が改善されている。

配信速度

netlifyは無料版の場合、日本にCDNがなく導入候補から外れやすい。 cloudflare pagesとvercelはほぼ同じという記述が多く見られるが、http/3対応と大阪・九州・沖縄にエッジがあるので特に西日本でのレイテンシはcloudflareの方が分がある。

従量課金

cloudflareのみ転送とリクエストは無制限。

組み込みFaas

CloudflareがCloudflare pages functionsをサービスし、ローカル環境のテスト環境もある。

資料

https://estrilda.damonge.com/post/cloudflare-vercel-compare
https://blog.ojisan.io/hosting-battle-2021/
https://zenn.dev/catnose99/scraps/6780379210136f
https://www.serversus.work/topics/tnbyk7u7qm7delrafvda/
https://hackmd.io/@euxn23/r1zO5zzpw

関連サービス

下記サービス上で動作してる

作成日時 : 2022年02月21日 　　 更新日時 : 2022年07月29日

© 2023 Dev Blog