Cloudflareについて

インフラソリューション本部のC-C-Crabです。

今回はCloudflareを触ってみます。予め用意したEC2インスタンス上で稼働するWordPressサイトをCloudflareにキャッシュさせるところまでを紹介します。ドメインはRoute53で取得しています。

料金
Cloudflareを使ってみる
最後に

料金

料金は非常に重要です。サービス選択の第一条件になることもあります。

今回は、Cloudflareの他に、クラウドのデファクトスタンダードでありAWSからCloudFrontと、国産のさくらインターネットからウェブアクセラレータの料金を計算し比較します。

料金計算に使うデータ

料金計算には、弊社でサーバーを運用している情報サイトのデータを使用します。

アウトバウンドトラフィック

監視データから1年間の平均アウトバウンドトラフィックは 3.69Mbpsでした。

1ヶ月を31日とすると… 約1,151GiB（約1,235GB）になります。

リクエスト件数

アウトバウンドトラフィックとブラウザのデベロッパーツールで取得したデータ転送量・リクエスト件数から1ヶ月当たりのリクエスト数を計算します。

今回はトップページのデータから1ページ平均199リクエスト、9.9MBとしました。本当はもっと丁寧に計算したほうがいいと思いますが、他のページも大きく変わらなかったため、この値を採用します。

計算すると…約2,483万リクエストになります。

オリジンへのデータ転送量

CloudFrontの料金計算で使います。AWSのデベロッパーガイドによると…

DELETE、OPTIONS、PATCH、POST、および PUT リクエストへのレスポンスのために CloudFront エッジロケーションからオリジンまたはエッジ関数に転送された合計バイト数。料金には、クライアントからサーバーへの WebSocket データのデータ転送が含まれます。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/billing-and-usage-interpreting.html

正確に計算するのは手間なので、今回は100GBとします。たぶん、サイトの性質上多いぐらいだと思います。

各CDNサービスの料金

さて、データが出揃ったので各サービスの料金を計算します。

Cloudflare、CloudFrontは1ドル=140円で計算します。ちなみに執筆時(2025/07/15)のレートが1ドル=147.69円なのでやや低めの見積もりになっています。

CloudFront

まずは、AWSのCloudFront。Pricing Calculatorで計算します。
まず、各項目について確認します。

項目	料金	備考
Data transfer out to internet	0.114ドル/GB	無料枠 1,024GB/月
Data transfer out to origin	0.060ドル/GB
Number of requests (HTTPS)	0.0120ドル/1万リクエスト	無料枠 1,000万リクエスト/月

無料枠なしで計算すると…
データアウト 140.79ドル（約19,710円）、オリジン転送 6ドル（840円）、リクエスト 29.796ドル（約4,174円）
税を加えて合計 24,724円になります。

続いて無料枠ありで計算すると…
データアウト 24.054ドル（約3,367円）、オリジン転送 6ドル（840円）、リクエスト 17.796ドル（約2,491円）
税を加えて合計 6,698円になります。

毎月の無料枠が結構ありますので、無料枠に収まるなら大変お得です。
ただ、今回の試算では、1サイトで無料枠を使い切ってしまう結果となりました。

ウェブアクセラレータ

さくらインターネットのウェブアクセラレータはシンプルな料金体系で、アウトバウンドトラフィック 5円/GiB（税込）のみです。しかも税込み。

計算すると… 5,755円（税込）になります。

大手CDNサービスと比べると機能は劣りますが、シンプルで使いやすく、充実した日本語ドキュメントも魅力です。

Cloudflare

最後に今回の主役Cloudflareです。Cloudflareはプラン毎の固定料金＋アドオンの追加費用になります。

プラン	料金	ユースケース
Free	0円	ビジネスに不可欠ではない、個人的または趣味のプロジェクト向け
Pro	3,850円（税込）	ビジネスに不可欠ではない、プロフェッショナルなWebサイト向け
Business	38,500円（税込）	オンラインで事業を営む小規模企業向け
Enterprise	カスタム	ビジネスのコアを成すミッションクリティカルなアプリケーション向け

上記の料金は月払いの場合です。年払いにした場合は２割引になります。

W3Techsによると、最も多くのサイトで使用されているCDNサービスのようですが、Freeプランでも基本的な機能は使用できるので納得です。

Cloudflareのプランの違い

Cloudflareのプランの違いを公式ページを元にざっくりとまとめてみました。ざっくりとした比較なので詳細は公式サイトを確認してください。

	Free	Pro	Business
CDN、ボット軽減、DDoS対策、WAFなどの基本機能	✓	✓	✓
最小キャッシュTTL	2時間	1時間	1秒
高速化、最適化		✓	✓
DDoS検知アラート		✓	✓
高度なボット軽減機能		✓	✓
高度なWAF機能		✓	機械学習Lite
Cache、DNS、Firewallなどの分析		✓	✓
独自のSSL証明書の使用			1
カスタムネームサーバー			✓
サポート	コミュニティ	チケット	チャット
SLA			100%

機能的に仕事で使用するならProプランでしょうか。Cloudflareで一番人気のプランらしいです。

Cloudflareを使ってみる

さて、料金の確認が終わったので、ようやく用意していたWordPressサイトをCloudflareでキャッシュさせます。なお、用意していたWEBサイトはテスト用でSSL化はしていません。

サインアップ

公式ページにアクセスして、ログイン > サインアップと移動し、登録するメールアドレス、パスワードを入力します。

しばらくすると入力したメールアドレスに「[アクションが必要]メールアドレスを確認してください」という件名のメールが届くので、”メールアドレスの確認”のリンクをクリックします。

ドメインの接続

サインアップが完了すると、以下の画面に遷移します。ドメインを入力して”続行”をクリックします。

プランの選択画面が表示されるので、今回はFreeプランを選択します。

スキャンされたDNSレコードが表示されます。内容を確認して、”アクティベーションに進む”をクリックします。

最後に、ドメインのネームサーバーをCloudflareのネームサーバーに変更します。

今回は、Route53でドメインを取得しているため、Route53 > 登録済みドメインからネームサーバーを変更します。

しばらくすると、「（ドメイン）は現在 Cloudflare でアクティブです (Free プラン)」というメールが届きます。サイトを確認すると…

SSL化

ドメインを接続すると、オリジンサーバーへの通信はCloudflareを経由するようになります。デフォルトでは、ブラウザとCloudflare間、Cloudflareとオリジン間のすべてでSSL/TLS暗号化がされるようになっており、先程のエラーが表示されてしまいます。

SSL/TLSの設定を”フレキシブル”に変更することで、Cloudflareとオリジン間が暗号化されなくなるのですが、今度は混合コンテンツ(Mixed Content)エラーで画像が表示されなくなります。

Cloudflareで”HTTPSの自動リライト”という機能はあるのですが、Wordpressのような絶対パスはリライト対象外のようで、混合コンテンツエラーが出てしまいます。そのため、で大人しくCloudflareとオリジン間も暗号化してしまいます。

まずはオリジンサーバー用のSSL証明書を作成します。メニューのSSL/TLSからオリジンサーバーへ移動し、”証明書を作成”をクリックします。

そのまま、”作成”をクリックします。その後、秘密鍵と証明書が表示されるので、WEBサーバーに設定します。設定方法は省略します。

SSL証明書を設定後…

正常にWEBページが表示されるようになりました。
オリジン証明書はデフォルトで15年間有効になっており、ブラウザとCloudflare間の証明書はCloudflareが管理していますので、証明書更新の手間がなくなります。将来的にSSL証明書の有効期限は47日まで短縮されるそうなのでマネージドのサービスを使用しないと管理が大変そうです。

キャッシュ設定

現時点で画像やcssファイルなどがキャッシュされているかと思います。デベロッパーツールで確認すると…

Cf-Cache-StatusがHITになっていて、キャッシュがヒットしていることがわかります。

管理画面などコンテンツキャッシュさせたくないものありますので、キャッシュルールで除外します。Cloudflareの画面からCaching > Cache Rulesに移動し、”ルールを作成”をクリックします。

今回はWordPressサイトなので、wp-adminとかを除外します。このあたりはご自身のサイトに合わせて設定してください。

キャッシュの適格性は”キャッシュをバイパスする”を選択して保存します。

面倒くさくなってきたので、残りはキャッシュ対象にしてしまいます。（真似しないでください）
新しいルールを設定して、対象を”/*”、キャッシュの適格性を”キャッシュの対象”にして保存します。必ず、キャッシュ除外ルールより優先度を下げてください。

除外対象以外はすべてキャッシュするのでパフォーマンスは向上します。WordPressの動的ページもキャッシュされるのでとても早くなります。

実際のサイトにCDNを設定する場合は、十分検討の上、設定してください。

【おまけ】Wordpress用プラグインのインストール

今回のサイトはWordpressサイトなので、公式のWordpressプラグインを導入します。メインのAutomatic Platform Optimization(APO)はProプラン以上であれば、追加の費用なく利用できます。Freeプランの場合、利用するには月額5ドル必要になります。APOを利用することで、サイトのパフォーマンスを向上させることができますが今回は使いません。

その他、Wordpressに推奨される設定にする機能やキャッシュをパージできる機能が利用できるようになります。

まず、WordPressの管理画面からCloudflareという名前のプラグインをインストールして有効化します。その後、設定に移動して、”here”をクリックします。

Global API KeyもしくはAPI Tokenが求められますので、Cloudflareに移動して確認します。まずは右上のメニューからプロフィールに移動します。

左のメニューの”APIトークン”に移動し、Global API Keyのところの”表示”をクリックします。パスワードの入力を求められますので入力すると、Global API Keyが表示されます。WordPressに戻りGlobal API Keyを入力してください。

その後、キャッシュのパージなどができるようになります。

APOを使用する場合は推奨されませんが、記事の更新時に自動的にキャッシュをパージすることもできます。

なお、プラグイン自体は余り更新頻度が高くないようで、”このプラグインは現在使用中のWordPressバージョンではテストされていません。”と表示されます。評価でも動かないとのレビューがありますので、あまり頼りにしてはいけないかもしれません。

最後に

今回はCloudflareと他のCDNサービスの料金比較を行い、後半ではWordPressサイトにCloudflareを設定してみました。
Proプランまでなら他のCDNより安く、WEBサイトの要件にもよりますが魅力的な選択肢かと思います。キャッシュルールに関しては、今回はテスト用のサイトでしたので適当に設定しましたが、実際のサイトでは十分検討の上、設定してください。