事前準備

お名前.comで無料のドメインをGET
超シンプルなHTML・CSSファイルを用意

下記の図のように、フェイルオーバーも設定せずシンプルな静的WEBサイトを構築したいと思います。

参考にしたのは下記の記事です。(ありがとうございました。)
Amazon S3 バケットの静的なウェブサイトにドメインを使用する
 S3で静的ウェブサイトホスティングの設定をする

手順は上記記事で丁寧に詳しく書いていただいているので、私がハマってしまったポイントだけ備忘録として書きます。

1.S3のバケット名とドメインを《完全に》一致させる

　ステップ 2: ルートドメイン用の S3 バケットを作成する
と、公式にも記載してくれていて、

Route53の設定画面でもきちんと注意書きしてくれているにも関わらず！！！
私は、
下記の設定にしてしまっていてWEBページが表示されませんでした・・・
レコード名を blog.kwtkd.net
S3バケット名を kwtkd.net

ここに気づかずネームサーバーの書き換えってこんなに時間かかるんだ〜と20時間くらいただ待ってました。笑　流石に自分がどこかでミスってるんだと気づき、Terminaiで下記のコマンドでネームサーバーがお名前.com発行のものからAWS発行のものに書き換わっているか確認。改めて自分の設定ミスに気づく・・・

NS dig ドメイン名

2. S3にHTMLとCSSファイルを、まとめてフォルダのまま入れではダメ

上記の設定ミスに気づき、再度、独自ドメインでアクセスしてみても次は404エラーが・・・

《原因》

S3にアップロードする際にHTMLファイルもCSSも画像フォルダもぜーんぶまとめて1つのファイルでアップロードしてしまっていたから。

《解決》

index.htmlは1つのファイルとして、
cssといimageは1つずつのフォルダとして個別にアップロードすべきでした。

《感想》

解決してみれば、技術も何も本当にイージーミスなことでした笑
2度と失敗しません！

これが無事に独自ドメインでS3にてホストしているWEBページです。http://blog.kwtkd.net