AWS S3で静的サイトを公開する方法！20分で完了する手順を解説

「AWS S3で静的サイトを公開したいけど手順がわからない」という方向けに、バケット作成から公開まで20分で完了できる手順をまとめます。S3は月額数百円から使える低コストな静的ホスティングサービスです。

AWS S3で静的サイトをホスティングする仕組み

S3（Simple Storage Service）はAWSのオブジェクトストレージサービスです。HTMLやCSS・JavaScriptなどの静的ファイルを保存して、そのままウェブサイトとして公開できる「静的ウェブサイトホスティング」機能が用意されています。

# S3静的ホスティングの仕組み
ユーザー → S3バケット（index.html・CSS・JS・画像）
               ↓
        静的ファイルをそのまま返す
        （サーバーサイドの処理は不要）

WordPressのようなサーバーサイドの処理が必要なサイトには使えませんが、HTML/CSS/JSで作られた静的サイトやAstro・Next.js（静的エクスポート）で生成したサイトには最適です。

コスト面も優秀で、個人ブログや中規模サイトであれば月額数十円〜数百円程度で運用できます。レンタルサーバーと比べるとかなり安いです。

STEP 1：S3バケットの作成

まずS3バケットを作成します。バケットはファイルを入れる箱のようなものです。

# バケット作成の手順
1. AWSコンソール → S3 → 「バケットを作成」
2. バケット名を入力（例：my-static-website）
   ※バケット名はAWS全体でユニークである必要があります
3. リージョンを選択（日本向けなら ap-northeast-1 東京）
4. 「パブリックアクセスをすべてブロック」のチェックを外す
   ※ウェブサイト公開のため必要
5. 「バケットを作成」をクリック

注意点として「パブリックアクセスをすべてブロック」のチェックを外さないとサイトが表示されません。外した後に確認ダイアログが出ますが、静的サイトの公開目的なのでそのまま進めてOKです。

STEP 2：静的ウェブサイトホスティングの有効化

# 設定手順
1. 作成したバケットをクリック
2. 「プロパティ」タブを選択
3. 一番下の「静的ウェブサイトホスティング」→「編集」
4. 「有効にする」を選択
5. インデックスドキュメント：index.html
6. エラードキュメント：error.html（または404.html）
7. 「変更を保存」をクリック

設定後にバケットのウェブサイトエンドポイントURLが表示されます。このURLが後でアクセスするための一時的なアドレスになります。

STEP 3：バケットポリシーの設定

バケットポリシーを設定しないと、URLにアクセスしても「Access Denied」が表示されます。これが最初のつまずきポイントです。

# バケットポリシーの設定手順
1. 「アクセス許可」タブを選択
2. 「バケットポリシー」→「編集」
3. 以下のJSONを貼り付ける

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

※「your-bucket-name」の部分を実際のバケット名に変更してください

このポリシーは「誰でもバケット内のファイルを読み取れる」という設定です。静的サイトの公開には必要な設定ですが、機密ファイルをこのバケットに入れないよう注意してください。

STEP 4：ファイルのアップロード

# ファイルのアップロード方法（AWS CLIを使う場合）
# AWS CLIのインストールが必要

# 単一ファイルのアップロード
aws s3 cp index.html s3://your-bucket-name/

# ディレクトリごとアップロード（よく使う）
aws s3 sync ./dist s3://your-bucket-name/

# キャッシュ設定付きでアップロード
aws s3 sync ./dist s3://your-bucket-name/ \
  --cache-control "max-age=31536000"

コンソールからアップロードする場合は「オブジェクト」タブの「アップロード」ボタンからファイルを選択してください。ただしファイル数が多い場合はAWS CLIの方が圧倒的に楽です。

STEP 5：CloudFrontの設定（推奨）

S3単体でも公開できますが、CloudFrontを前段に置くことを強く推奨します。理由は3つあります。

• HTTPS化：S3のエンドポイントはHTTPのみ。CloudFront + ACMでHTTPS化できます。
• 表示速度の向上：世界中のエッジロケーションにキャッシュされるので速くなります。
• カスタムドメインの設定：独自ドメインを使う場合はCloudFrontが必要です。

# CloudFrontディストリビューションの作成
1. AWSコンソール → CloudFront → 「ディストリビューションを作成」
2. オリジンドメイン：S3バケットのウェブサイトエンドポイントを入力
   ※バケット名ではなくエンドポイントURL（http://xxx.s3-website-...）を使う
3. オリジンプロトコルポリシー：HTTP only
4. ビュワープロトコルポリシー：Redirect HTTP to HTTPS
5. SSL証明書：ACMで発行した証明書を選択
6. 「ディストリビューションを作成」

よくあるミスとして、オリジンにS3バケット名を直接入力してしまうケースがあります。必ず「バケットのウェブサイトエンドポイント」を使ってください。バケット名を入れると静的ホスティングの設定が効かずエラーになります。

STEP 6：Route 53でカスタムドメインを設定する

独自ドメインを使いたい場合はRoute 53でDNS設定を行います。

# Route 53でのDNS設定
1. Route 53 → ホストゾーン → ドメインを選択
2. 「レコードを作成」をクリック
3. レコードタイプ：A
4. エイリアス：オン
5. トラフィックのルーティング先：CloudFrontディストリビューション
6. CloudFrontのドメイン名を選択
7. 「レコードを作成」

# wwwあり・なし両方設定する場合
example.com → CloudFront（Aレコード・エイリアス）
www.example.com → CloudFront（CNAMEレコード）

SSL証明書の取得（ACM）

HTTPS化に必要なSSL証明書はACM（AWS Certificate Manager）で無料取得できます。

# ACMで証明書を取得する際の注意点
⚠️ CloudFrontで使う場合はリージョンを「us-east-1（バージニア北部）」で発行すること
　 他のリージョンで発行してもCloudFrontには使えない

# 取得手順
1. AWSコンソール → リージョンを「us-east-1」に変更
2. ACM → 「証明書をリクエスト」
3. ドメイン名を入力（example.com と *.example.com の両方）
4. DNS検証を選択
5. Route 53で自動検証レコードを作成
6. 数分で証明書が発行される

バージョニングとライフサイクル管理

本番運用するならバージョニングを有効にしておくと安心です。誤ってファイルを削除・上書きしてしまっても過去のバージョンに戻せます。

# バージョニングの有効化
1. S3バケット → 「プロパティ」タブ
2. 「バケットのバージョニング」→「編集」→「有効にする」

# ライフサイクル管理（古いバージョンを自動削除してコスト削減）
1. 「管理」タブ → 「ライフサイクルルールを作成」
2. ルール名を入力
3. 「以前のバージョンのオブジェクトを削除」を選択
4. 日数を設定（例：30日後に削除）

よくあるエラーと対処法

# エラー①：Access Denied
原因：バケットポリシーが未設定またはブロックが有効
対処：バケットポリシーを確認・「パブリックアクセスブロック」を解除

# エラー②：404 Not Found
原因：index.htmlが存在しないまたはパスが間違っている
対処：静的ウェブサイトホスティングのインデックスドキュメントを確認

# エラー③：CloudFrontで更新が反映されない
原因：キャッシュが残っている
対処：CloudFrontのインバリデーションを実行
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

# エラー④：証明書がCloudFrontに表示されない
原因：ACMをus-east-1以外のリージョンで発行した
対処：us-east-1で証明書を再発行する

まとめ：S3静的ホスティングの構成チェックリスト

• S3バケットを作成してパブリックアクセスを許可した
• 静的ウェブサイトホスティングを有効化してindex.htmlを指定した
• バケットポリシーでGetObjectを許可した
• ファイルをアップロードしてエンドポイントURLで表示確認した
• ACMでSSL証明書を取得した（us-east-1で）
• CloudFrontを設定してHTTPS化した
• Route 53でカスタムドメインを設定した
• バージョニングを有効化した

S3の静的ホスティングは一度設定してしまえば後は楽です。GitHub Actionsと組み合わせるとコードをpushするだけで自動デプロイできるようになります。