AWSで、CloudFrontとS3を組み合わせてWebコンテンツを配信しようとしたときに、思わぬところでハマったので、過去につまづいた部分も含めてまとめてみました。

1. CloudFrontからS3へアクセスできない

🛑 発生した問題

CloudFrontのオリジンにS3を設定したのに、以下のような403エラーが出てアクセスできない。

または、ブラウザの開発ツールで No Access-Control-Allow-Originというエラーが表示される。

✅ 解決策

CloudFrontからS3へアクセスするには、署名付きURLか、OAC（Origin Access Control）/ OAI（Origin Access Identity）の設定を行う必要があります。

【解決方法①】OACを使う（推奨）

1.CloudFrontのオリジンにOACを設定

CloudFrontの「オリジン」からS3を選択
「オリジンアクセス」で「Origin access control settings (recommended)」を選択
- 新規の場合は「Create new OAC」で作成する

2.S3 のバケットポリシーを設定
※値は適宜変更してください。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::your-account-id:distribution/your-distribution-id"
        }
      }
    }
  ]
}

【解決方法②】OAI を使う（古い方法）

CloudFront側でOAI（Origin Access Identity）を作成し、S3のバケットポリシーでOAIにアクセス許可を付与します。

OACの方が新しく、よりセキュアなので推奨されています。

🔑 署名付きURLとOACの使い分け

CloudFrontでS3にあるファイルを配信する場合、「署名付きURL」と「OAC」は目的によって使い分ける必要があります。
簡単にまとめると、

特徴	署名付きURL	OAC
主な用途	コンテンツを一部の人だけに制限したいとき（有料ユーザー向けなど）	CloudFront経由だけにS3アクセスを制限したいとき
利用方法	URLにトークン（署名）を付ける	CloudFrontの設定＋バケットポリシーで制御
URL単位の制御	できる（細かいアクセス制御が可能)	できない（URL単位では不可)
実装の手間	やや複雑（URL発行処理が必要)	シンプル（CloudFront側の設定のみでOK）

使い分けの例としては、

会員限定の動画や画像を配信 → 署名付きURL
一般公開の静的ファイル（JS/CSS/画像）を安全に配信 → OAC

などで使い分けるといいかもしれません。

2. キャッシュが効かず更新されない

🛑 発生した問題

S3に新しいファイルをアップロードしたのに、CloudFrontでは古いバージョンのファイルが表示される。

✅ 解決策

この場合は、CloudFrontのキャッシュが原因である可能性が高いので、以下手順を実施します。

【解決方法①】キャッシュの無効化（無効化 API）

CloudFrontのInvalidation機能を使ってキャッシュを削除。

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

※ パスを /* にすると全キャッシュ削除になります。
特定のパスだけキャッシュを無効化することも可能です。

【解決方法②】バージョニング戦略を導入

キャッシュ無効化APIを毎回使うのはコストがかかるため、ファイル名にバージョン情報を含める方法が推奨されます。

<script src="/js/app-v1.2.3.js"></script>

新しいバージョンをデプロイするたびに v1.2.3 の部分を更新すれば、CloudFront のキャッシュを回避することができます。

3. CORSエラーが発生する

🛑 発生した問題

フロントエンド（別ドメイン）から、S3にあるリソースにアクセスしようとすると、以下のようなCORSエラーが出る。

Access to XMLHttpRequest at 'https://your-bucket.s3.amazonaws.com/file.png' from origin 'https://your-site.com' has been blocked by CORS policy.

✅ 解決策

S3バケットのCORS設定を適切に設定します。

1.S3のCORS設定を追加

バケット → アクセス許可 → Cross-Origin Resource Sharing (CORS)

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>https://your-site.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

2.CloudFrontのCORS設定を確認

Behavior設定の「Cache policy」で、「CORS-S3Origin」などを選択
HTTPヘッダー「Access-Control-Allow-Origin」を適切に設定

4. x-amz-security-token エラーでOACが機能しない

🛑 発生した問題

CloudFrontでOACを有効化したのに、x-amz-security-tokenに関するエラーが出る。

✅ 解決策

1.CloudFrontのオリジンヘッダーで、Authorizationを無効化（削除）

2.OACの設定を見直し、S3のバケットポリシーが正しいか確認

3.必要ならCloudFrontの署名付きURLも試してみる

まとめ

今回は、CloudFront+S3の構築時にハマった問題と解決策をご紹介しました。
特に OAC の設定、キャッシュ管理、CORS の設定はつまずきやすいポイントなので、事前に概念の理解をしておくとスムーズに設定できるかと思います！