Closed44

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

ピン留めされたアイテム
catnosecatnose

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

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

  1. Vercel
  2. Netlify
  3. Cloudflare Pages

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

catnosecatnose

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

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

Cloudflare Pages

Cloudflare Workersを利用できる。ただし、Cloudflare WorkersはCDNのエッジで動くぶんパフォーマンスは抜群だが制限が厳しいことに注意(参考)。現状ではCloudflare PagesでNext.jsのSSR(サーバーサイドレンダリング)を動かすのは難しそう。

catnosecatnose

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
catnosecatnose

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

catnosecatnose

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

catnosecatnose

デプロイ速度の比較

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

tukituki

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

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

catnosecatnose

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

catnosecatnose

サイトのパフォーマンス

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

RessRess

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

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

catnosecatnose

独自ドメイン

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

nabettunabettu

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

catnosecatnose

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

RessRess

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

catnosecatnose

デプロイ

GitHubから(CI/CD) CLI
Vercel Vercel CLI
Netlify Netlify CLI
Cloudflare Pages -

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

catnosecatnose

リダイレクト設定

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

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

shigahishigahi

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

RessRess

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

catnosecatnose

アクセス制限

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

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

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

Shinji YamadaShinji Yamada

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

catnosecatnose

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

dynamisdynamis

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

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

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

catnosecatnose

その他

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

nabettunabettu

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

catnosecatnose

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

tukituki

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

catnosecatnose

一旦まとめる

  • 料金的にはCloudflare Pagesが最強
  • デプロイ体験はNetlifyとVercelが良い
  • (日本向けサイトなら)パフォーマンス面ではCloudflare PagesかVercelが良い
このスクラップは26日前にクローズされました