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 レコード設定がうまくいっていない可能性があります）