Next.js静的サイトをS3 + CloudFrontで公開したら403になったので調査した

Posted at 2026-06-26

Next.jsをS3 + CloudFrontへデプロイしたところ、

/posts/hello

だけ403になりました。

確認したことは以下です。

CloudFrontキャッシュ
S3 Bucket Policy
OAC設定
S3上のファイル存在確認

どれも問題なし。

原因はCloudFrontが

/posts/hello

を

/posts/hello/index.html

へ変換していなかったことでした。

さらに、CloudFront Function用のJavaScriptファイルは作成済みだったものの、Terraformで aws_cloudfront_function を定義しておらず、AWS上にはFunction自体が存在していませんでした。

CloudFront FunctionをTerraform管理に追加し、Distributionへ関連付けることで解決しました。

記事では原因の切り分け手順とTerraformのコード例をまとめています。

同じように「403だけどS3にもファイルがある」という状態の方の参考になれば幸いです。