CloudFlare Pages とは

CloudFlare Pages とは、世界的な CDN サービスを手掛ける CloudFlare が 2021/5/8 に正式リリースした静的サイトホスティングサービスのこと。よく似たサービスに Github Pages や Netlify　が挙げられる（実際このサイトも Github Pages で公開していた）。

実は Beta へのアーリーアクセス権は持っていて、以前からレスポンスの早さを Github Pages や Netlify と比較してその優秀さに驚愕していた。

CloudFlare Pages のトップページに書いてあるとおり、そのコンセプトは

Build fast sites. In record time. Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.

で、特徴としては以下らしい。

Developer-focused with effortless Git integration.

Advanced collaboration built-in with unlimited seats.

Unmatched performance on Cloudflare’s edge network.

Dynamic functionality with Cloudflare Workers.

日本語にするとだいたい

記録的な早さで高速にサイトをビルド。 Cloudflare Pages は、フロントエンド開発者が Web サイトを共同で展開するための JAMstack プラットフォームです。

簡単に Git と統合できるので開発者向け
組み込みでユーザ数の制限なく共同開発が可能
CloudFlare のエッジネットワークで優れた性能
CloudFlare Workers を用いた動的関数

となる。

この中で自分が惹かれたのは 3 つ目の性能だが、ここには書いてない無料で使える点も大きい。

他サービスとの機能比較

ここでは CloudFlare Pages と Github Pages, Netlify の機能面を比較する。
最新または詳細な情報は各サイトの料金ページなどを参照すること。

	CloudFlare Pages	Github Pages	Netlify
SSL 対応	○	○	○
カスタムドメイン	○	○	○
GitHub 連携	○	○	○
無料のホスト枠	∞	∞	∞
無料の転送枠	∞	∞	100 GB /月
ビルド	500 回/月	△ (Github Actions 使用で 2000 分/月)	300 分/月
プレビュー	PR 毎に ∞	×	ブランチ毎に ∞
コラボレート数	∞	∞	個人開発のみ
動的関数	10 万リクエスト/日	×	12.5 万リクエスト/月/サイト
サイト解析	○	×	△(有料)
その他の無料機能	プレビューへのアクセス制限	-	フォーム/認証/大容量メディア

こうして見ると、後発だけあって Github Pages と Netlify の良いところを組み合わせたのが CloudFlare Pages とも言える。

他サービスとの性能比較

ここでは CloudFlare Pages と Github Pages, Netlify の性能面を比較する。

静的サイトなので、 web.dev で測定したパフォーマンススコアを見る。また、今回は自作の react-template リポジトリを使って各サービスにホストした。

中身としては以下の画像のようなシンプルな React の SPA となっている。

デプロイ先の URL と結果は次の通り。

	CloudFlare Pages	Github Pages	Netlify
デプロイ先	リンク	リンク	リンク
結果	リンク	リンク	リンク
スコア	94	94	74

スコアを見ると CloudFlare Pages と Git Pages が 94 で高く、 Netlify が 74 で最下位となった。

まとめ

機能面と性能面を見ても、現状は CloudFlare Pages が優勢に見えるので、これからのホスト先は CloudFlare Pages とした。

付録

CloudFlare Pages の無料で使える Analytics

CloudFlare Pages へホスト先を移行

CloudFlare Pages とは

他サービスとの機能比較

他サービスとの性能比較

まとめ

付録