CloudFrontにS3を紐付けたが、403Forbiddenエラー

インフラ

本記事では、CloudFrontにS3を紐づけたのに403エラーでサイトが表示されない解決方法について掲載します。

最近、CloudFront設定の手順が変わったのか、原因の対策記事がなかなか上がっていなかったため記事を作成しました。最近CloudFrontで実装しようとしている方で同じようなエラーに遭遇した方はぜひ参考にしてみてください。

CloudFrontで403エラーの対策方法

結論から言うと、原因はOACを設定していなかったのが問題でした。OACとはOrigin access control settingsの略です。下記画面でオリジンドメインにS3のバケットを選択すると、「Webサイトのエンドポイントを使用」という警告が出てきますが、これを選択するとOACの設定ができなくなってしまいます。

私の場合は、これをとりあえずクリックしてしまい、その結果OACを設定することなくディストリビューションを作成してしまい、s3との紐付けができなくなってしまっていました。

よってこの警告は無視して進めてください。

そうすると、下の方にオリジンアクセスがあるので、Origin access control settingsを選択して、OACを設定した人は選択して、した覚えがない人はコントロール設定を作成を選択します(設定はデフォルトでokです)。

その後、ポリシーをコピーして、これを紐づけたいs3のバケットポリシーに貼り付けます。

「変更を保存」後、ディストリビューションが有効であることを確認し、ここの最終変更日がデプロイから日付に変わるまで待った後、ディストリビューションドメインにアクセスしたところ、アクセスすることができました!

まとめ

初めてのAWSデプロイだったので色々と手詰まりましたが、エラーについて色々と調べるとCloudFrontについて色々と勉強になりました。

引き続き、Route53との紐付けをおこなってドメイン設定を進めていこうと思います。

コメント

タイトルとURLをコピーしました