Build a Unique Domain Hosting Environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3
Tags: amazonroute53, awswaf, amazoncloudfront, amazons3
Published: 2022-02-07 11:08:25

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

### I built a unique domain hosting environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3 :tada:  

<br>

Advance Preparation

- Upload the set of files you want to publish to Amazon S3 in advance.  
- You can leave the settings private. 
![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>

## Flow of construction

1. Register your domain name on Amazon Route 53
2. Publishing using Amazon CloudFront and Amazon S3
3. Creating an A record for Amazon CloudFront in Amazon Route 53
4. SSL certificate settings in Amazon CloudFront
5. Publishing with AWS WAF and Amazon CloudFront

<br>

## Register your domain name on Amazon Route 53

First, register your domain name with Amazon Route 53.

AWS Console → Click "Route 53.”
![img](https://day-journal.com/memo/images/amazon-route53-001_01.png)

Click "Register Domain."
![img](https://day-journal.com/memo/images/amazon-route53-001_02.png)

Search for the domain you want to purchase → click "Add to Cart" → Click "Continue."
![img](https://day-journal.com/memo/images/amazon-route53-001_03.png)

Enter each contact information → Click "Continue."
![img](https://day-journal.com/memo/images/amazon-route53-001_04.png)

After verifying your email, check the auto-renewal and terms of service. → Click "Complete your order."
![img](https://day-journal.com/memo/images/amazon-route53-001_05.png)

Click "Go to Domain."
![img](https://day-journal.com/memo/images/amazon-route53-001_06.png)

It will appear on your pending requests.
![img](https://day-journal.com/memo/images/amazon-route53-001_07.png)

After a while, when it appears in the registered domains, the purchase registration is complete.
![img](https://day-journal.com/memo/images/amazon-route53-001_08.png)

<br>

## Publishing using Amazon CloudFront and Amazon S3

Next, we will publish using a combination of Amazon CloudFront and Amazon S3.

AWS Console → Click "CloudFront.”
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_01.png)

Click "Create CloudFront Distribution.”
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_02.png)

Specify the domain of the target S3, specify the S3 bucket access, set the policy to auto-update, and set the settings to redirect to HTTPS. Set the root object to index.html in S3. Leave the rest of the settings as default.
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_03.png)

After creation, check the S3 bucket to confirm that the policy has been set automatically.
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_04.png)

Try accessing the URL of the CloudFront distribution for S3 that was created.
![img](https://day-journal.com/memo/images/amazon-cloudfront-001_05.png)

S3 is accessed via CloudFront, and the WebSite is displayed.

<br>

## Creating an A record for Amazon CloudFront in Amazon Route 53

Next, create an A record for Amazon CloudFront in Amazon Route 53. 

Click "Host Zone" → Click the target domain name.
![img](https://day-journal.com/memo/images/amazon-route53-003_01.png)

Click "Create Record."
![img](https://day-journal.com/memo/images/amazon-route53-003_02.png)

Select A record as the record type, select CloudFront as the routing destination, enter the CloudFront domain, and click "Create Record."
![img](https://day-journal.com/memo/images/amazon-route53-003_03.png)

The A record settings will be displayed.
![img](https://day-journal.com/memo/images/amazon-route53-003_04.png)

<br>

## SSL certificate settings in Amazon CloudFront

Next, configure the SSL certificate settings for Amazon CloudFront. 

Select the target distribution → Click "Edit."
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_01.png)

Click "Request Certificate."
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_02.png)

Configure the rest of the settings in AWS Certificate Manager. Select "Request a public certificate" → Click "Next."
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_03.png)

Enter the domain name to issue a certificate, select DNS validation, and click "Request."
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_04.png)

Click on the configured certificate ID.
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_05.png)

Click "Create Record with Route 53."
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_06.png)

Click "Create Record."
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_07.png)

The CNAME record settings will be displayed.
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_08.png)

Return to the target distribution. Select the domain name to issue a certificate and the issued certificate → Click "Save changes." If the certificate is not displayed, reload the browser.
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_09.png)

Confirm that the certificate has been set up.
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_10.png)

Make sure that the certificate is also in the issued status in AWS Certificate Manager.
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_11.png)

Once the configuration is complete, the WebSite will appear with its domain.
![img](https://day-journal.com/memo/images/amazon-cloudfront-005_12.png)

<br>

## Publishing with AWS WAF and Amazon CloudFront

Lastly, we will publish using a combination of AWS WAF and Amazon CloudFront.

AWS Console → Click “WAF & Shield.”
![img](https://day-journal.com/memo/images/aws-waf-001_01.png)

Click "Create web ACL.”
![img](https://day-journal.com/memo/images/aws-waf-001_02.png)

Set an arbitrary name. Select CloudFront as the resource type. Select the target CloudFront distribution. Leave the other settings as default this time.
![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)

Confirm the settings → Click “Create web ACL.”
![img](https://day-journal.com/memo/images/aws-waf-001_07.png)

Click on the Web ACL that has been created.
![img](https://day-journal.com/memo/images/aws-waf-001_08.png)

You can check the details of the Web ACL.
![img](https://day-journal.com/memo/images/aws-waf-001_09.png)

<br>

By using Amazon Route 53, Amazon CloudFront, and Amazon S3, it is possible to build a hosting environment for your own domain. It is also possible to customize settings such as request limits using AWS WAF :bulb: 

In the future, I'd like to experiment with AWS Amplify, AWS CloudFormation, AWS CDK, etc. to see how far each service configuration can be defined.

<br>

Related Articles

{% link https://dev.to/aws-builders/automate-building-a-unique-domain-hosting-environment-with-aws-cdk-1dd1 %}
{% link https://dev.to/aws-builders/automate-building-a-unique-domain-hosting-environment-with-aws-cloudformation-4ehl %}
{% link https://dev.to/aws-builders/trying-out-various-settings-for-aws-waf-publishing-5c4n %}
{% link https://dev.to/aws-builders/trying-out-various-settings-for-amazon-cloudfront-publishing-28pp %}
{% link https://dev.to/aws-builders/trying-out-various-settings-for-amazon-s3-publishing-2hd1 %}