dayjournal memo

Total 992 articles!!

Try #081 – Amazon Route 53とAWS WAFとAmazon CloudFrontとAmazon S3で独自ドメインホスティング環境を構築してみた

Yasunori Kirimoto's avatar

img




Amazon Route 53とAWS WAFとAmazon CloudFrontとAmazon S3で独自ドメインホスティング環境を構築してみました!



事前準備

  • 事前にAmazon S3に公開したいファイル一式をアップロード
  • 設定は非公開のままでOK

img

img



構築の流れ

  1. Amazon Route 53で独自ドメイン購入登録
  2. Amazon CloudFrontとAmazon S3を組み合わせた公開
  3. Amazon Route 53でAmazon CloudFront用Aレコード作成
  4. Amazon CloudFrontでSSL証明書設定
  5. AWS WAFとAmazon CloudFrontを組み合わせた公開

Amazon Route 53で独自ドメイン購入登録

はじめに、Amazon Route 53で独自ドメインを購入登録します。


AWSコンソール → Route 53をクリック。

img


「ドメインの登録」をクリック。

img


購入したいドメインを検索 → 「カートに入れる」をクリック → 「続行」をクリック。

img


各連絡先を入力 → 「続行」をクリック。

img


メール認証後に自動更新と利用規約を確認 → 「注文を完了」をクリック。

img


「ドメインに移動」をクリック。

img


保留中のリクエストに表示される。

img


しばらくして登録済みドメインに表示されたら購入登録完了。

img



Amazon CloudFrontとAmazon S3を組み合わせた公開

次に、Amazon CloudFrontとAmazon S3を組み合わせて公開します。


AWSコンソール → CloudFrontをクリック。

img


「CloudFrontディストリビューションを作成」をクリック。

img


対象のS3のドメインを指定。S3のバケットアクセスを指定しポリシーは自動更新に設定。httpsにリダイレクトする設定。ルートオブジェクトにS3のindex.htmlを設定。その他は今回はデフォルトのまま設定。

img


作成後、S3のバケットを確認するとポリシーが自動で設定されているのを確認。

img


作成されたCloudFrontのS3用のディストリビューションのURLにアクセスしてみる。

img


CloudFront経由でS3にアクセスしWebSiteが表示される。



Amazon Route 53でAmazon CloudFront用Aレコード作成

次に、Amazon Route 53でAmazon CloudFront用のAレコードを作成します。


「ホストゾーン」 → 対象ドメイン名をクリック。

img


「レコードを作成」をクリック。

img


レコードタイプをAレコード選択・ルーティング先をCloudFront選択・CloudFrontのドメイン入力 → 「レコードを作成」をクリック。

img


Aレコードの設定が表示されます。

img



Amazon CloudFrontでSSL証明書設定

次に、Amazon CloudFrontでSSL証明書を設定します。


対象のディストリビューションを選択 → 「編集」をクリック。

画像


「証明書をリクエスト」をクリック。

画像


AWS Certificate Managerで続きを設定します。「パブリック証明書をリクエスト」を選択 → 「次へ」をクリック。

画像


証明書を発行したいドメイン名を入力・DNS検証を選択 → 「リクエスト」をクリック。

画像


設定された証明書IDをクリック。

画像


「Route 53でレコードを作成」をクリック。

画像


「レコードを作成」をクリック。

画像


CNAMEレコードの設定が表示されます。

画像


対象のディストリビューションに戻ります。証明書を発行したいドメイン名・発行した証明書を選択 → 「変更を保存」をクリック。証明書が表示されない場合はブラウザリロード。

画像


証明書が設定されているのを確認。

画像


AWS Certificate Managerでも発行済ステータスになっているか確認。

画像


設定が完了すると独自ドメインでWebSiteが表示されます。

画像



AWS WAFとAmazon CloudFrontを組み合わせた公開

最後に、AWS WAFとAmazon CloudFrontを組み合わせて公開します。


AWSコンソール → WAF & Shieldをクリック。

img


「Create web ACL」をクリック。

img


任意名称を設定。リソースタイプにCloudFrontを選択。対象のCloudFrontディストリビューションを選択。その他は今回はデフォルトのまま設定。

img

img

img

img


内容を確認し「Create web ACL」をクリック。

img


作成されたWeb ACLをクリック。

img


Web ACLの詳細を確認できます。

img



Amazon Route 53とAmazon CloudFrontとAmazon S3を利用することで、独自ドメインホスティング環境の構築が可能です。また、AWS WAFでリクエスト制限等のカスタマイズをすることも可能です。

今後は、AWS AmplifyやAWS CloudFormationやAWS CDK等で、各サービス構成をどの範囲まで定義できるかも試していければと思います。



Amazon Route 53とAWS WAFとAmazon CloudFrontとAmazon S3について、他にも記事を書いています。よろしければぜひ。
tags - Amazon Route 53
tags - AWS WAF
tags - Amazon CloudFront
tags - Amazon S3



book

Q&A