投稿:

更新:

Cloudflare Pagesのメリットとデメリットを解説【上手に使うとコスパ最強】

Cloudflare Pages
Build your next application with Cloudflare Pages
Cloudflare Pages favicon https://pages.cloudflare.com/
Cloudflare Pages

こんにちは、カーテン買い替えてハッピーなこふです。

本記事の内容は、更新日時での最新情報となります。サービス提供側が仕様・料金体系を突然変更する可能性もあります。 実際の画面をお見せしつつ、公式ページの情報もとを示します。

Cloudflare Pages のメリットとデメリットを解説

基本的には、以下の目的を想定しています。

  • 個人〜数人規模で
  • 小〜中規模の開発に用いる

大規模開発には AWS を使った方が安い可能性があります。 サーバー側でのレンダリング、チームとしての要件、ビルド回数などを考慮すると、という感じ。 単なる金額だけの問題ではなく、それによる会社のシステム運用にも関わりそう。

メリット

数多くのメリットを感じていて、実際のこのサイトやサブドメインで展開しているツールにも利用しています。

  • メリット1:データ転送の帯域幅が無制限
  • メリット2:サイト数・リクエスト数が無制限
  • メリット3:チーム開発するにしても、小〜中規模レベルなら無料でできる
  • メリット4:Cloudflare Zero Trust でさまざまなアクセス制限が無料で可能
  • メリット5:商用利用が可能
  • メリット6:世界中に CDN が配置されており高速配信が可能

メリット1:データ転送の帯域幅が無制限

ホスティングサービス(Web ページを配信するサービス)では一般に、CDN からデータを配信しますが、その量を帯域幅と言います。

本来の意味は周波数的な考えで、光通信や通信システムの用語です(なんで配信にも使われるのかな) その転送量が無料でも有料でも無制限です。以下のスクショ参照です。

参考:https://pages.cloudflare.com/

つまり、いくらバズっても無料です。心配が減って良いですね。バズったことはありません。

メリット2:サイト数・リクエスト数が無制限

上記画像に載っていますが、ホスティングできるサイト数に制限がありません。つまり、ブログなどを静的に配信していて、それが小さな事業レベルで 20 個あったとしても無料です。

メリット3:チーム開発するにしても、小〜中規模レベルなら無料でできる

無制限の座席が標準装備(直訳)、つまり何人でも招待できます。

このように、この記事の更新日時時点では、制限はありません。

参考:https://pages.cloudflare.com/

メリット4:Cloudflare Zero Trust でさまざまなアクセス制限が無料で可能

無料で柔軟なアクセス制限ができます。

このブログで実際に利用していて、プレビュー環境(main ブランチ以外)でアクセス制限をすることで情報の流出可能性を減らしています。

新機能がちゃんと本番環境でも動くか、確認するにも便利です。

また、アクセスユーザーのグループ化ができたり、認証のサービスを選べたりします。

このように、さまざまな認証基盤を利用できるのは強みです。現状はメールでの PIN 認証で事足りています。

メリット5:商用利用が可能

Vercel では以下のように非商用利用・趣味のサイトの制限がされており、詳細を確認すると Google アドセンスも禁じられています。

禁じられていてもバレないですが、万が一直接メールが来てアカウントを BAN しました、となったらかなり困りますよね。

そのため、個人的には調べた上で商用利用可能なものを積極的に活用しています。(お金がないので)

参考:https://vercel.com/pricing

メリット6:世界中に CDN が配置されており高速配信が可能

エッジネットワークという技術が全世界で利用されており、このおかげで高速に、負荷を分散して様々な Web サービスが動いています。

通信は光の速度でデータ(バイト列)が転送されるのですが、届くまでの時間は距離 ÷ 速さなので、自分に近いほど速さは大きくなります。

そのため、特に日本にきちんと CDN が配置されたサービスが最適ということです。

参考:https://www.cloudflare.com/ja-jp/network/

デメリット

無料で使う上で発生しうるデメリットも含みます。

デメリット1:デフォルトの URL が NoIndex されない

hogehoge.pages.devという URL で最初はデプロイされますが、インデックスされる可能性があります。 ひっそり運営したい場合や、別のドメインを使う場合は、https://developers.cloudflare.com/pages/platform/headers/を見て NoIndex を設定することが必要です。

一手間かかるのでデメリットとしました。

デメリット2:JAMstack のみ

厳密には、Cloudfalre Workers で対応できますが、少し難しいのも事実です。

そのため、最初にビルドしたものを配信するだけ、ということがメインです。

デメリット3:Workers の料金はシビア

1 日 10 万リクエストって、使い方によってはすぐに到達する可能性があります。

Cloudflare KVS とセットで利用したり、OGP の出力に使うと知らないところでアクセスが発生します。無料を突き詰めるなら、用途は絞りましょう。

参考:https://workers.cloudflare.com/

デメリット4:CI が強制的にも関わらずビルド回数の制限

デプロイ時にビルドする、というのは全てのブランチで行われます。オフにすると、全てでデプロイされません。

プレビュー環境が不要な場合は、Github Actions などから Cloudflare Workers でのビルドコマンドを main ブランチで呼ぶよう設定する必要があり、一手間かかってしまいます。

また、画像のとおり無料プランでは月に 500 回までのデプロイです。1 日あたり、16 回までと非常に多いので問題はないと思います。

普通に便利な機能

他のサービスにも共通してあるが、普通に便利で備わっている機能です。

  • HTTP/3・QUIC に対応
  • アナリティクスが標準装備
  • 高速ビルド&デプロイできる(Vercel 並の)
  • 数多くのフロントエンドライブラリに対応
  • 環境変数の出しわけが可能
  • SSL 化も手続き不要
  • リダイレクトできる
  • サイトが 2 段階認証できる
  • CI を標準装備している

他のホスティングサービス

たくさんあり、用途に応じて使い分けることが望まれます。

  • Vercel
  • Netlify
  • Firebase Hosting
  • AWS (Cloudfront, Amplify)
    • 商用かつ大規模・チーム開発
  • Github Pages

おわりに

最後まで読んでいただきありがとうございました。無料で使って、節約をしましょう!

参考