Amazon S3の共有バケットをCloudFront経由で独自ドメインURLでアクセスできるようになるまで

この記事では、備忘録も兼ねてAmazon S3の共有バケットをCroudFront経由で独自ドメインアクセスをさせる方法を記載していきます。

実現したいこと

• 管理画面でAmazon S3にアップロードした画像ファイルをCloudFront経由でアクセスしたい
• CloudFrontのURLではなく、独自ドメインURLベースでアクセスしたい
• ?w=400というGETパラメータを与えることで、画像のリサイズを実現したい（※）

※Lambda@Edgeを使うことで画像リサイズ結果をキャシュ化させることができるのですが、この詳細は別の記事としてまとめる予定です。リサイズ画像はS3に保存されずCroudFrontのキャッシュとして保存されます。キャッシュをクリアすることで不要サイズの画像をなかったことにできるため大変便利です。

必要な構成

• Amazon S3
• Amazon CloudFront
• Lambda Edge

S3とCloudFrontの初期設定

1. 共有バケットとしてAmazon S3バケットを作成する
2. CloudFrontを設定し、手順１で作成したS3バケットを指定
3. Deployedになるまで待つ

独自ドメインアクセス

1. CloudFrontのDistributions設定にて、CNAMEを指定（例: image.ドメイン名）
2. Amazon Certification Manager（バージニアリージョン）にてimage.ドメイン名の証明書を取得する。Route 53のDNSレコード設定はAWS側に任せた方が早いです。
3. CloudFrontのDistributions設定に戻り、手順１のCNAME指定と、その下にある「Custom SSL Certificate (example.com):」を選択し、手順３で取得した証明書を選択する。ここに表示されない場合、ACMリージョンが間違っている、またはRoute 53でのレコード設定が完了していないことが考えられる。
4. Route 53のConsoleにて、Aレコードを追加する。

   Aレコード
   ドメイン：　今回作成したもの(image.ドメイン名)
   エイリアス：　Yes
   エイリアス先：　CloudFront

S3バケットに直接アクセスできないようにする

1. CloudFrontのOrigins and Origin Groups設定タブ→Origin内の項目をチェックし、Edit
2. Restrict Bucket Access: Yes
3. Origin Access Identity: Create a new Identity
4. Grant Read Permissions on Bucket: true
5. 保存
6. ここまでで、自動的にS3バケットのポリシーに上記設定が自動的に追加されているはずです
7. S3の共有アクセスを無効化する必要があります。
   最終的には以下のような形になります。
   Statement配列が2つになっている場合1つ目は不要なので削除します。2つ目のSidを1にします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1QKBSD7C3SD1I"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::【YOUR S3 BACKET NAME】/*"
        }
    ]
}

確認

S3バケットURLに直接アクセスできないこと
CloudFrontURLからはアクセス可能であること
image.ドメイン名でのアクセスが可能であること（NGの場合、CloudFrontURLへのAレコード設定がうまくいっていない可能性があります）