Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
2021年3月にCloudflare Pagesの一般利用ができるようになった。静的サイトをホスティングする選択肢としては他にVercelやNetlify、GitHub Pagesなどが挙がってくる。
このスクラップでは次の3つのサービスを比較してみる。
- Vercel
- Netlify
- Cloudflare Pages
お気軽にコメントをどうぞ。
現状だとCloudflare Pagesは完全な静的サイト向け
2021/11/17追記
Cloudflare PagesでWorkersと連携ができるようになりました。
Cloudflare Pages Goes Full Stack →
ブログによると現時点だと簡単に動かせるフレームワークはSvelteKitなどに限られるようですが、そのうちNuxt.jsやNext.js、React Server Componentsなどにも対応できるよう作業が進められているとのこと
静的ファイルのホスティング | FaaSとの連携 | |
---|---|---|
Vercel | ○ | ○ (Serverless Functions) |
Netlify | ○ | ○ (Netlify Functions) |
Cloudflare Pages | ○ | ○ (Cloudflare Workers) |
Vercel
VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。
VercelではちょっとしたWeb APIを用意したいときも、/api
ディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。
Netlify
サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.toml
でfunctions
の設定をすれば、指定したディレクトリのスクリプトをNetlify Functionsにデプロイしてくれる。
ちなみにVercelもNetlifyもFunctionsには内部でAWS Lambdaを使っているらしい。
Cloudflare Pages
Cloudflare Workersを利用できる。ただし、Cloudflare WorkersはCDNのエッジで動くぶんパフォーマンスは抜群だが制限が厳しいことに注意(参考)。現状ではCloudflare PagesでNext.jsのSSR(サーバーサイドレンダリング)を動かすのは難しそう。
Workers "bundled" なら Workers KV が使えるので、SSR できそうですね!
Cloudflare Pages で Next.js 動かしてみました。
/api
に hello.ts
しか書いてなくても、Failed to publish your Function. Got error: Error: Script startup exceeded CPU time limit.と CPU タイムリミット超過のエラーが出てデプロイに失敗するので、まだ実用的ではなさそうです(/api を削除したらデプロイ成功)。
Cloudflare Pagesだと無料で大規模サイトのホスティングもできそう
※ 2021年3月時点
無料プランでの Bandwidth制限 |
その他 | |
---|---|---|
Vercel | 100GB/月まで | 商用利用は不可 有料プランは$20/月〜 |
Netlify | 100GB/月まで | 有料プランは$19/月〜 |
Cloudflare Pages | 無制限 |
VercelとNetlifyが無料プラン(Free)だと月100GBのBandwidth制限。複数サイト合計での制限になるため、どこかの月で一気に数百万PVの流入があれば無料では収まりきらなくなる可能性がある。
VercelはPricingページに「Hobby plans are limited to personal, non-commercial use.」と記載があるため、商用利用ができない。個人ブログに広告を貼るだけでもProプランにする必要があるとのこと(すぐ後のコメント参照)。
Cloudflare PagesだとBandwidth無制限 かつ ホスティング可能なサイト数も無制限。すげーな。
それぞれの詳しい料金は以下からどうぞ。
古いスクラップにすみません。
すでに上で挙げられている記事のコメントによると、Google AdSense の利用が Fair Use Policy に具体的な禁止事項として示されたそうです。これはなかなか厳しい……
コメントありがとうございます!個人ブログにGoogle AdSenseを貼るだけでもNGなんですね。コメントを修正しておきました。
Cloudflare Pagesだと複数人でのサイト管理も無料
これはCloudflare Pagesのアピールポイントのようで、LPには次のように書かれている。
Unlimited seats for free: additional collaborators shouldn’t break the bank. With Pages, you can add them all for free.
- NetlifyのFreeプランでサイトを管理している場合一人追加するごとに$15/月かかる
- VercelではProプランでのみチームでのプロジェクト管理が可能。一人あたり$20/月かかる(例えば5人なら$100/月)
Cloudflare Pages強い。
デプロイ速度の比較
せっかくなのでリリースされたばかりのGatsby v3.0でデモサイトを作ってみた。
デプロイ開始後にサイトが閲覧できるようになるまでの時間(秒)を測ってみた。
初回デプロイ時 | 2回目 | 3回目 | |
---|---|---|---|
Vercel | 121s | 95s | 48s |
Netlify | 136s | 64s | 58s |
Cloudflare Pages | 171s | 182s | 186s |
※ 2〜3回目はGitHubリポジトリに変更をプッシュしてからサイトに反映されるまでの時間。
VercelとNetlifyは速い。初回デプロイ時に比べて2回目と3回目が大幅に速くになっているのでビルド時に部分的にキャッシュしているのかな?
何度か試すとこのへんの数字は変わってくると思うが、2021/03/04時点ではCloudflare Pagesのビルドは他2つと比べて時間がかかるようだ。 👇 コメント参照
サイトのパフォーマンス
計測を行なったのは以下の3つのURL
- Vercel: https://gatsby-v3-demo.vercel.app
- Cloudflare Pages: https://gatsby-v3-demo.pages.dev
- Netlify: https://frosty-jones-2df581.netlify.app
体感的にNetlifyが遅い
Netlifyの無料プランのCDNは日本リージョンには未対応(2020年8月の中の人のコメント)だからか、日本からアクセスしてみると体感で分かるレベルで他の2つより表示が遅い。
VercelとCloudflare Pagesの表示速度の差は(今回のデモサイトでは)体感では分からない。
Lighthouseで測ってみる
料金と並んで最も気になるのが表示速度。PageSpeed Insightsでそれぞれ3回測ってみる。
サーバー応答速度 | First Contentful Paint | Time to Interactive | |
---|---|---|---|
Vercel | 60ms 90ms 50ms |
0.8s 0.9s 0.8s |
1.9s 2.0s 1.9s |
Netlify | 240ms 220ms 210ms |
0.9s 0.8s 0.8s |
2.0s 1.9s 1.9s |
Cloudflare Pages | 80ms 80ms 60ms |
0.8s 0.8s 0.8s |
1.9s 1.9s 2.0s |
サーバーの応答速度がNetlifyが他より長い。
ブラウザからJSやCSSが読み込まれる表示速度に差が出るかなと思い「First Contentful Paint」と「Time to Interactive」の値も記録してみたがほとんど差が見られなかった。
ただ、Page Speed Insightsが日本のサーバーから計測を行なっているのかが分かっていない。
webpagetest.orgで測ってみる
リージョンを東京に設定して計測する。自動で3回測ってくれる。
Netlify
Cloudflare Pages
Vercel
説明不要かもしれないが「Mean」が平均で「Median」が中央値。VercelとCloudflare Pagesが速い。ややVercelの方が良い結果となったがこのあたりは誤差と言えるかもしれない。
気になる方は👆 のURLで計測してみていただければ。
スループットの出ない1つのコネクションで複数のファイルを読み込むような形になっていた
https://blog.anatoo.jp/2020-08-03
上記に書いてあるように遠い場所かつ1つのコネクションからなのでかなり遅くなってます
HTTP3 / QUIC 対応
HTTP3 / QUIC | |
---|---|
Vercel | 未対応だが今後対応されそう |
Netlify | 未対応。情報求む |
Cloudflare Pages | 対応済み |
Cloudflare PagesのサイトでDevToolのネットワークを見てみるとProtocolがh3-29
となっていることが確認できる。
独自ドメイン
Vercel、Netlify、Cloudflare Pagesのどれもが簡単に独自ドメインを設定できる。設定不要でSSLにも対応。
Cloudflareはネームサーバごと渡さなきゃならないって制限ありませんでしたっけ?
ドキュメントのAdding a custom domainを見るとCNAMEでも設定できるようです。
If you don't want to point your nameservers to Cloudflare, you can still use a custom CNAME record to use a single domain with Cloudflare Pages.
おおーありがとうございます!
そのドメインのトップレベル (例: example.com)で運用する場合はCloudflareを使用する必要があるみたいです。
サブドメイン(例: www.example.com)ならCNAMEで運用可能みたいです。
デプロイ
GitHubから(CI/CD) | CLI | |
---|---|---|
Vercel | ○ | Vercel CLI |
Netlify | ○ | Netlify CLI |
Cloudflare Pages | ○ | - |
VercelとNetlifyだとローカルからCLIを使ってデプロイできる。Cloudflare Pagesでは使えるCLIはまだ無いが、Cloudflare Workersでwrangler
というCLIが使えることを考えると今後対応されるかも?
リダイレクト設定
リダイレクト設定を記載するファイル | |
---|---|
Vercel | vercel.json |
Netlify | netlify.toml |
Cloudflare Pages | _redirects |
特定のパスを他のURLへリダイレクトしたい場合、3つのプラットフォームのいずれもファイルに記載する形で設定できる。
正しい使い方か分かりませんが、Manage Policiesボタンで飛んだ先で追加のアプリケーションとして本番のドメインを指定することでProductionのページもアクセス制限できました。
おー、そうなのですね!貴重な情報ありがとうございます!
Cloudflare Pages のアクセス制限機能 (Zero Trust を使ったアクセスポリシー設定) はオススメ出来ません。メールアドレス認証が面倒だとかその時の URL が嫌だとかもありますが、何よりも複数人で管理する場合などにとても困る&柔軟性がありません。
作成時点でのメールアドレスリストに対してメール認証の設定がされるのですが、このアドレスリストを編集する方法がなく、メンバーリストが変わる度に設定を削除・再作成しなければなりません。また、メール認証する対象はメンバーに限られるため、外部の関係者に制限付きページの共有という利用が出来ません。
Cloudflare Pages は Worker 使えるのでそちらでベーシック認証かけるのが一番かな、と思います。
なるほど、詳しい情報をありがとうございます。
Pages への追加操作が多少面倒ですが、Zero Trust の Access Group で認証の対象メンバーを簡単に追加できるようになっていました 👀
この辺の周辺機能でいうと(Cloudflare WorkersとPagesの連携が今後更にしやすくなる前提でWorkersの機能として)内部でKVS持ってて、そのデータによってレスポンスを分ける事が出来るので、サイトはPagesでホスティングしつつOG画像の出し分け部分をWorkersで処理するみたいな事が出来そうです。(制限が強いですがレスポンスは早い)
それ楽しみですね。早く「SPAでいいけどOG画像だけは設定したい」ニーズを楽に実現できる選択肢が出てきてほしい。
cloudflareは標準だと各種バージョンが古いみたいですね
Netlify、Cloudflare PagesだとGitで管理されていない普通のファイルでも
直接アップロードできるようですね。(入門者向けに便利そう)
一旦まとめる
- 料金的にはCloudflare Pagesが最強
- デプロイ体験はNetlifyとVercelが良い
- (日本向けサイトなら)パフォーマンス面ではCloudflare PagesかVercelが良い