本記事の内容
本記事では、CloudFront経由でS3に格納した静的コンテンツにアクセスするための構成・構築手順を解説します。
- 登場するAWSサービスの役割
- 構成の特徴
- 利用シーン
- 構築手順
解説する構成
S3に格納している静的コンテンツをCloudFrontにキャッシュし、キャッシュされたコンテンツをクライアントに配信する構成を解説します。
構成の解説
上記構成について、以下の観点で解説します。
- 各AWSサービスの役割
- 本構成の特徴
- 本構成の利用シーン
各AWSサービスの役割
この構成では以下のAWSサービスを利用します。各AWSサービスの役割を解説します。
- CloudFront
- S3
①CloudFront
AWSが提供するコンテンツデリバリーネットワーク（CDN）サービスです。
世界中のエッジロケーションを利用して、S3に格納された静的コンテンツをユーザーに近い場所から配信することで、レイテンシが低減しコンテンツの読み込み速度が向上します。
【CDNとは？】
地理的に分散したサーバーネットワークを使用して、ウェブコンテンツをユーザーにより早く配信するためのシステムです。
CloudFrontを初めて聞いた方や理解が浅い方は、以下の記事でイラスト多めで図解しているので、この機会に抑えておきましょう。
②S3
高耐久性とスケーラビリティを持つオブジェクトストレージサービスで、データの保存と取得を簡単に行えるプラットフォームです。
本構成では、CloudFrontのオリジンサーバーとして機能します。これは、静的コンテンツ（画像、動画、スタイルシート、JavaScriptファイルなど）を保存する場所です。CloudFrontはこれらのコンテンツをS3から取得し、エッジロケーションを通じてユーザーに配信します。
本構成の特徴
- 高速なコンテンツ配信
- CloudFrontのエッジサーバーを利用して、ユーザーに近い場所からコンテンツを配信。これにより、読み込み速度が向上します。
- コスト効率
- CloudFrontを経由することで、S3からの直接的なデータ取得を減らし、データ転送料金を抑えることができます。
- スケーラビリティ
- S3とCloudFrontは自動的にスケールし、大量のトラフィックやデータの増加に対応できるため、安定したパフォーマンスを維持します。
- 分析と監視
- CloudFrontは、配信されたコンテンツに関するログや統計データを提供し、パフォーマンスやユーザー行動を分析するのに役立ちます。
本構成の利用シーン
- ウェブサイトの静的コンテンツ配信
- 画像やCSS、JavaScriptファイルなどの静的コンテンツをCloudFrontを介して配信します。
- これにより、ユーザーに近いエッジロケーションからの高速な読み込みが実現され、ページのパフォーマンスが向上します。
- 動画配信
- 動画コンテンツをS3に保存し、CloudFrontを使用して配信します。
- これにより、視聴者が多い場合でもスムーズな再生が可能になり、ユーザー体験が向上します。
- APIレスポンスの高速化
- RESTful APIからの静的なレスポンスデータをCloudFront経由で配信します。
- これにより、キャッシュを利用して迅速にデータを提供でき、サーバーの負荷を軽減します。
構築手順
ここからは、CloudFront経由でS3に格納した静的コンテンツを配信する構成を構築します。
以下のステップに分けて、構築手順を解説していきます。
①：S3バケットの作成
オリジンサーバーとなるS3バケットを作成します。
バケットを作成を選択します。
以下の設定を行い、バケットを作成を選択します。
＜設定内容＞
| カテゴリ | 項目 | 設定値 |
|---|---|---|
| 一般的な設定 | バケットタイプ | 汎用 |
| バケット名 | 任意の名前 | |
| このバケットのブロックパブリックアクセス設定 | すべてのチェックを外す | |
| 上記以外の項目 | デフォルトのまま | |
②：S3バケットに静的コンテンツを格納
ユーザーがCloudFront経由でアクセスした際に表示する静的コンテンツ（htmlファイル）を、S3バケットに格納します。
index.htmlファイルを作成し、以下ソースコード記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプル</h1>
</body>
</html>作成したS3バケットに、index.htmlを格納します。
③：CloudFrontの作成
静的コンテンツを配信するためのCloudFrontを作成します。
CloudFrontのコンソール画面に遷移し、CloudFrontディストリビューションを作成を選択します。
以下の設定を行い、ディストリビューションを作成を選択します。
＜設定内容＞
| カテゴリ | 項目 | 設定値 |
|---|---|---|
| オリジン | Origin domain | 作成したS3バケット |
| オリジンアクセス | Origin access control settings (recommended)（※1） | |
| WAF | セキュリティ保護を有効にしないでください | |
| 設定 | デフォルトルートオブジェクト | index.html |
| 上記以外の項目 | デフォルトのまま | |
オリジンアクセスの設定でOrigin access control settings (recommended)を選択すると、OACの選択画面が表示されます。現時点ではOACは作成されていないので、Create new OACを選択して新規OACを作成します。
Create new OACを選択すると以下の画面が表示されるので、以下の設定を行いCreateを選択してください。
＜設定内容＞
| 項目 | 設定値 |
|---|---|
| 名前 | 任意の名前 |
| 署名動作 | 署名リクエスト（推奨） |
CloudFrontの設定項目については以下記事で解説しているので、気になる方はご確認ください。
④：S3バケットのアクセス制御設定
作成したS3バケットに対して、CloudFrontからのアクセスのみを許可するバケットポリシーを設定します。
- 先ほど作成したCloudFrontの
オリジンから、作成済みのオリジンを選択して編集を選択します。
オリジンアクセスの箇所までスクロールし、ポリシーをコピー＞S3 バケットアクセス許可に移動の順に選択します。
- オリジンのS3バケットの画面に遷移するので、
アクセス許可を選択します。
バケットポリシーの箇所までスクロールし、編集を選択します。
- 先ほどコピーしたバケットポリシーを貼り付けて
変更の保存を選択します。
＜バケットポリシー＞
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{作成したS3バケット名}/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::{アカウントID}:distribution/{ディストリビューションID}"
}
}
}
]
}動作確認
CloudFront経由で、S3バケットに格納した静的コンテンツにアクセスできるかを確認します。
作成したディストリビューションのドメイン名を確認します。
ブラウザに先ほど確認したドメイン名を入力し、以下画面が表示されるかを確認できれば完了です。
補足
【補足①】暗号化通信（HTTPS）の実現
紹介した手順では、クライアント・CloudFront間の通信を暗号化されません。そうした場合、データが第三者によって傍受されやすくなり、情報漏洩や不正アクセスのリスクが高まります。
ACMで管理しているSSL/TLS証明書を活用することで、暗号化通信（HTTPS）を実現できます。
【補足②】WAFの導入
紹介した手順ではWAFを導入していません。そうした場合、悪意のあるトラフィックや攻撃（例：SQLインジェクションやクロスサイトスクリプティング）からウェブアプリケーションを保護できず、データ漏洩やサービスのダウンにつながるリスクが増大します。
WAFを導入することで、上記のリスクを軽減できます。
関連記事
本記事の解説は以上です。
ここからは、より知識を深めたい人向けに関連記事を紹介します。
本記事で登場したAWSサービス
本記事では「CloudFront」や「S3」といったAWSサービスが登場しました。
これらのサービスについては、仕組みや設定項目等についてイラスト多めで図解しているので、もっとよく知りたい方は以下の記事をご覧ください。
コメント