Open
32

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

ピン留めされたアイテム

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

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

  1. Vercel
  2. Netlify
  3. Cloudflare Pages

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

現状だとCloudflare Pagesは完全な静的サイト向け

どのサービスを使うか検討する際「サーバーサイドでランタイムで実行しなければならない処理があるか」という点がまず大きな分かれ目になる。

静的ファイルのホスティング FaaSとの連携
Vercel
(Serverless Functions)
Netlify
(Netlify Functions)
Cloudflare Pages
(Cloudflare Workersに別でデプロイ)

例えばNext.jsなどのフレームワークでSSR(サーバーサイドレンダリング)することはCloudflare Pages単体では現状不可能。

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.tomlfunctionsの設定をすれば、指定したディレクトリのスクリプトをNetlify Functionsにデプロイしてくれる。

ちなみにVercelもNetlifyもFunctionsには内部でAWS Lambdaを使っているらしい。

Cloudflare Pages

現状ではサーバーサイドで動かしたいスクリプトは別でCloudflare Workersにデプロイする必要がある。CI/CDでシームレスにデプロイはできるのかもしれないが、PagesとWorkersでドメインを合わせたりするのが面倒そうな印象。

なお、Cloudflare WorkersはCDNのエッジで動くぶんパフォーマンスは抜群だが制限が厳しい(参考)。Next.jsやNuxt.jsなどのSSRを実現するのはおそらく難しい。新しく登場するWorkers Unboundを使えばいけるかも?

まとめると現時点ではCloudflare Pagesは完全な静的サイト(単純なWebサイトやJAMstackブログ、SPAなど)をホスティングするのに向いている。ただし、公式のブログ記事を読むと、Cloudflare PagesとWorkersをシームレスに扱えるように取り組んでいるとのことなので、今後状況は変わるかもしれない。

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

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.」と記載があるため、商用利用ができない。個人ブログに広告を貼るのもアウトかもしれない(?) OKらしい(コメンありがとうございます!)

Cloudflare PagesだとBandwidth無制限 かつ ホスティング可能なサイト数も無制限。すげーな。

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

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でデモサイトを作ってみた。

https://github.com/catnose99/gatsby-v3-demo

デプロイ開始後にサイトが閲覧できるようになるまでの時間(秒)を測ってみた。

初回デプロイ時 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

体感的に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つのコネクションからなのでかなり遅くなってます

独自ドメイン

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.

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

デプロイ

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つのプラットフォームのいずれもファイルに記載する形で設定できる。

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

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

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

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

アクセス制限

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

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

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

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

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

その他

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

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

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

一旦まとめる

  • Cloudflare Pagesは現状静的サイトをデプロイするときのみ選択肢に挙がってくる
  • 料金的にはCloudflare Pagesが最強
  • デプロイ体験はNetlifyとVercelが良い
  • (日本向けサイトなら)パフォーマンス面ではCloudflare PagesかVercelが良い
ログインするとコメントできます