Zenn
株式会社L&E GroupPublicationへの投稿
🚄

Webサイトを手軽に高速化！S3＋CloudFrontでCDNを導入

三杉 彪流
に公開
AWS
WordPress
S3
CloudFront
tech

はじめに

この記事では、AWSのS3とCloudFrontを使って、Webサイトやアプリケーションの静的ファイルを高速かつ効率的に配信するCDN（Content Delivery Network）について解説します。
Webサイトの速度改善を例に、CDN導入によるメリットや具体的な手順を紹介していきます。

対象読者は、以下のような方々を想定しています。

  • S3 + CloudFront構成のCDNを試してみたい方
  • S3 + CloudFront の料金体系や無料枠について知りたい方
  • Webサイトを高速化し、CVR向上やSEO改善を実施したい方

前提知識

CDNとは？

CDN（Content Delivery Network）とは、世界中に分散配置されたキャッシュサーバーを使って、ユーザに最も近い拠点からコンテンツ（画像、CSS、JSなど）を配信する仕組みです。これにより、ネットワーク遅延が低減され、UXが向上します。

AWSでは、こうした仕組みをAmazon CloudFrontとして提供しています。

Amazon CloudFrontとは？

Amazon CloudFrontは、AWSが提供するCDNサービスで、世界中の200以上の拠点（エッジロケーション）からコンテンツを配信します。DDoS攻撃対策、WAF連携、SSL/TLS暗号化などのセキュリティ機能に加え、従量課金制によって柔軟なコスト管理ができるため、あらゆる規模のWebサイトやアプリケーションに適しています。

S3 + CloudFront構成のメリット

  • ページ表示が早くなる
    • ユーザーに最も近い場所からコンテンツを配信するため、ページ読み込みが速くなる
    • 画像やファイルのキャッシュにより、繰り返しアクセスが高速化される
  • セキュリティが向上する
    • S3を非公開に設定し、CloudFront経由のみアクセス可能にできる
    • DDoS攻撃対策が標準で組み込まれており、WAFと連携した防御も可能

S3 + CloudFront構成の料金体系

S3とCloudFrontの料金はそれぞれ別に設定されています。CloudFrontには一定の条件内で常時無料の枠があり、規模が小さいサイトなら追加費用なしで利用できます。

S3の料金

  1. ストレージ容量
    • 保存データ量に応じた課金。S3 Standardクラスの場合、1GBあたり0.02〜0.03ドル程度（リージョンによる差あり）
    • 東京リージョンだと、$0.025/GB（約4円 ※2025年3月時点の概算）
  2. リクエスト数
    • APIリクエスト回数に応じた課金。CloudFront経由の場合は実際のS3リクエストが削減され、コストを抑えられる
  3. データ転送量
    • S3から直接インターネットへデータを返す際に課金
    • ただし、S3→CloudFrontの転送は無料なため、最終的な配信をCloudFront経由に統一すれば、S3側のデータ転送料は基本的に発生しない

https://aws.amazon.com/jp/s3/pricing/

CloudFrontの料金

  1. データ転送量（エッジ→ユーザー）
    • 地域によって異なる単価で、GBごとに課金
    • アジアでは0.114ドル/GB（約17円/GB ※2025年3月時点の概算）
  2. リクエスト数（HTTP/HTTPS）
    • 100万リクエストあたり約0.7ドル（約106円 ※2025年3月時点の概算）
    • Lambda@EdgeやCloudFront Functions利用時は追加料金が発生する

https://aws.amazon.com/jp/cloudfront/pricing/

次の条件を超えない範囲であれば、CloudFrontの料金は継続的に0円です。

  1. 1TB / 月 のデータ転送量
  2. 1,000万件 / 月 の HTTP / HTTPS リクエスト
  3. 200万回 / 月 の CloudFront Functions 呼び出し
  4. 200万回 / 月 の CloudFront KeyValueStore 読み取り

https://aws.amazon.com/jp/free/

どんなサイトなら無料枠内に収まるか？

  • データ転送量の目安
    • 平均ページサイズが2MBの場合、月間50万PVで約1TB（無料枠の上限）になります
    • 2MB × 500,000PV = 1,000GB（1TB）
    • 実際はブラウザキャッシュやCDNのキャッシュにより、さらに多くのPVに対応できることが多い
  • リクエスト数の目安
    • 1ページあたり20個の静的リソース（画像、CSS、JSなど）を使用する場合
    • 月間50万PVで計算すると、20 × 500,000PV = 1,000万リクエスト（無料枠の上限）

つまり、月間50万PV規模のサイトまでなら、ほとんどのケースで追加料金なしで運用できると考えられます。

Webサイトの画像ファイルを S3 + CloudFront で配信する

ここから、Webサイトの画像ファイルを、S3とCloudFrontを組み合わせて配信する手順を解説します。

S3バケットの作成

バケット作成の手順

AWSコンソールにログインし、Amazon S3を開く→「バケットを作成」ボタンをクリックすると、次の画面が表示されます。

主な設定項目

  • バケットタイプ
    • 格納するデータの利用頻度やコストに合わせたストレージを選択
  • バケット名
    • バケット名は全世界で一意である必要がある
  • ACL（Access Control List）
    • オブジェクトやバケットに対するアクセス権限を細かく設定する機能
    • 初期状態ではプライベート設定になっている
  • ブロックパブリックアクセス設定
    • 不特定多数からのアクセスを制限する機能
    • CloudFront経由のみアクセスさせる場合は有効にしておく
  • バケットのバージョニング
    • オブジェクトの変更履歴を保存する機能
    • ストレージコストは増加する
  • タグ
    • キーと値のペアでバケットにラベルを付ける機能

バケットポリシーの設定

バケットポリシーは、S3バケットへのアクセス権限を管理するためのJSON形式のルールセットです。誰が（Principal）どのようなアクション（Action）をどのリソースに対して実行できるかを定義します。
以下の2通りの方法があります：

  • OAC（Origin Access Control）を利用する設定（推奨）
    • S3バケットを完全に非公開に保ちながら、CloudFront経由のみアクセスを許可
    • バケットに直接アクセスすると403エラーが返される
    • CloudFrontが発行する特別なIDを通してのみコンテンツ取得が可能

https://aws.amazon.com/jp/blogs/news/amazon-cloudfront-introduces-origin-access-control-oac/
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

  • パブリックアクセスを許可する設定
    • 検証用途のみ推奨。本番環境ではセキュリティリスクが高まるため推奨しません
    • 「ブロックパブリックアクセスの設定」を無効にし、バケットポリシーで "Action": "s3:GetObject", "Principal": "*" を許可する

CloudFrontの設定

CloudFrontでは、各設定をディストリビューションという単位で管理します。ディストリビューションは、配信元（オリジン）やキャッシュポリシー、セキュリティ設定などをまとめた設定パッケージです。これを作成することで、世界中のエッジロケーションからコンテンツを高速に配信できます。

CloudFrontディストリビューション作成の手順

AWSコンソール > CloudFront > 「ディストリビューションを作成」を選択して、次の画面に進みます。

主な設定項目

  • オリジン

    • CloudFrontがコンテンツを取得する元となるサーバーやストレージのこと
    • オリジンドメインで、先ほど作成したS3バケットをプルダウンから選択
    • OAI / OACを利用する場合、Origin Accessで指定する
      • AWSでは現在OAI（Origin Access Identity）は非推奨で、OAC（Origin Access Control）が推奨されています

  • キャッシュビヘイビア

    • ビューワープロトコルポリシー
      • HTTPアクセス時にHTTPSへリダイレクトするか、HTTPSのみ許可するかを設定
      • 「Redirect HTTP to HTTPS」や「HTTPS Only」が推奨される
    • 許可されたHTTPメソッド
      • 静的コンテンツ配信用なら、GETとHEADのみを許可するのが一般的
      • 不必要なPOSTやPUTなどのメソッドを排除し、セキュリティとパフォーマンスを向上する
    • キャッシュキーとオリジンリクエストの設定
      • キャッシュキー: CloudFrontがキャッシュを識別する際に使用するパラメータを設定
      • オリジンリクエスト: オリジンにリクエストを転送する際に、どのパラメータ（例: クエリ文字列、ヘッダ、Cookie）を渡すかを指定
      • 多くの情報を転送するとキャッシュヒット率が低下するため、本当に必要なパラメータを見極めることがポイント

  • 料金クラス

    • CloudFrontが利用するエッジロケーションの範囲を制限する設定
    • 利用するエッジロケーションを北米と欧州など一部地域に限定すると、料金を抑えつつ配信することができる

検証について

今回は次のような、大きめのフリー画像（GIF形式）を貼ったサンプル記事を用意しました。この画像ファイルをS3へアップロードし、CDN導入前と導入後の違いを確認します。

画像ファイルのアップロード

画像をS3バケットのフォルダにアップロードします。

CloudFront経由の画像ファイルURLは、次の2つの要素で構成されます：

  • CloudFrontのドメイン名
    • デフォルトでは「xxxx.cloudfront.net」の形式（自動割り当て）
    • カスタムドメインを設定している場合は「cdn.example.com」などの独自ドメイン
  • ファイルパス
    • S3バケット内のオブジェクトパスがそのまま使われます

例えば、今回の場合：

  • CloudFrontドメイン：d3tk3ze4ptjbg3.cloudfront.net
  • 画像ファイルのパス：/my-wordpress-test-bucket-0322/night-3505_256.gif
  • 完成したURL：d3tk3ze4ptjbg3.cloudfront.net/my-wordpress-test-bucket-0322/night-3505_256.gif

WordPressの記事内で画像を表示する際は、この完成したURLを<img src="...">タグに設定します。なお、手作業での変更は手間がかかるため、WordPressであればCDN連携用のプラグインを使うことをお勧めします。「W3 Total Cache」「WP Super Cache」「WP Offload Media」などが代表的です。

動作確認

サンプル記事のPageSpeed Insights数値を、CDNの導入前後で比較します。
※PageSpeed Insightsは、Googleが提供するWebページの表示速度やユーザー体験を分析するツールです

https://pagespeed.web.dev/

CDN導入前

CDN導入前のPageSpeed Insightsスコアは「70」でした。主要な測定値は以下の通りです：

  • First Contentful Paint: 3.2秒
  • Largest Contentful Paint: 5.9秒
  • Total Blocking Time: 0ミリ秒
  • Speed Index: 4.7秒

今回の検証では、CDNの効果を確認するため、あえて圧縮を行わないで、大きいGIF画像を使用しました。そのため、Largest Contentful Paint（最大視覚コンテンツの表示時間）が非常に高い数値となっています。
※この数値はページの読み込み時間ではなく、ユーザーが「ページのメインコンテンツが見えた」と感じる瞬間を数値化したもの

CDN導入後

CDN導入後のPageSpeed Insightsスコアは「77」に改善しました。主要な測定値の変化は以下の通りです：

First Contentful Paint: 3.2秒（変化なし）
Largest Contentful Paint: 4.3秒（改善）
Total Blocking Time: 0.033ミリ秒（ほぼ変化なし）
Speed Index: 4.5秒（やや改善）

特に、Largest Contentful Paintが改善されました。

URLの確認

ブラウザの開発者ツールでネットワークタブを確認すると、画像ファイルのURLが「d3tk3ze4ptjbg3.cloudfront.net」ドメインから配信されていることが確認できます。これによりCloudFront経由で正しく配信されていることが分かります。

キャッシュヒットの確認

2回目以降のアクセスでは、CloudFrontのキャッシュからコンテンツが配信されており、「x-cache: Hit from cloudfront」というヘッダーが表示されています。

まとめ

今回は、AWSのS3とCloudFrontの組み合わせによるCDN導入について、料金や具体的な手順を紹介しました。簡単・低コストで、Webページの速度改善が期待できるため、ぜひ試してみてください。

また、AWS Amplify ホスティングを使えば、S3 + CloudFrontの構成に、ソースが更新された際の自動ビルド＆デプロイを行うパイプラインを簡単に作ることもできます。
https://aws.amazon.com/jp/blogs/news/simplify-and-enhance-amazon-s3-static-website-hosting-with-aws-amplify/

コードをプッシュするだけで、変更内容がサイトに反映されるため、頻繁に内容を更新するサイトや、複数人で運営するようなサイトでは、Amplify ホスティングの導入も視野に入れてみるといいでしょう。

本記事が少しでも参考になれば幸いです。
最後までご覧いただき、ありがとうございました！

株式会社L&E Group
株式会社L&E GroupPublication

成果報酬型広告のプラットフォームサービス「Link-AG」を運営しています。

Discussion

ログインするとコメントできます