S3にポリシーを付与してもCloudFrontでAccessDeniedになりS3にアクセスできない

はじめに

いままでCloudFormationであげていたフロントエンドがいきなりアクセスできなくなってしまった、○○さんはアクセスできるが私だけなぜかアクセスできない

などの現象が時々起きることがあります。
そのようなときは今回の内容が役に立つかと思いますので、まとめます

問題

いままでCloudFormationを利用して、CloudFront+S3の構成でフロントエンドをデプロイして、CloudFrontのディストリビューションドメイン名でアクセスできていたのですが、ある時に再度CloudFormationで環境構築したところ以下の画面がでました

このエラーはCloudFront→S3へのアクセス権限がないというものです

解決方法

まずはCloudFrontのOrigin Access Identityが、S3バケットの許可で設定されているかを確認しました

        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2Q5PX59HB9ULE"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::project-test/*"
        }
    ]

許可はされていました
なぜだろうと思い調べていると以下の記事をみつけます

ディストリビューションドメイン名でアクセスした際にURLが

https://cloud-test.s3-ap-northeast-1.amazonaws.com/index.html

のように、S3のURLのアクセスになっている場合はキャッシュが悪さをしているようでした

そこでブラウザを変えて(firefox)アクセスしたところ、問題なくアクセスができるようになりました

URLは以下のような形式になっていました

https://d1k02n6dgrtw8l.cloudfront.net/hello

アクセスした際にS3のURLになっている場合は、1-2時間キャッシュが消えるのを待つか、別ブラウザで試してみるとよいです

おわりに

この現象が初めて環境構築するときに起きるとかなり困惑するだろうなと思いました
よくありそうな問題ですがネットにはあまり情報がなかったのでまとめました

参考