Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる

ピン留めされたアイテム

catnose

2021年3月にCloudflare Pagesの一般利用ができるようになった。静的サイトをホスティングする選択肢としては他にVercelやNetlify、GitHub Pagesなどが挙がってくる。

このスクラップでは次の3つのサービスを比較してみる。

Vercel
Netlify
Cloudflare Pages

お気軽にコメントをどうぞ。

catnose

現状だと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（サーバーサイドレンダリング）を動かすのは難しそう。

Fujita Takashi

Workers "bundled" なら Workers KV が使えるので、SSR できそうですね！

j0hnta

Cloudflare Pages で Next.js 動かしてみました。

/api に hello.ts しか書いてなくても、Failed to publish your Function. Got error: Error: Script startup exceeded CPU time limit.と CPU タイムリミット超過のエラーが出てデプロイに失敗するので、まだ実用的ではなさそうです（/api を削除したらデプロイ成功）。

catnose

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無制限かつホスティング可能なサイト数も無制限。すげーな。

それぞれの詳しい料金は以下からどうぞ。

Hidden comment

すばる

古いスクラップにすみません。

すでに上で挙げられている記事のコメントによると、Google AdSense の利用が Fair Use Policy に具体的な禁止事項として示されたそうです。これはなかなか厳しい……

catnose

コメントありがとうございます！個人ブログにGoogle AdSenseを貼るだけでもNGなんですね。コメントを修正しておきました。

catnose

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強い。

catnose

デプロイ速度の比較

せっかくなのでリリースされたばかりの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つと比べて時間がかかるようだ。~~ 👇 コメント参照

tuki

Cloudflare Pagesではベータ版として「Fast Build」というものが導入され、
大幅に速度が改善しました。

私の環境にはなりますが、3分弱かかってたビルドが1分半ほどになってます！

catnose

そうなんですね！とても参考になる情報をありがとうございます！

Srgr0

Cloudflare Pagesについて、Fast Buildとしてベータ版が提供されていたものが正式公開され、ビルドが爆速になっています。
特に、以前はビルド環境の構築に数分を要していましたが、現在は数秒で完了するようになりました。

catnose

情報ありがとうございます！

catnose

サイトのパフォーマンス

計測を行なったのは以下の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で計測してみていただければ。

Ress

スループットの出ない1つのコネクションで複数のファイルを読み込むような形になっていた
https://blog.anatoo.jp/2020-08-03

上記に書いてあるように遠い場所かつ1つのコネクションからなのでかなり遅くなってます

catnose

HTTP3 / QUIC 対応

	HTTP3 / QUIC
Vercel	未対応だが今後対応されそう
Netlify	未対応。情報求む
Cloudflare Pages	対応済み

Cloudflare PagesのサイトでDevToolのネットワークを見てみるとProtocolがh3-29となっていることが確認できる。

参考：「Google Chrome」に「HTTP/3」「IETF QUIC」が段階的に導入

catnose

独自ドメイン

Vercel、Netlify、Cloudflare Pagesのどれもが簡単に独自ドメインを設定できる。設定不要でSSLにも対応。

nabettu

Cloudflareはネームサーバごと渡さなきゃならないって制限ありませんでしたっけ？

catnose

ドキュメントの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.

nabettu

おおーありがとうございます！

Ress

そのドメインのトップレベル (例: example.com)で運用する場合はCloudflareを使用する必要があるみたいです。
サブドメイン(例: www.example.com)ならCNAMEで運用可能みたいです。

catnose

デプロイ

	GitHubから（CI/CD）	CLI
Vercel	○	Vercel CLI
Netlify	○	Netlify CLI
Cloudflare Pages	○	-

VercelとNetlifyだとローカルからCLIを使ってデプロイできる。Cloudflare Pagesでは使えるCLIはまだ無いが、Cloudflare WorkersでwranglerというCLIが使えることを考えると今後対応されるかも？

Ress

ビルドコマンドなしでのアップロードができそうな感じなのでGitHubActionsから生成->特定のブランチにプッシュ->デプロイができるかもしれませんね ~~(未確認)~~

いけました
そしてビルド時間(デプロイ時間)は最小でいい感じです

catnose

おー、素晴らしい👏 👏 デプロイ時間が短い！

catnose

リダイレクト設定

	リダイレクト設定を記載するファイル
Vercel	vercel.json
Netlify	netlify.toml
Cloudflare Pages	_redirects

特定のパスを他のURLへリダイレクトしたい場合、3つのプラットフォームのいずれもファイルに記載する形で設定できる。

shigahi

思想的にはCloudflareのPage RulesやFirewall Rulesで制御する感じになるかと思います。キャッシュやその他のルールの透過、条件適用など、高度なリダイレクト機能が実現できます。

Ress

CloudflareでDNSを管理しているならページルールでリダイレクトの処理はできると思います〜(コマンドを送信したあとにページを更新されたら上記で言及されてました…)

catnose

情報ありがとうございます！修正します。

azu

GAになった際に _redirects ファイルがサポートされました。

catnose

情報ありがとうございます！修正しました。

catnose

アクセス制限

	料金
Vercel	月$150〜でパスワード設定可
Netlify	月$19〜でパスワード設定可
Cloudflare Pages	無料〜でアクセス制限可

~~Cloudflare Pagesでは今後対応される模様。~~ 2021/04/12追記：Cloudflare Pagesでアクセス制限が使えるようになりました。50人までのチームであれば無料でアクセス制限をかけられるようです。

今のところアクセス制限をかけられるのはプレビューページのみ…？

Shinji Yamada

正しい使い方か分かりませんが、Manage Policiesボタンで飛んだ先で追加のアプリケーションとして本番のドメインを指定することでProductionのページもアクセス制限できました。

catnose

おー、そうなのですね！貴重な情報ありがとうございます！

dynamis

Cloudflare Pages のアクセス制限機能 (Zero Trust を使ったアクセスポリシー設定) はオススメ出来ません。メールアドレス認証が面倒だとかその時の URL が嫌だとかもありますが、何よりも複数人で管理する場合などにとても困る＆柔軟性がありません。

作成時点でのメールアドレスリストに対してメール認証の設定がされるのですが、このアドレスリストを編集する方法がなく、メンバーリストが変わる度に設定を削除・再作成しなければなりません。また、メール認証する対象はメンバーに限られるため、外部の関係者に制限付きページの共有という利用が出来ません。

Cloudflare Pages は Worker 使えるのでそちらでベーシック認証かけるのが一番かな、と思います。

catnose

なるほど、詳しい情報をありがとうございます。

Naoki Takahashi

Pages への追加操作が多少面倒ですが、Zero Trust の Access Group で認証の対象メンバーを簡単に追加できるようになっていました 👀

catnose

その他

Netlifyだとフォームとの連携が簡単（Forms setup - Netlify）

ネタ切れ。どなたか「○○なら○○ができる」みたいな特徴を教えてください。

nabettu

この辺の周辺機能でいうと（Cloudflare WorkersとPagesの連携が今後更にしやすくなる前提でWorkersの機能として）内部でKVS持ってて、そのデータによってレスポンスを分ける事が出来るので、サイトはPagesでホスティングしつつOG画像の出し分け部分をWorkersで処理するみたいな事が出来そうです。（制限が強いですがレスポンスは早い）

catnose

それ楽しみですね。早く「SPAでいいけどOG画像だけは設定したい」ニーズを楽に実現できる選択肢が出てきてほしい。

Ress

cloudflareは標準だと各種バージョンが古いみたいですね

tuki

Netlify、Cloudflare PagesだとGitで管理されていない普通のファイルでも
直接アップロードできるようですね。（入門者向けに便利そう）

catnose

一旦まとめる

料金的にはCloudflare Pagesが最強
デプロイ体験はNetlifyとVercelが良い
（日本向けサイトなら）パフォーマンス面ではCloudflare PagesかVercelが良い