S3静的ウェブサイト+CloudFront+Route53の構築


この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので十分ご注意ください。

はじめに

前回作成した『S3静的ウェブサイト + CloudFront』の構成に、無料ドメインを取得してRout53を利用して 取得したドメインを付与していくという、一連の構築のメモを残していきます。

構成図

スクリーンショット 2022-02-21 11.54.42.png

ハンズオン

0:前回のS3静的ウェブサイト+CloudFrontの確認

①AWS CLIを利用してAmazon S3静的ウェブサイトのホスティング
②S3静的ウェブサイト+CloudFrontの構築

1:無料ドメインを取得

1.1 freenomというサイトにアクセスしてログインする

他にも無料のドメインサイトはあるかとは思いますが、今回はfreenomというサイトから無料ドメインを取得していきます

ログインするための詳しい準備は下記サイト参考
参考: 無料のドメインを取得する

1.2 無料ドメインの取得の際のハマりがちな部分

・『〜.tk』などのトップレベルドメイン(gTLD)まで含めないと、何を入力しても利用不可になるので注意する
・1年間の期間及び、1年以内に都度更新するなどで無料で出来るものの利用は個人の学習範囲程度かと認識しておく(突然利用できなくなる場合もあるとネットで散見)

スクリーンショット 2022-02-19 21.03.14.png

1.3 『Services』の『My Domains』で取得したドメインを確認することができる

スクリーンショット 2022-02-19 21.20.22.png

2:取得したドメインをRoute53のネームサーバで管理する

2.1 AWSコンソール画面より『Route53』のセービスへ遷移して『ホストゾーン』を押下して、表示される『ホストゾーンの作成』の押下

スクリーンショット 2022-02-19 21.39.30.png

2.2 ホストゾーンの作成する

ドメイン名は1で取得したドメイン名を入力
タイプはデフォルトのまま『パブリックホストゾーン』で、インターネット(外部)からのアクセスについてのルーティングとする
スクリーンショット 2022-02-19 21.45.09.png

2.3 ホストゾーンが作成される

作成された画面にあるタイプとは
NS(NameServer):階層的に管理されているドメインが所属しているサーバの場所
SOA(Start Of Authority):ドメイン情報を管理する場所(管理者のメールアドレス等々)
スクリーンショット 2022-02-19 21.53.10.png

2.4 FreenomにNSサーバのアドレスを入力する

2.4.1 Freenomの『Services』の『MyDomains』を押下して、取得したドメインの欄右側にある『ManageDomain』を押下

スクリーンショット 2022-02-19 22.08.22.png

2.4.2 『ManageFreenomDNS』を押下する

スクリーンショット 2022-02-19 22.08.50.png

2.4.3 『EditNameservers』を押下して、Route53で取得したNSレコードを貼り付ける

貼り付けることでFreenomで取得したドメインは、Route53で管理するということを記入している
スクリーンショット 2022-02-19 22.17.07.png

3:Route53で管理することになったドメインと、CloudFront+S3構築とを結ぶためのレコードを作成する

3.1 画面より『レコードを作成』を押下して画面遷移する

スクリーンショット 2022-02-20 7.06.26.png

3.2 『ルーティングポリシーを選択』で『シンプルルーティング』を選択して『次へ』を押下する

スクリーンショット 2022-02-20 7.13.01.png

ルーティングポリシーについて

名称 内容
シンプルルーティング 1つのリソース(ELB、CloudFront等)に対して、1つのIPアドレスという名前解決をしたいルーティングが可能
加重 複数のリソースに対して、『A』には60%『B』には40%のような重み付け(割り当て)をしたいルーティングが可能
位置情報 リクエストした位置情報に基づいたルーティングが可能
レイテンシー レイテンシー(遅延)の小さいリソースへルーティングが可能
フェイルオーバー プライマリ・セカンダリに分け、プライマリのヘルスチェックが失敗したらセカンダリにルーティングが可能
複数回答 リクエストに対して、あらかじめ複数のIPアドレス範囲を指定しておき、その中からランダムで回答するルーティング

3.3 『レコードを定義』内の『シンプルなレコードを定義』を入力する

レコード名:利用するサブドメインの設定
レコードタイプ:CloudFrontに紐づけるためAレコード
値/トラフィックルーテング先:CloudFrontディストリビューションへのエイリアスを選択(自動的に『米国東部(バージニア北部)』となります)
最後に、自身のCloudFrontのドメインを入力して、右下『シンプルなレコードを定義』を押下する

スクリーンショット 2022-02-20 11.32.37.png

3.4 『レコード』にシンプルルーティングが追加されていることを確認する

スクリーンショット 2022-02-20 11.34.12.png

4:挙動を確認する

4.1『3.4』で最終的に取得したドメイン(今回の場合だと『lesson.tetutetu-2020.tk』)でアクセスをする

スクリーンショット 2022-02-20 8.07.51.png

でかでかと『403ERROR』ですが予期していた挙動なので安心です(負け惜しみじゃないはず)

現状の設定だとACM(AWS Certificate Manager)による証明書がCloudFrontに付与されていない状態のため通信がセキュアでない(HTTP通信)のため上記のエラーが表示されてしまっていると考えられます。

さいごに

本来であればHTTP通信が確認できるまでを構築したかったのですが、Route53〜CloudFront〜S3(静的)の形だと、どういった設定で構築すればいいのか有耶無耶なまま終わってしまいました。
ACMを付与することでHTTPS通信が可能とはなるので、そういうものと鵜呑みにしてもいいのですが消化不良(そして実力不足・知識不足)になってしまいました。

気持ちを切り替えて次は、こちらの構築にACMを付与したHTTPS通信にする構築をやっていきたいと思います。

Last modified: 2022-02-22

Author