2月末で退職。エンジニア未経験、40歳。目指せクラウドエンジニア！！

ハンズオンパート2
今回のお題は「EC2を使わず、S3のみでWebサイトを公開する。」です。

今回もchatGPTを使いながら、実際にAWSを動かしてみました。

以下、chat GPTの指示。
実践②：S3 静的Webサイト構築【完全手順】
ゴール

EC2なし

サーバー管理なし

ブラウザでWebページ表示

全体像（先にイメージ）
[ Browser ]
|
HTTP
|
[ S3 Bucket ]

👉 これだけです。超シンプル。

STEP 1｜S3 バケットを作成する

AWS コンソール

検索 → S3

バケットを作成

設定内容（重要）
項目 設定
バケット名 my-static-site-あなたの名前
リージョン 東京（ap-northeast-1）
オブジェクト所有者 ACL 無効（そのまま）
パブリックアクセス ❗ すべてのチェックを外す

⚠️
「パブリックアクセスをブロック」の
チェックを外すのが最大のポイントです。

確認チェック
☑「現在の設定で〜公開される可能性があることを承認します」

👉 バケットを作成

STEP 2｜HTML ファイルを用意する
ローカルPCでOK

メモ帳を開く

以下を貼り付け👇

S3 Static Site

Hello AWS S3!

EC2なしで公開しています。

ファイル名を

index.html

で保存

STEP 3｜S3 にアップロード

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

アップロード

index.html を追加

アップロード

STEP 4｜静的Webホスティングを有効化（超重要）

バケット → プロパティ

一番下までスクロール

静的ウェブサイトホスティング

編集

設定

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

ホスティングタイプ：静的ウェブサイト

インデックスドキュメント：

index.html

👉 変更を保存

STEP 5｜バケットポリシーを設定（公開用）

バケット → アクセス許可

バケットポリシー

以下を貼り付け👇
（バケット名は自分のものに変更）

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-static-site-あなたの名前/"
}
]
}

保存

⚠️ 警告が出ますが 正常 です。

STEP 6｜URL にアクセス 🌍

バケット → プロパティ

静的ウェブサイトホスティング

表示されている エンドポイントURL をクリック

👇 例

🎉
Webページが表示されたら成功！

初歩的なミスでindex.htmlのファイル名ミスで最初エラーになってしまいましたが、何とか修正し、無事に成功しました。