株式会社ダイヤモンドファンタジー Advent Calendar 2025

【Day 4】S3はただのストレージじゃない！静的ウェブサイトホスティングで世界に公開する

Last updated at 2025-12-12Posted at 2025-12-12

はじめに

Qiita AWS アドベントカレンダー 2025、4日目です！
前回は「EC2」でサーバーを構築しました。
しかし、画像ファイルやログデータ、バックアップなどを全てEC2の中に保存するのは得策ではありません（EC2が消えるとデータも消えるため）。

そこで登場するのが、Amazon S3 (Simple Storage Service) です。
今日は、「S3＝ただのファイル置き場」というイメージを壊し、S3だけでWebサイトを公開するハンズオンを行います。

1. Amazon S3 とは？（無限の倉庫）

S3は、インターネット経由で使える容量無制限のストレージです。
Google DriveやDropboxの「プログラムから操作できる版」と考えると分かりやすいです。

基本用語

バケット (Bucket):

データを保存する「最上位のフォルダ」のような器。

世界中で一意の名前にする必要があります（誰かが my-test を使っていたら、自分は使えない）。

オブジェクト (Object):

バケットの中に保存するファイルそのもの（画像、動画、テキストなど）。

賢く使う：ストレージクラス

S3には「データの取り出し頻度」に合わせて料金プラン（クラス）があります。

S3 Standard: 標準。頻繁にアクセスするデータ用。

S3 Intelligent-Tiering: アクセス頻度を見て自動で安くしてくれる（迷ったらこれ）。

S3 Glacier: 数年に1回しか見ないログなどの「塩漬け」用。激安だが、取り出しに時間がかかる。

2. なぜS3でWebサイトができるのか？

S3には「静的ウェブサイトホスティング」という機能があります。
HTML/CSS/JSなどの「静的ファイル」であれば、EC2のようなサーバーを一切立てずにWebサイトとして公開できます。

メリット: サーバー管理不要、爆速、激安（月数十円〜）。

デメリット: PHPやPythonなどの動的な処理（DB接続など）は動きません。

ハンズオン：S3だけでWebページを公開しよう

実際にバケットを作成し、HTMLファイルを置いて世界中に公開してみます。

Step 1: バケットの作成

S3コンソールへ移動 -> [バケットを作成]。

バケット名: handson-advent-calendar-2025

※世界で唯一の名前にするため、自分の名前や乱数を入れてください。

AWS リージョン: アジアパシフィック (東京)。

オブジェクト所有者: ACL 無効 (推奨) のまま。

このバケットのブロックパブリックアクセス設定:

重要: 今回はWeb公開するので、[パブリックアクセスをすべてブロック] のチェックを外します。

下に出てくる警告ボックスの「現在の設定により...」にチェックを入れて承諾します。

[バケットを作成] をクリック。

Step 2: HTMLファイルのアップロード

ローカルPCで簡単な index.html を作ります。

Hello from S3!

これはサーバーレスで公開されたページです。

作成したバケット名をクリック。

[アップロード] -> index.html をドラッグ＆ドロップ -> [アップロード]。

Step 3: 静的ウェブサイトホスティングの有効化

[プロパティ] タブをクリックし、一番下までスクロール。

静的ウェブサイトホスティングの [編集] をクリック。

[有効にする] を選択。

インデックスドキュメントに index.html と入力。

[変更の保存]。

これだけではまだ見れません（403 Forbiddenになります）。「誰でも見れるようにする許可」が必要です。

Step 4: バケットポリシーの設定（最難関）

[許可] タブをクリック。

バケットポリシーの [編集] をクリック。

以下のJSONを貼り付けます（YOUR-BUCKET-NAME は自分のバケット名に書き換えてください）。

index.html

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::handson-advent-calendar-2025/*"
        }
    ]
}