今回は静的サイトのテスト環境として設定していく手順のメモです。
※コンソール画面の構成が変わりやすいので画面キャプチャは載せない形で書いてみました。(2021/8執筆)
構成やボタンなどは同じものも多いので適宜似た単語などを探して進めてみてください。
このハンズオンを最後まで進めると
お名前ドットコム → Route 53 → S3の形式（http）で
静的なサイト公開までが実現できます。
１．ドメインレジストラを決める
ドメインレジストラはお名前ドットコムにしました。AWSでも取得できますがここは好みで良いと思います。ドメインをまず取得します。
２．S3バケットを作成します
ウェブサイトをS3で公開する場合はバケット名とウェブサイトのドメインを合わせる必要があります。今回はwww.example.comという前提で進めます。
１．S3コンソール画面から[バケットを作成]ボタンをクリックします。
２．バケット名にwww.example.comと入力
リージョンにap-northeast-1と入力
あとはとりあえずデフォルトで[バケットを作成]ボタンをクリックします。
３．ここからバケットの設定を進めます。作成した[バケット名]をクリックします。
４．[プロパティ]タブをクリックします。一番下の静的ウェブサイトホスティングの[編集]をクリックします。
[有効にする]にチェックを入れます。
インデックスドキュメントに[index.html]
エラードキュメントに[error.html]を入力します。
index.htmlはドメインにアクセスした時に表示されるトップページのhtmlファイル名
error.htmlは404エラーなどが起こった際に表示されるエラーページのhtmlファイル名で
後ほどこの名前でファイルを作成してアップロードします。
他の設定はデフォルトで[変更の保存]をクリックします。
５．index.htmlを作成しアップロードします。
S3コンソールからバケット名をクリックし[アップロード]ボタンを押します。
６．パブリックアクセスブロックの設定を解除します。
[アクセス許可]のタブからブロックパブリックアクセスの[編集]をクリックして
パブリックアクセスをすべてブロックを[オフ]に設定します。
７．バケットへのアクセス権（バケットポリシー）を編集します。
[アクセス許可]のタブをクリックします。
バケットポリシーの[編集]をクリックします。
まずバケットARNをコピーします。
ポリシージェネレータで以下のように設定します。
バケットARNはコピーしたものを貼り付けます。
貼り付けたら/を追加し、"Resource": "arn:aws:s3:::www.example.com/", のような形にします。
[Add Statement] → [Generate Policy]とクリックすると
yamlが生成されるのでそれをコピーします。
バケットポリシーの編集タブに戻ってポリシーの部分にyamlを貼り付けます。
Sidの項目を後でわかりやすいように書き換えておきます。
ここでは次の名前にしておきます。[PublicReadForGetBucketObjects]
※Sidはポリシー内でかぶっていなければ自由につけても良い識別子です。
８．[プロパティ]タブ最下部の[パブリックウェブサイトエンドポイント]のURLをクリックすると
ひとまずhtmlの内容がブラウザから見られるはずです。
３．Route 53の設定で独自ドメインでS3のhtmlを表示
１．https://console.aws.amazon.com/route53/を開きます。
２．[ホストゾーンの作成] を選択します。
３．[ドメイン名]を入力します。
４．タイプで[パブリックホストゾーン]を選択します。
５．[ホストゾーンの作成]をクリックします。
６．ホストゾーンが一つ登録されます。[ホストゾーン] → 登録した[ドメイン名] → [レコード作成]と進みます。
７．レコード名に[www]
レコードタイプに[A]
エイリアスを[オン]
トラフィックのルーティング先に
[S3ウェブサイトエンドポイントへのエイリアス]
[ap-northeast-1]
S3の[パブリックウェブサイトエンドポイント]（前述手順２-８で使用したもの）を設定し
他はデフォルトで[レコードを作成]をクリックします。
※AliasレコードはAWS独自のレコードでCNAMEレコードと似た機能が使えますがAWSのサービスを使う際にはCNAMEレコードよりもパフォーマンスの面で向上が見込めるものになります。詳しくは以下の記事を参照してみて下さい。
Aliasレコード
４．お名前ドットコムのネームサーバを設定する
１．お名前ドットコムの管理画面にログインする。
２．メニューから[ドメイン]をクリック[ドメイン一覧]をクリックします。
３．変更するドメイン名をクリックします。
４．[ネームサーバの変更]をクリックします。
５．ここで一度Route 53の管理画面にいってNSレコード(ns-xxx.awsdns-xx.xxx)を４つコピーします。
６．お名前ドットコムの管理画面で２．ネームサーバの選択のところで[その他]を選択し[その他のネームサーバを使う]にチェックを入れ
NSレコードを１つずつコピーペーストしていきます。４つ目は＋ボタンを押すと追加できます。
７．[確認]ボタンをクリックししばらく待つとwww.example.comでS3の内容が表示されると思います。
（公式では反映まで２４時間〜７２時間とのことですが私の環境では３時間ほどで一回確認したら反映されていました。）
CDNやSSLを組み込みたい
そんな方は続きをどうぞ
Route 53 + CloudFront + ACM + S3でCDN＆SSL付き静的サイト公開