はじめに

Next.jsで生成された静的サイトをAWS S3にアップロードし、CloudFrontなどを通じて公開するケースはよくあります。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

今回紹介するのは、aws s3 sync コマンドを使ってファイルをアップロードする際の注意点と、パブリックアクセスの許可設定についてです。

書こうと思ったきっかけ

この内容は、あくまで個人的な備忘録としてまとめたものです。
ハッカソンでS3にNext.jsをデプロイする機会があり、手順や注意点を整理しておきたいと思い、記事にすることにしました。

バケットポリシーによる公開設定

まず、アップロードは以下のようにシンプルに行います。

aws s3 sync ./out s3://honda-ehime-dev

✅ --acl public-read は付けないでOKです！

注意点

このままだと、S3バケット側で以下のような制限が有効になっている場合、アップロードしてもファイルは外部からアクセスできません：

ACL無効化（バケットレベルでの設定）
パブリックアクセス制限が有効

そのため、バケットポリシーで明示的に読み取り権限を与える必要があります。

バケットポリシーの例

AWSコンソールで「バケット」→「アクセス許可」→「バケットポリシー」と進み、以下のようなJSONを貼り付けて保存します：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::honda-ehime-dev/*"
    }
  ]
}

✅ これにより、誰でもこのバケット内のファイルにHTTP経由でアクセスできるようになります。

まとめ

手順	内容
①	`aws s3 sync` コマンドを `--acl` なしで実行する
②	バケットポリシーでパブリックアクセスを許可する

やるコマンドまとめ

aws s3 sync ./out s3://honda-ehime-dev