概要
Web サイトや Web アプリケーションを運用する際、ユーザーに近い場所からコンテンツを配信することで、表示速度の向上とオリジンサーバーの負荷軽減が実現できます。世界中のユーザーに対して同じサーバーから直接レスポンスを返すと、物理的な距離によるレイテンシーが大きくなり、ユーザー体験が低下します。
Amazon CloudFront は、AWS が運営するコンテンツ配信ネットワーク（CDN）サービスです。世界各地に配置されたエッジロケーションにコンテンツをキャッシュし、ユーザーに最も近い場所からレスポンスを返すことで、低レイテンシーかつ高速なコンテンツ配信を実現します。
本記事では、CloudFront の基本概念を理解し、S3 バケットをオリジンとしたディストリビューションの作成を通じて、コンテンツのキャッシュ配信を体験します。
クラウドおさる遠くの倉庫まで毎回バナナを取りに行くより、近くの売店に置いておけば早いでござるな。この記事では、その「近くの売店」にあたる CloudFront を S3 の前に立てて、キャッシュの動きを確かめるでござる。
この記事のメリット
- CloudFront のエッジロケーション、ディストリビューション、オリジンといった基本概念を理解できる
- S3 バケットをオリジンとした CloudFront ディストリビューションの作成手順を習得できる
- オリジンアクセスコントロール（OAC）を使用した S3 への安全なアクセス設定を体験できる
- キャッシュの動作確認とキャッシュ無効化（Invalidation）の方法を把握できる
- CDN を活用したコンテンツ配信の基礎知識を身につけられる
執筆者とキャラクター紹介
執筆者：土肥（とひ）
株式会社ジェニュインの代表であり元エンジニア。これまでオンプレミスと AWS 環境のインフラ業務を担当。AWS 認定資格の学習で得た知識を、ハンズオンとともに解説するのが得意。直近では新人の教育も行っており、これから技術を学ぶ方が納得できる解説を心がけています。基礎編・Cloud Practitioner の記事では、解説役としても登場します。
クラウドおさる
クラウドおさるはじめましてでござる。弊猿はクラウドおさる。IT インフラが異常に発達した猿山から、雲に乗って地上の AWS を学びに降りてきたのでござる。
クラウドおさる基礎編や Cloud Practitioner の記事では、とひさんに素朴な疑問をぶつける役でござるな。Security - Specialty などの記事では、要所でワンポイントや注意点をひとこと添えるでござる。
クラウドおさる猿山にもデータセンターや監視当番があって、地上で起きることはだいたい猿山にも同じ仕組みがあるのでござる。例え話がつい猿山に寄るのは、弊猿の癖でござる。
技術解説
Amazon CloudFront とは
クラウドおさるとひさん、Amazon CloudFront とはどんなサービスでござるか？
土肥CloudFront は、静的コンテンツや動的コンテンツを世界中のユーザーに対して高速に配信する CDN サービスだよ。世界中に分散したエッジロケーションを活用して、ユーザーに最も近いロケーションからコンテンツを配信するんだ。
クラウドおさる世界中に見張り台があるようなものでござるな！どんな場面で使われるのでござる？
土肥主なユースケースはこんな感じだね。
- 静的 Web サイト（HTML、CSS、JavaScript、画像）の高速配信
- 動的コンテンツ（API レスポンス）の配信最適化
- 動画ストリーミングの配信
- ソフトウェアアップデートやファイルのダウンロード配信
主要コンポーネント
クラウドおさるCloudFront は、どんな部品で組み立てられているのでござるか？
土肥主要なコンポーネントは 4 つあるよ。表にまとめるとこうなるんだ。
| コンポーネント | 説明 |
|---|---|
| ディストリビューション | CloudFront の配信設定の単位。オリジンやキャッシュ動作を定義する |
| オリジン | コンテンツの取得元。S3 バケット、ALB、EC2、カスタムオリジンなど |
| エッジロケーション | 世界各地に配置されたキャッシュサーバー |
| キャッシュビヘイビア | URL パスパターンごとのキャッシュルール |
クラウドおさるディストリビューションが配信設定のひとまとまりで、その中にオリジンやキャッシュのルールが入るのでござるな。猿山でいえば、どの倉庫から仕入れて、どの売店に何日置くかを書いた「配給の取り決め書」でござる。
土肥そうだね。ディストリビューションを作ると、どこからコンテンツを取ってきて、どうキャッシュするかが一つにまとまるイメージだよ。
キャッシュの仕組み
クラウドおさるキャッシュは、どういう流れで動くのでござる？
土肥CloudFront のキャッシュは以下の流れで動作するよ。
- ユーザーがコンテンツをリクエストする
- リクエストは最寄りのエッジロケーションにルーティングされる
- エッジロケーションにキャッシュがあればそのまま返す（キャッシュヒット）
- キャッシュがなければオリジンからコンテンツを取得し、エッジにキャッシュしてから返す（キャッシュミス）
クラウドおさる売店に置いたバナナ…いや、キャッシュは、いつまで残るのでござるか？
土肥キャッシュの有効期限は TTL（Time to Live）で制御するんだ。オリジンが Cache-Control や Expires ヘッダーで有効期限を指定していなければ、デフォルトの TTL は 24 時間（86,400 秒）だよ。ヘッダーで指定されていれば、基本的にはそっちに従うんだ。
オリジンアクセスコントロール（OAC）
クラウドおさるS3 をオリジンにするとき、売店を通らずに倉庫へ直接来られては困るでござるな…？
土肥いいところに気づいたね。S3 バケットをオリジンとする場合、S3 バケットへの直接アクセスを制限して、CloudFront 経由のアクセスのみを許可する設定が推奨されるんだ。この仕組みがオリジンアクセスコントロール（OAC）だよ。
クラウドおさるOAC を使うと、具体的にどうなるのでござる？
土肥OAC を使用すると、CloudFront が S3 へのリクエストに署名を付与して、S3 バケットポリシーで CloudFront からのアクセスのみを許可できるようになるんだ。これで直接 S3 の URL を叩いてもアクセスできなくなるよ。
クラウドおさるなるほど、倉庫の扉は CloudFront の署名付きの者にしか開かぬ、ということでござるな。これなら安心でござる。
キャッシュ無効化（Invalidation）
クラウドおさるオリジンの中身を新しくしても、キャッシュが残っていたら古い内容が返ってしまうのではござらぬか…？猿山の売店でも、熟れすぎたバナナが棚に残っていると長老会に叱られるでござる。
土肥そうなんだ。エッジロケーションのキャッシュは TTL が切れるまで古いコンテンツを返し続けるからね。即座にキャッシュを更新したい場合は、キャッシュ無効化（Invalidation）を実行するんだよ。
クラウドおさるその場合、キャッシュを全部消すのでござるか？
土肥いや、無効化ではパスパターンを指定できるから、特定のファイルやディレクトリ単位で無効化が可能だよ。必要なものだけピンポイントで消せるんだ。
クラウドおさる傷んだ棚だけ入れ替えられるのでござるな！実践で試すのが楽しみでござる。
実践
前提条件
- リージョン:
ap-northeast-1（東京） - IAM ユーザーまたはロールに CloudFront、S3 の操作権限があること
作成するリソース一覧
| リソース種別 | リソース名 | 用途 |
|---|---|---|
| S3 バケット | cloudfront-basic-origin-<アカウントID> | コンテンツのオリジン |
| CloudFront ディストリビューション | cloudfront-basic | コンテンツのキャッシュ配信 |
| オリジンアクセスコントロール（OAC） | （ディストリビューション作成時に自動作成） | S3 への安全なアクセス制御 |
ステップ1: オリジン用 S3 バケットの作成
上部の検索バーに S3 と入力し、表示された「S3」を選択します。
「バケットを作成」をクリックします。
以下の内容を入力します。
- バケット名:
cloudfront-basic-origin-<アカウントID>（グローバルで一意になるよう、アカウント ID を付与） - AWS リージョン:
アジアパシフィック（東京）ap-northeast-1
「バケット名前空間」は既定の「グローバル名前空間」のままにします。その他の項目もデフォルトのままにし、「パブリックアクセスをすべてブロック」が有効であることを確認します。
「バケットを作成」をクリックします。
ステップ2: テスト用コンテンツのアップロード
作成したバケットを選択し、「アップロード」をクリックします。
以下の内容のテスト用 HTML ファイルをアップロードします。事前にローカルで index.html を作成してください。
<!DOCTYPE html>
<html>
<head><title>CloudFront Basic Test</title></head>
<body>
<h1>Hello from CloudFront!</h1>
<p>This content is served via Amazon CloudFront.</p>
</body>
</html>「アップロード」をクリックしてファイルをアップロードします。「アップロードに成功しました」と表示されることを確認します。
ステップ3: CloudFront ディストリビューションの作成
上部の検索バーに CloudFront と入力し、表示された「CloudFront」を選択します。
「ディストリビューションを作成」をクリックします。作成画面は 5 つのステップに分かれており、表示の多くは英語です。
ステップ 1「Choose a plan」では、既定の「Pay as you go」（使った分だけの従量課金）が選ばれていることを確認し、「Next」をクリックします。
ステップ 2「Get started」では、「Distribution name」に cloudfront-basic と入力し、「Next」をクリックします。その他の項目はデフォルトのままにします。
ステップ 3「Specify origin」で以下を設定します。
- Origin type:
Amazon S3（既定のまま） - S3 origin: 「Browse S3」から先ほど作成したバケットを選択（
cloudfront-basic-origin-<アカウントID>.s3.ap-northeast-1.amazonaws.com） - Allow private S3 bucket access to CloudFront: チェックが入っていることを確認（既定でオン）
「Allow private S3 bucket access to CloudFront」にチェックが入っていると、オリジンアクセスコントロール（OAC）が自動で作成され、S3 バケットポリシーも CloudFront からのアクセスだけを許可する内容に自動で更新されます。「オリジン設定」と「Cache settings」は既定の推奨設定のままにし、「Next」をクリックします。
ステップ 4「Enable security」では、WAF によるセキュリティ保護が既定で有効になっており、月額の料金が表示されます。ハンズオンではコストを抑えるため、セキュリティ保護を有効にしないほうを選び直してから、「Next」をクリックします。
ステップ 5「Review and create」で内容を確認し、「Create distribution」をクリックします。
「新しいディストリビューションが正常に作成されました。」と表示され、ディストリビューションの詳細画面に切り替わります。「ディストリビューションドメイン名」（例: d1234567890abc.cloudfront.net）が発行されています。
ステップ4: デフォルトルートオブジェクトの設定
デフォルトルートオブジェクトは作成画面では設定できないため、作成後に設定します。
ディストリビューションの詳細画面の「一般」タブで、「設定」セクションの「編集」をクリックします。
- Default root object – optional:
index.html
その他の項目はデフォルトのままにして「変更を保存」をクリックします。「ディストリビューション設定が正常に更新されました。」と表示されます。
ステップ5: 自動で設定された S3 バケットポリシーの確認
S3 コンソールに移動し、オリジンバケットを選択します。「アクセス許可」タブを選択し、「バケットポリシー」セクションを確認します。
ディストリビューションの作成時に、以下のようなポリシーが自動で設定されています。CloudFront のサービスプリンシパルに対して、このディストリビューションからのリクエストに限って GetObject を許可する内容です。
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::cloudfront-basic-origin-<アカウントID>/*",
"Condition": {
"ArnLike": {
"AWS:SourceArn": "arn:aws:cloudfront::<アカウントID>:distribution/<ディストリビューションID>"
}
}
}
]
}
クラウドおさるバケットは「パブリックアクセスをすべてブロック」のままでござる。このポリシーで読めるようになるのは、指定したディストリビューション経由の GetObject だけ。S3 を公開して済ませぬように気をつけるでござるぞ。
ステップ6: ディストリビューションのデプロイ確認
CloudFront コンソールに戻り、作成したディストリビューションの詳細画面を確認します。
デプロイ中は「最終変更日」に「デプロイ」と表示されます。数分待ってデプロイが完了すると、「最終変更日」に日時が表示されます。
ステップ7: コンテンツの配信確認
ディストリビューションの詳細画面から「ディストリビューションドメイン名」をコピーします。
Web ブラウザで https://<ディストリビューションドメイン名>/ にアクセスします。
先ほどアップロードした index.html の内容が表示されることを確認します。
ブラウザの開発者ツール（F12）のネットワークタブを確認すると、レスポンスヘッダーに以下の CloudFront 関連ヘッダーが含まれています。
X-Cache:Hit from cloudfrontまたはMiss from cloudfrontX-Amz-Cf-Pop: リクエストを処理したエッジロケーション
キャッシュに無い状態のアクセスは Miss from cloudfront になり、何度かアクセスするとキャッシュから返されて Hit from cloudfront に変わります。同じエッジロケーションでも、リクエストを受けたサーバーにキャッシュが無いうちは Miss になることがあります。
なお、S3 バケットのオブジェクト URL に直接アクセスすると 403 Forbidden になり、CloudFront 経由でしか読めないことも確認できます。
クラウドおさる最初は倉庫まで取りに行くから Miss、売店の棚に並んだあとは Hit でござる。技術解説で見たキャッシュの流れが、ヘッダーでそのまま確かめられたでござるな。
ステップ8: キャッシュの削除（無効化）
コンソールでは、キャッシュの無効化は「キャッシュ削除」と表示されます。
ディストリビューションの詳細画面で「キャッシュ削除」タブを選択し、「キャッシュ削除を作成」をクリックします。
- Object paths to invalidate:
/index.html（「Selection method」は既定の「By paths」のまま）
「キャッシュ削除を作成」をクリックします。
ステータスが「進行中」から「完了済み」に変わると、次回のアクセスではオリジンからコンテンツが再取得されます。
まとめ
- Amazon CloudFront は世界各地のエッジロケーションにコンテンツをキャッシュし、高速配信を行う CDN サービスである
- ディストリビューション、オリジン、キャッシュビヘイビアが主要な構成要素である
- S3 バケットをオリジンとする場合、オリジンアクセスコントロール（OAC）を使用して CloudFront 経由のアクセスのみに制限することが推奨される
- キャッシュヒット時はエッジロケーションから即座にレスポンスが返され、オリジンサーバーの負荷が軽減される
- コンテンツ更新時はキャッシュ無効化（Invalidation）を使用して即座にキャッシュを更新できる
- レスポンスヘッダー（
X-Cache）でキャッシュヒット・ミスの状態を確認できる
参照先
- Amazon CloudFront とは – Amazon CloudFront
- ディストリビューションの作成 – Amazon CloudFront
- Amazon S3 オリジンへのアクセスの制限 – Amazon CloudFront
- ファイルの無効化 – Amazon CloudFront
- キャッシュの仕組み – Amazon CloudFront
- コンテンツをキャッシュに保持する期間 (有効期限) を管理する – Amazon CloudFront
