AWSで静的ページを公開する時の最も基本的な構成ですが、意外と引っかかるポイントが多いので(2024年の今頃はパブリックアクセスの設定やバケットポリシーの設定など、いくつか躓くポイントがあったのですが、いつの間にかAWSが改善してますね。。)手順をまとめていきたいと思います。
① S3バケットの作成
② CloudFrontディストリビューションの作成
③ S3バケットにポリシーを設定
④ CloudFront経由のみアクセスが許可されていることを確認
AWS マネジメントコンソールで「S3」と検索し、S3のサービス画面に移動する。
「バケットを作成」をクリック
バケットの作成画面に遷移します。
希望のリージョンがあれば、変更しておきましょう。
弊社は京都に本社があるため、今回は一番近い大阪リージョン（ap-northeast-3）を使用することにします。
設定項目は以下の7つがありますが、設定が必要なのは「一般的な設定」の「バケット名」だけです。
・一般的な設定 ← ここでバケット名を設定する
・オブジェクト所有者
・このバケットのブロックパブリックアクセス設定
・バケットのバージョニング
・タグ-オプション
・デフォルトの暗号化
・詳細設定（オブジェクトロック）
今回はバケット名を「genech-blog-bucket」としました。
大文字やアンダースコアは使えないので注意してください。
その他はデフォルトのままで大丈夫です。
Webページなのにパブリックアクセスをブロックにして大丈夫？と感じるかもしれませんが、④でCloudFrontのオリジンアクセスコントロール（OAC）を使用して、CloudFront経由でのみアクセスできるようにするので、心配ありません。
続いて、作成したバケットにindex.htmlファイルをアップロードします。
こちらのファイルがCloudFront経由でのみ表示されることを今回のゴールとします。
先ほど作成したバケットに移動し、index.htmlをドラッグアンドドロップしましょう。
アップロードするファイルの確認画面が表示されます。
設定は変更せず「アップロード」ボタンをクリックしましょう。
アップロードが成功すると以下の画面が表示されます。
「CloudFront」と検索し、CloudFrontのサービス画面に移動します。
「CloudFrontディストリビューションを作成」をクリック
ディストリビューションの作成画面に遷移します。
「オリジンを選択」にカーソルを合わせると、先ほど作成したS3バケットが表示されるので選択しましょう。
オリジンアクセスは「Origin access control settings (recommended)」を選択し、
「Create new OAC」をクリックします。
変更せずに、「Create」ボタンをクリック
「デフォルトのキャッシュビヘイビア」、「関数の関連付け-オプション」はデフォルトのままとします。
ここでWAFを有効にできますが、今回の構成の中で一番高額になるため外しておきます。
必要であれば、有効にしておきましょう。
「デフォルトルートオブジェクト」はindex.htmlとしておきましょう。
ディストリビューションが作成できました。
次の手順でポリシーが必要なので、ポリシーをコピーしておきましょう。
S3バケットの「アクセス許可」タブをクリックします。
バケットポリシー欄の「編集」クリックし、先ほどコピーしたバケットポリシーを貼り付けます。
ディストリビューションドメイン名をコピーし、ブラウザのURL欄に入力してみましょう。
CloudFront経由でS3に保存したindex.htmlが表示できることを確認できました。
最後に、S3バケットに直接アクセスできないようになっているかも確認しましょう。
S3バケットにアップロードした、index.htmlをクリックしオブジェクトのプロパティを確認します。
「オブジェクトの概要」にあるオブジェクトURLをクリックして、アクセスします。
以下の画面が表示されれば、S3へのアクセスはブロックされていることが確認できます。
Amazon S3とCloudFrontを使用したwebページの公開手順は以上です。
上記の構成であれば、独自ドメインを使用しても1か月あたり約100円で運用が可能です。
私も上記の構成で独自ドメインを使用してホームページを公開していますが、2024年12月の請求額は0.63ドル（99.14円）でした。
S3(0.13ドル) + CloudFront(0ドル) + Route 53(0.50ドル) = 0.63ドル
※ここにWAFを追加すると1か月あたり約3000円の追加費用が発生します。
ぜひ、試してみてくださいね。