[AWS] 「S3」+「CloudFront」のコンテンツを独自ドメインで配信する

画像や動画、音声などのアセット、またフロントエンドのファイル一式を「Amazon S3」に配置して配信することがあると思います。
またその場合キャッシュを効かせるために「Amazon CloudFront」を利用することも多いかと思います。
今回はこの「Amazon S3」と「Amazon CloudFront」を使ってコンテンツを配信する方法についてまとめました。
またその際に「Route 53」と「AWS Certificate Manager」で独自ドメインをセキュアに公開する設定も行います。

イメージとしては以下のような構成になります。

準備

「Route 53」でドメインを取得、またはネームサーバーを設定しておきます。

S3バケットの作成

まずはアセットを配置するための「Amazon S3」のバケットを作成します。

「Amazon S3」のコンソールにアクセスします。

「バケットを作成」をクリックします。
以下のように設定して「バケットを作成」をクリックします。（あくまで設定例なので、必要に応じて設定を変更してください）

バケットタイプ: 汎用
バケット名: 任意の名前
オブジェクト所有者: ACL 無効 (推奨)
このバケットのブロックパブリックアクセス設定: パブリックアクセスをすべてブロック
バケットのバージョニング: 無効にする
タグ: 任意
デフォルトの暗号化 – 暗号化タイプ: Amazon S3 マネージドキーを使用したサーバー側の暗号化 (SSE-S3)
デフォルトの暗号化 – バケットキー: 有効にする

バケットを作成して任意のファイルをアップロードします。

上記のようにファイルアップロードが完了したら、S3の設定は完了です。
この段階ではまだアクセスできないので、次に「Amazon CloudFront」のディストリビューションを作成します。

CloudFrontの作成し、S3バケットと関連付ける

次に「Amazon CloudFront」のディストリビューションを作成します。
作成したディストリビューションを「Amazon S3」のバケットに関連付けます。
また先程設定した「S3」に対して、アクセスポリシーを設定する必要があります。

「Amazon CloudFront」のコンソールにアクセスします。

「ディストリビューションを作成」をクリックします。
以下の設定を行い、「ディストリビューションを作成」をクリックします。(こちらも要件に応じて設定を変更してください。)

「オリジン」の設定

Origin domain: 先ほど作成したS3バケットのエンドポイントを指定
Origin Path: 空欄
名前: 任意のID
オリジンアクセス: Origin access control settings (recommended)
- 名前: 任意の名前
- 説明: 任意
- 署名動作: 署名リクエスト (推奨)
カスタムヘッダーを追加 – オプション: 空欄
Enable Origin Shield: いいえ

途中表示される「Origin access control」で「Create new OAC」ではこんな感じで設定します。

デフォルトのキャッシュビヘイビア

パスパターン: デフォルト
オブジェクトを自動的に圧縮: Yes
ビューワープロトコルポリシー: Redirect HTTP to HTTPS
許可された HTTP メソッド: GET, HEAD
ビューワーのアクセスを制限する: No
キャッシュキーとオリジンリクエスト: Cache policy and origin request policy (recommended)
レスポンスヘッダーポリシー – オプション: 空欄

関数の関連付け

すべて関連付けなし（デフォルト）

ウェブアプリケーションファイアウォール (WAF)

理想は「セキュリティ保護を有効にする」ですが予算と相談（費用は説明き記載があります

設定

Anycast static IP list – optional: 空欄
料金クラス: すべてのエッジロケーションを使用する (最高のパフォーマンス)
代替ドメイン名 (CNAME) : ※ここは一旦未設定にして後ほど設定します
Custom SSL certificate – optional: ※ここも後ほど設定するようになります。
サポートされている HTTP バージョン: HTTP/2, HTTP/3
デフォルトルートオブジェクト – オプション: 空欄（デフォルト)
IPv6: 有効

Standard logging

ログ配信: オフ

ディストリビューションを作成すると「S3」のバケットポリシーを更新する旨のメッセージが表示されており、こちらのポリシーをコピーします。

「Amazon S3」画面を開き先ほど作成したバケットを選択して「アクセス許可」のタブを開きます。

「バケットポリシー」の「編集」をクリックする。

先ほどコピーしたポリシーをペーストし、「変更の保存」をクリックします。

アクセスできるかどうかを確認するため「Amazon CloudFront」画面を開き「一般」タブの「ディストリビューションドメイン名」をコピーします。(上記の赤い囲いの部分)

ブラウザでコピーしたドメイン名とファイルパスを指定してアクセスできるか確認します。

アクセス出来ましたらCloudFrontの設定は完了です。
次は独自ドメインを使用してアクセスできるようにします。

「AWS Certificate Manager」で証明書を作成と認証

「CloudFront」を独自ドメインで使用する場合には、SSL証明書が必要となり「AWS Certificate Manager」で証明書を作成する必要があります。
その設定をまとめます。
また注意点として「CloudFront」に設定する証明書は「us-east-1」リージョンで作成する必要があります。