はじめに
「AWSに興味はある。でもクレジットカード登録の画面で、手が止まった」——そんな経験はありませんか？
私自身、以前からAWSに興味がありながら、クレジットカードを登録して触ることへの怖さから、一歩を踏み出せずにいました。 そこで「同じ不安を持つ初学者が、最も安心して始められるハンズオンは何か」を考えました。 S3の静的ウェブサイトホスティングを使ってWebページを公開するという内容であれば、非常に安く簡単にウェブサイトを公開できるため、導入のハードルが低いと考えました。
この記事が、みなさんにとってAWSのハンズオンに一歩踏み出すきっかけとなれば幸いです！
前提知識として
S3 とは？
S3とは**「Simple Storage Service」**のことで、AWSが提供する高耐久性、無制限の容量、安価といった特徴を持ったオブジェクトストレージサービスです。
静的ウェブサイトホスティング とは？
S3に備わっているWebコンテンツ配信機能です。 本来、ウェブサイトを公開するためには、EC2などで仮想サーバーを起動し、ApacheやNginxなどのWebサーバーソフトウェアをインストールして構築する必要がありました。 しかし、この機能を使うことでサーバー構築の手間が不要となり、ストレージにアップロードしたHTMLなどのファイルを直接世界中に配信することができます。
💡 S3のコストに関するメリット
常時起動しているだけで固定費（時間課金）が発生するEC2と異なり、S3は「データの保存容量（GB/月）」と「データ転送量・アクセス時のリクエスト数」による完全な従量課金です。 静的ウェブサイトとして数KB程度のHTMLを置いておくだけであれば、ストレージ保存コストは月に1円にも満たないため、初学者の検証用としても極めてコストメリットに優れています。
手順
早速、次の4ステップに沿って進めていきましょう。
ここからは実際に手を動かしながら、S3を立ち上げてHTMLファイルを格納し、公開したページをブラウザから確認していきます。
| ステップ | 内容 |
|---|---|
| STEP 1 | 静的ウェブサイトを準備する |
| STEP 2 | S3を設定する |
| STEP 3 | 公開ページにアクセスする |
| STEP 4 | リソースの削除手順 |
構成図
今回の構成図は以下のようになります。
公開する静的ウェブサイトを準備する(STEP 1)
公開するHTMLファイルを用意します。 次のHTMLファイルの中身をコピーしてテキストファイルに貼り付け、拡張子を.htmlに変更します。ファイル名は helloworld.html とします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
hello world
</body>
</html>
S3を設定する(STEP 2)
1.検索バーで「S3」と入力し、S3コンソールを開きます。
2.「バケットを作成」をクリックします。
3.バケット名を入力します。（例：my-website-20260620-handson）
・バケット名は世界中のすべてのAWSユーザーの間で一意（ユニーク）である必要があります。
・小文字・数字・ハイフンのみ使用可能です（大文字やアンダースコアは使用できません）。
4.リージョンは「アジアパシフィック（東京）ap-northeast-1」を選択します。
5.「パブリックアクセスをすべてブロック」のチェックを外します。
チェックを外すと警告文が表示されますので、「現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。」 にチェックを入れます。
6.他の設定はデフォルトのまま、画面最下部の「バケットを作成」をクリックします。
7.作成したバケットの一覧から該当のバケットを開き、「プロパティ」タブ → 最下部の「静的ウェブサイトホスティング」にある「編集」をクリックします。
8.「有効にする」を選択し、インデックスドキュメントにトップページとなるファイル名helloworld.htmlを入力して「変更を保存」をクリックします。
9.「アクセス許可」タブ → 「バケットポリシー」の「編集」をクリックし、以下のJSONを貼り付けて「変更を保存」をクリックします。（{YOUR-BUCKET-NAME} 部分をご自身が作成した実際のバケット名に置き換えてください）
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{YOUR-BUCKET-NAME}/*"
}
]
}
⚠️ セキュリティ上の重要な注意制限
このバケットポリシーを設定すると、バケット内のすべてのオブジェクトがインターネット上の誰からでもアクセス可能な「一般公開状態」になります。 今回のハンズオン用バケットには、個人情報、パスワード、アクセスキー、社外秘のソースコードなどの機密ファイルは絶対にアップロードしないでください。
10.「オブジェクト」タブに移動し、「アップロード」ボタンをクリックします。
11.「ファイルを追加」をクリックして用意した helloworld.html を選択し、画面最下部の「アップロード」ボタンをクリックします。
公開したウェブサイトを閲覧できることの確認(STEP 3)
1.S3バケットの「プロパティ」タブ最下部にある「静的ウェブサイトホスティング」欄から バケットウェブサイトエンドポイント のURLを確認します。
・URLの形式：http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com
・S3のウェブサイトエンドポイントは標準状態ではHTTPSに対応していません。本番環境等でHTTPS化（暗号化）を行う場合は、S3の前段に「Amazon CloudFront」を配置する構成が推奨されます。
2.URLをコピーして、ブラウザのURLバーに貼り付けてアクセスします。
3.作成したウェブサイトが表示され、「hello world」と表示されることを確認します。
設定の失敗によるエラーと仕組みの解説
ここまでで静的ウェブサイトの公開に成功しました。次に、あえて設定を変更してエラーを発生させることで、S3のアクセス管理やホスティングの「仕組み」をより深く理解しましょう。
実験1：パブリックアクセスをブロックしてみる
1.S3バケットの「アクセス許可」タブを開き、「ブロックパブリックアクセス（バケット設定）」の「編集」をクリックします。
2.「パブリックアクセスをすべてブロック」にチェックを入れ、「変更を保存」をクリックします（確認のダイアログが表示されたら「確認」と入力します）。
3.先ほど確認した「バケットウェブサイトエンドポイント」のURLに再度アクセスします。
ブラウザに 「403 Forbidden（アクセス禁止）」 というエラーが応答されます。
4.S3のファイルのオブジェクトURLhttps://{バケット名}.s3.ap-northeast-1.amazonaws.com/helloworld.htmlにアクセスします。こちらも同様に 「403 Forbidden」 が応答されます。
💡 なぜ 403 Forbidden になるのか？（権限評価の仕組み）
AWSのアクセス制御には、「明示的な拒否が最優先される（Least Privilege）」という大原則があります。 バケットポリシーでいくら「全員への公開を許可（Allow）」としていても、バケット全体のセキュリティ設定である「ブロックパブリックアクセス（BPA）」を有効にすると、BPAが強力なファイアウォール（強制遮断装置）として機能し、ポリシー設定を上書きしてすべてのパブリックアクセスをブロックします。このためアクセス権限がなくなり、403エラーが返されます。
実験2：インデックスドキュメントに存在しないページを設定してみる
※実験1で有効化した「ブロックパブリックアクセス」は、あらかじめ無効（チェックを外した状態）に戻しておいてください。
1.S3バケットの「プロパティ」タブ →「静的ウェブサイトホスティング」→「編集」をクリックします。
インデックスドキュメントの指定を、あえてバケット内に存在しないファイル名Helloworld.html （※頭文字を大文字）に変更して「変更を保存」します。
2.バケットウェブサイトエンドポイントにアクセスします。
3.ブラウザに 「404 Not Found（見つかりません）」 というエラーが返されます。
💡 なぜ 404 Not Found になるのか？（S3の特性と大文字・小文字の区別）
オブジェクトストレージの特性（Key-Value）:
S3は一般的なWindows等のパソコンとは異なり、ファイル構造をフォルダではなく「オブジェクトキー（一意の文字列）」で管理するKey-Valueストアです。そのため、大文字と小文字を厳格に区別（Case-Sensitive）します。「helloworld.html」 と 「Helloworld.html」 は、S3にとって完全に別のファイル（キー）として扱われます。
インデックス解決の失敗:
「ウェブサイトエンドポイント」のルート（/）にアクセスが来ると、S3は自動的に設定されたインデックスドキュメント名（ここでは 「Helloworld.html」）をバケット内から検索します。しかし、バケット内にあるのは小文字で始まる 「helloworld.html」 のみであるため検索に失敗し、「対象ファイルが見つかりません」として404エラーを応答します。
コラム：ウェブサイトエンドポイント vs オブジェクトURL の挙動の違い
S3バケットのプロパティから見られる「ウェブサイトエンドポイント」と「オブジェクトの直接URL（REST API）」では、エラーの応答方法や仕組みが大きく異なります。
| 比較項目 | ウェブサイトエンドポイント | オブジェクトURL（REST API） |
|---|---|---|
| 主な用途 | 一般ユーザーへのウェブサイト配信 | アプリケーションやシステムからのAPI通信 |
| プロトコル |
http://（HTTPS非対応） |
https://（暗号化通信に対応） |
ルート（/）アクセス時 |
インデックスドキュメントをマッピングして返す | バケット内のファイル一覧（ListBucket）を要求したとみなされる |
| エラー時のレスポンス | ユーザーフレンドリーなHTML形式のエラー画面 | システム解析用のXML形式のエラーテキスト |
| 404エラー発生時 | インデックスで指定したファイルが見つからない場合に発生 | 明示的に指定したオブジェクトキーが存在しない場合に発生 |
リソースの削除手順(STEP 4)
ハンズオン終了後は、セキュリティリスクや予期せぬ課金を防ぐために、以下の手順でリソースを確実に削除しておきましょう。
1.S3バケットを空にします
・S3バケットは中にオブジェクト（ファイル）が1つでも残っていると削除できません。
・該当のバケットを選択し、「空にする」をクリックしてオブジェクトを完全に削除します。
2.S3バケットを削除します
・バケットが空になったことを確認後、該当のバケットを選択して「削除」をクリックします。
・確認のためバケット名を入力し、バケットを完全に削除します。
まとめ
はまったポイント
・バケットポリシーの Version 指定
バケットポリシー内の Version キーには 「2012-10-17」 を指定する必要があります。
私は「ポリシーを更新した日付（ハンズオン実施日など）を自由に記入するもの」と勘違いしてその日の日付を入れてしまい、構文エラー（MalformedPolicy）で保存できませんでした。この Version は「ポリシー言語自体のバージョン（文法規則の版）」を指す固定値であるため、勝手に変更してはいけないことを学びました。
参考: IAM ポリシーの Version 要素について
・ウェブサイトエンドポイントによるルーティングの認識
最初、アップロードしたファイルの「オブジェクトURL」に直接アクセスしていました。後から、プロパティ欄に表示される「バケットウェブサイトエンドポイント」がウェブサイトとしての正式なアクセス窓口であることを知りました。
エンドポイントを利用することで、URLの末尾にファイル名「helloworld.html」を明示しなくても、自動的に設定したインデックスドキュメントが呼び出される仕組みを実感でき、勉強になりました。
所感
今回のハンズオンを通して、ウェブサイトの公開がものの数分でできることに感動しました。 同時に、初めてAWSコンソールを操作する中で、S3という一つのサービスだけでも多くの設定項目があることに驚きました。
多くのサービス、それに紐づく多くの設定を正しく理解し、安全に利用するために、キャッチアップの機会を積極的に作る必要があると実感しました。 今回のテックブログの取り組みはまさに理解を深める場として適切であり、今後も取り組みとして続けていきたいと思います。
参考
Amazon S3 を使用して静的ウェブサイトをホスティングする
IAM ポリシーの Version 要素について
We Are Hiring!
「S3の設定、これで合ってる…？」——一人でそう呟きながら手を止めた経験、ありませんか。
FindConsultingには、そんな瞬間にすぐ頼れるメンター制度があります。 経験豊富なエンジニアが隣にいるから、わからないことを一人で抱え込まず、着実に自分のペースでスキルを積み上げていけます。
私たちが探しているのは、完璧な経験を持つ人ではなく、未知の課題も楽しみながら、共に成長できるチームメンバーです。
まずはカジュアル面談からでも構いません。ぜひ、お気軽にお声がけください。