事前準備
- お名前.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