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

![img](https://day-journal.com/memo/images/try-081_01.png)

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

<br>

事前準備

- 事前にAmazon S3に公開したいファイル一式をアップロード  
- 設定は非公開のままでOK  
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_07.png)
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_08.png)

<br>

## 構築の流れ

1. [Amazon Route 53で独自ドメイン購入登録](https://qiita.com/dayjournal/items/945613577b3056ec4f71#amazon-route-53%E3%81%A7%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E8%B3%BC%E5%85%A5%E7%99%BB%E9%8C%B2)
2. [Amazon CloudFrontとAmazon S3を組み合わせた公開](https://qiita.com/dayjournal/items/945613577b3056ec4f71#amazon-cloudfront%E3%81%A8amazon-s3%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%9F%E5%85%AC%E9%96%8B)
3. [Amazon Route 53でAmazon CloudFront用Aレコード作成](https://qiita.com/dayjournal/items/945613577b3056ec4f71#amazon-route-53%E3%81%A7amazon-cloudfront%E7%94%A8a%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%BD%9C%E6%88%90)
4. [Amazon CloudFrontでSSL証明書設定](https://qiita.com/dayjournal/items/945613577b3056ec4f71#amazon-cloudfront%E3%81%A7ssl%E8%A8%BC%E6%98%8E%E6%9B%B8%E8%A8%AD%E5%AE%9A)
5. [AWS WAFとAmazon CloudFrontを組み合わせた公開](https://qiita.com/dayjournal/items/945613577b3056ec4f71#aws-waf%E3%81%A8amazon-cloudfront%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%9F%E5%85%AC%E9%96%8B)

<br>

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

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

AWSコンソール → Route 53をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-001_01.png)

「ドメインの登録」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-001_02.png)

購入したいドメインを検索 → 「カートに入れる」をクリック → 「続行」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-001_03.png)

各連絡先を入力 → 「続行」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-001_04.png)

メール認証後に自動更新と利用規約を確認 → 「注文を完了」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-001_05.png)

「ドメインに移動」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-001_06.png)

保留中のリクエストに表示される。
![img](https://day-journal.com/memo/images/amazon-route53-001_07.png)

しばらくして登録済みドメインに表示されたら購入登録完了。
![img](https://day-journal.com/memo/images/amazon-route53-001_08.png)

<br>

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

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

AWSコンソール → CloudFrontをクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_01.png)

「CloudFrontディストリビューションを作成」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_02.png)

対象のS3のドメインを指定。S3のバケットアクセスを指定しポリシーは自動更新に設定。httpsにリダイレクトする設定。ルートオブジェクトにS3のindex.htmlを設定。その他は今回はデフォルトのまま設定。
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_03.png)

作成後、S3のバケットを確認するとポリシーが自動で設定されているのを確認。
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_04.png)

作成されたCloudFrontのS3用のディストリビューションのURLにアクセスしてみる。
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_05.png)

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

<br>

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

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

「ホストゾーン」 → 対象ドメイン名をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-003_01.png)

「レコードを作成」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-003_02.png)

レコードタイプをAレコード選択・ルーティング先をCloudFront選択・CloudFrontのドメイン入力 → 「レコードを作成」をクリック。
![img](https://day-journal.com/memo/images/amazon-route53-003_03.png)

Aレコードの設定が表示されます。
![img](https://day-journal.com/memo/images/amazon-route53-003_04.png)

<br>

## Amazon CloudFrontでSSL証明書設定

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

対象のディストリビューションを選択 → 「編集」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_01.png)

「証明書をリクエスト」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_02.png)

AWS Certificate Managerで続きを設定します。「パブリック証明書をリクエスト」を選択 → 「次へ」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_03.png)

証明書を発行したいドメイン名を入力・DNS検証を選択 → 「リクエスト」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_04.png)

設定された証明書IDをクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_05.png)

「Route 53でレコードを作成」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_06.png)

「レコードを作成」をクリック。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_07.png)

CNAMEレコードの設定が表示されます。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_08.png)

対象のディストリビューションに戻ります。証明書を発行したいドメイン名・発行した証明書を選択 → 「変更を保存」をクリック。証明書が表示されない場合はブラウザリロード。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_09.png)

証明書が設定されているのを確認。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_10.png)

AWS Certificate Managerでも発行済ステータスになっているか確認。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_11.png)

設定が完了すると独自ドメインでWebSiteが表示されます。
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_12.png)

<br>

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

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

AWSコンソール → WAF & Shieldをクリック。
![img](https://day-journal.com/memo/images/aws-waf-001_01.png)

「Create web ACL」をクリック。
![img](https://day-journal.com/memo/images/aws-waf-001_02.png)

任意名称を設定。リソースタイプにCloudFrontを選択。対象のCloudFrontディストリビューションを選択。その他は今回はデフォルトのまま設定。
![img](https://day-journal.com/memo/images/aws-waf-001_03.png)
![img](https://day-journal.com/memo/images/aws-waf-001_04.png)
![img](https://day-journal.com/memo/images/aws-waf-001_05.png)
![img](https://day-journal.com/memo/images/aws-waf-001_06.png)

内容を確認し「Create web ACL」をクリック。
![img](https://day-journal.com/memo/images/aws-waf-001_07.png)

作成されたWeb ACLをクリック。
![img](https://day-journal.com/memo/images/aws-waf-001_08.png)

Web ACLの詳細を確認できます。
![img](https://day-journal.com/memo/images/aws-waf-001_09.png)

<br>

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

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

<br>

Amazon Route 53とAWS WAFとAmazon CloudFrontとAmazon S3について、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://day-journal.com/memo/tags/Amazon-Route-53" target="_blank">tags - Amazon Route 53</a>
<a href="https://day-journal.com/memo/tags/AWS-WAF" target="_blank">tags - AWS WAF</a>
<a href="https://day-journal.com/memo/tags/Amazon-CloudFront" target="_blank">tags - Amazon CloudFront</a>
<a href="https://day-journal.com/memo/tags/Amazon-S3" target="_blank">tags - Amazon S3</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

https://qiita.com/dayjournal/items/47ec90a12447dc458cca

https://qiita.com/dayjournal/items/7989da7374050c5d09b1

https://qiita.com/dayjournal/items/c827a17917127bff3906

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>