自己学習の一環として静的WebサイトをS3とCloudFrontを使用して構築しました。
ここでは、構築完了までに実施したことや、個人的にハマったポイントを記録します。
1.環境準備(所要時間：30分)
Webサイトを作成するにあたり、以下を準備しました。
それぞれ以下の用途で用意しました。
・Figma...Webサイトのプロトタイプ作成
・VSCode...HTML / CSS を記述するためのエディタ
2.プロトタイプ作成(所要時間：1時間)
Figma を使用して、個人用サイトをイメージした各ページの内容を検討しました。
3.HTML,CSSファイル作成(所要時間：7.5時間)
Figmaで作ったプロトタイプをもとに、HTML / CSS ファイルを作成しました。
👉 初めてHTML / CSSを書いたため、思った以上に時間がかかりました。
4.S3単体で静的サイトの構築(所要時間：30分)
まず練習として、S3だけで静的Webサイトを公開しました。
・バケットを作成
・静的ウェブホスティングを有効化
・バケットポリシーで s3:GetObject をパブリックに許可
・HTML / CSS / 画像ファイルをアップロード
ここでアクセスしたところ、以下のエラーが発生しました。
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: index.html
(省略)
調べたところ、これはデフォルトルートオブジェクト（index.html）が見つからない場合のエラーでした。
原因は以下の通りでした。
・アップロード時に personal/ フォルダの中に index.html を格納していた
・S3 の「デフォルトルートオブジェクト」にはフォルダ付きのパスを指定できない
👉 解決策：index.html をバケット直下に再アップロードすることでアクセス可能になりました。
5.S3+CloudFrontでWebサイト構築(所要時間：30分)
次に、CloudFront を利用して高速配信 & HTTPS対応を実施しました。
・CloudFront ディストリビューションを作成
・オリジンに S3 バケットを指定
・OAC (Origin Access Control) を有効化し、CloudFront 経由のアクセスのみ許可
・デフォルトルートオブジェクトに index.html を設定
・バケットを「ブロックパブリックアクセス」有効に変更（CloudFront経由のみアクセス可能に）
当初、アクセスすると Access Denied が出ましたが、原因は「デフォルトルートオブジェクト未設定」でした。
index.html を指定後は問題なく表示できました。
所感
・AWSを業務で触ったことがない初心者でも、比較的スムーズに構築できた
・無料利用枠の範囲で十分に試せることが分かった
・エラーを通じて「S3のデフォルトルートオブジェクトの仕様」や「CloudFront + OAC の仕組み」を理解できた
また学習が進んだら記事を書こうと思います。