🐕

AWS初心者がS3静的ホスティングに挑戦！5つの疑問と共に学んだ実践記録

に公開
AWS
初心者
S3
Web
静的ホスティング
tech

はじめに

こんにちは、sakura-saku-awsです🌸

AWS完全初心者の私が、無資格でAWS環境構築に挑戦する記録の第2回目です！
今回は、前回作成したS3バケットを使って、ついに自分のWebサイトを公開することに挑戦しました。

なぜ静的ホスティングに挑戦したのか？

S3バケットの作成は完了したものの、「で、これで何ができるの？」という状態でした。
調べてみると、S3の静的ホスティング機能を使えば：

  • HTMLファイルをアップロードするだけでWebサイトが公開できる
  • サーバーを立てる必要がない
  • 初心者でも手軽にWebサイト運営を体験できる
  • 費用も月数円レベル

「これは試してみたい！」と思い、早速挑戦することにしました。

静的ホスティング設定の手順

1. HTMLファイルを作成

まずは、シンプルなHTMLファイルを作成しました：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>さくらのAWS学習記録</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        h1 { color: #FF69B4; }
        .progress { background: #f0f0f0; padding: 20px; border-radius: 8px; }
    </style>
</head>
<body>
    <h1>🌸 さくらのAWS学習記録 🌸</h1>
    <div class="progress">
        <h2>現在の進捗</h2>
        <ul>
            <li>✅ AWSアカウント作成</li>
            <li>✅ S3バケット作成</li>
            <li>🔄 S3静的ホスティング設定中</li>
            <li>⏳ EC2構築予定</li>
        </ul>
    </div>
    <p>AWS完全初心者が実践で学ぶ成長記録です！</p>
    <p><strong>目標：6ヶ月でSAA取得 → AWSエンジニア転職</strong></p>
</body>
</html>

2. S3バケットにファイルをアップロード

既存のsakura-saku-aws-beginnerバケットに、作成したindex.htmlをアップロードしました。
この段階では、まだWebサイトとして見ることはできません。





3. 静的ホスティングを有効化

ここが今回のメインポイント！

  1. バケットの「プロパティ」タブを選択
  2. 一番下の「静的ウェブサイトホスティング」セクションを見つける
  3. 「編集」をクリックして以下を設定：
    • 静的ウェブサイトホスティング：有効
    • ホスティングタイプ：静的ウェブサイトをホストする
    • インデックスドキュメント：index.html
    • エラードキュメント：index.html






4. パブリックアクセス設定

ここで最初のハードルが...

  1. 「アクセス許可」タブで「パブリックアクセスをブロック」を編集
  2. 「パブリックアクセスをすべてブロック」のチェックを外す
  3. 警告メッセージが表示されて少し不安に...






5. バケットポリシー設定

最後に、バケットポリシーを設定：

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






6. 動作確認・完了！

「プロパティ」タブのバケットウェブサイトエンドポイントをクリックすると...

成功！自分のWebサイトが表示されました！🎉

URL: sakura-saku-aws-beginner.s3-website-ap-northeast-1.amazonaws.com

実践中に浮かんだ5つの疑問

疑問1：「静的ホスティング」とは何か？

作業を進めながら、「そもそも静的ホスティングって何？」と疑問に思いました。

調べて分かったこと：

  • 静的ホスティング = HTMLファイルなどをそのまま配信する仕組み
  • 動的な処理（データベース接続、サーバーサイド処理）はできない
  • HTMLファイルをアップロードするだけでWebサイトが公開できる
  • 個人ブログ、ポートフォリオサイト、ランディングページなどに最適

つまり、「ファイルを置くだけでWebサイトになる」シンプルな仕組みなんですね。

疑問2：デフォルトでパブリックアクセスが全てブロックされているのはなぜ？

設定中に「パブリックアクセスをすべてブロック」を外す必要がありましたが、警告メッセージが出て不安になりました。

これはセキュリティ対策でした！

  • 間違って機密情報をアップロードしても外部からアクセスできない
  • 明示的に「公開したい」と設定しない限り、安全を保つ
  • AWSの「セキュリティファースト」の思想

デフォルトで安全側に設定されているのは、さすがAWSという感じです。

疑問3：バケットポリシーを記載しないとどうなるのか？

バケットポリシーの設定画面で、「これを設定しないとどうなるの？」と疑問に思いました。

実際に試してみると：

  • 403 Forbidden エラーが表示される
  • ファイルは存在するが「読み取り権限がない」状態
  • バケットポリシー = 「誰がどのファイルにアクセスできるか」のルール
  • 今回の設定：「誰でも(*)このバケットのファイルを読み取り可能」

権限設定がないと、せっかくファイルをアップロードしても見ることができないんですね。

疑問4：静的ホスティングで料金は発生するのか？

無料枠を超えて課金されるのか気になりました。

調べた結果：

  • 料金は発生しますが、とても安い！
  • ストレージ料金：月額約0.025USD/GB（東京リージョン）
  • リクエスト料金：1,000リクエストあたり約0.0004USD
  • 今回のHTMLファイル程度なら月数円レベル

この程度なら学習費用として全然問題ありませんね。

疑問5：HTMLファイルを編集したのに更新されない？

サイトが公開できた後、進捗を更新しようとHTMLファイルを編集しました。
しかし、ブラウザでサイトを確認しても変更が反映されていない...

最初は「設定が間違っているのかな？」と不安になりました。

調べて分かったこと：

  • S3は自動同期されない - ローカルファイルを編集してもS3には反映されない
  • 再アップロードが必要 - 同じファイル名でアップロードすると上書きされる
  • ブラウザキャッシュが原因の場合も多い

解決方法：

  1. ローカルでHTMLファイルを編集
  2. S3バケットで既存ファイルに「再アップロード」
  3. ブラウザでCtrl + F5（強制リロード）して確認

実際に試してみると、無事に更新されました！
「S3はファイルストレージ」という基本を理解していれば当然のことですが、
初心者には「なぜ更新されないの？」と混乱しやすいポイントでした。

初心者だからこその気づき

今回の作業を通して気づいたのは、「なぜ？」を疑問に思うことの価値です。

専門書や記事では「手順通りに設定すれば完了」と書かれていることが多いですが、

  • なぜこの設定が必要なのか？
  • 設定しないとどうなるのか？
  • デフォルト設定の意図は何か？
  • なぜファイル更新が自動反映されないのか？

こうした疑問を持つことで、単なる手順の暗記ではなく、理解につながりました。

完了後の感想

思ったより簡単だった！ というのが正直な感想です。

でも、各設定項目の意味を理解しようとすると、セキュリティ、権限管理、コスト管理など、
AWS の奥深さも感じました。

何より、自分のWebサイトが公開できたという達成感は格別でした🌸

今後の予定

次回は、いよいよEC2構築に挑戦予定です！

  • EC2インスタンスの作成
  • SSH接続の設定
  • Webサーバーの構築

S3から EC2 へとステップアップしていきます。

感想

無資格の完全初心者でも、疑問を持ちながら一歩ずつ進めば、
AWS の世界を体験できることが分かりました。

特に今回は「自分のWebサイトを公開する」という、
目に見える成果が得られたのが嬉しかったです！

同じようにAWS学習を始めた方、一緒に頑張りましょう💪

リンク

  • GitHub: sakura-saku-AWS
  • X: [さくら@AWS学習中]
  • 公開したWebサイト: sakura-saku-aws-beginner.s3-website-ap-northeast-1.amazonaws.com

次回予告：EC2でWebサーバーを構築してみます！

Linux コマンドも打てない初心者が、サーバー構築に挑戦...
果たして無事にWebサーバーを立ち上げることはできるのか？

次回もお楽しみに🌸

Discussion