LoginSignup
7
3

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-02-06

img

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


事前準備

  • 事前に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証明書を設定します。

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

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

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

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

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

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

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

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

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

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

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

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


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でリクエスト制限等のカスタマイズをすることも可能です :bulb:

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


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

やってみたシリーズ :grinning:
tags - Try




book

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3