概要
AWSのCloudFrontのディストリビューションまたはRoute53のドメインからアクセスする際にS3バケット内の静的ファイルが表示されるようにする設定方法について解説します
前提
- Route53に自身のドメインを設定済み
- ACMを発行済み(ただし、CloudFrontに設定する際はACMをバージニア北部(us-east-1)に発行する必要があります)
ドメインの設定については以下の記事がわかりやすかったのでまだ設定できていない方は以下の記事を参考にしてください
S3バケットの作成
静的ファイルを格納する用のS3バケットを作成します
今回はS3に直接アクセスしないのでバケットのブロックパブリックアクセス設定はブロックしても大丈夫です
パブリックアクセス以外の設定も今回はデフォルトのままで大丈夫です
バケット作成後に静的ファイルをアップロードします
今回はCloudFrontにデフォルトルートオブジェクトをindex.htmlを設定するのでindex.htmlを忘れずにアップロードします
CloudFrontののディストリビューションの作成
CloudFrontを使用してコンテンツ配信する際はディストリビューションを作成します
ディストリビューションの作成方法について順番に説明します
オリジンの設定
CloudFrontがエッジロケーションを通じて配信するコンテンツのリクエストを送信するロケーションのことをオリジンといいます
今回はS3をオリジンに設定するので下記の画像のようにオリジンドメインを先ほど作成したS3バケットに設定します
次にOrigin Acccess Control(OAC)の設定を行います
OACを設定することで指定したCloudFrontのディストリビューションのみ対象のS3へのアクセスを許可することができるようになります
今回は新規でS3を作成したのでOACも新規で作成します
S3バケットの名前が入ったOAC名で作成します
オリジンタイプはS3に設定します
デフォルトのキャッシュビヘイビア
CloudFrontがリクエストをオリジンに対してどう扱うか(ビヘイビア)の設定を行います
今回は以下の画像のように設定します
キャッシュキーとオリジンリクエスト
キャッシュポリシーはCachingOpitmizedに設定します
CloudFront がキャッシュキーに含める値を最小限に抑えることで、キャッシュ効率を最適化するように設計されているオプションです
WAF
今回はWAFを作成していないので有効にしない、に設定しますが本番環境で使用する際は設定するようにしましょう
SSLの設定
カスタムSSL証明書にバージニア北部リージョン(us-east-1)内に作成したSSL証明書を指定します
デフォルトルートオプション
デフォルトルートオプションにindex.htmlを指定します
ディストリビューションの作成完了
以下のようにディストリビューションが作成されたら成功です
また、S3バケットにCloudWatchへのアクセスを許可するためにバケットポリシーを付与する必要があります
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{バケット名}/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::{アカウントID}:distribution/{ディストリビューション名}"
}
}
}
]
}
Route53の設定
Route53のAレコードのトラフィックのルーティング先に先ほど作成したCloudFrontのディストリビューションを指定します
実際にディストリビューションとドメインからアクセスしてみよう！
以下のようにディストリビューションとドメインからアクセスした際にindex.htmlが表示されたら成功です
参考