Nuxtstop

For all things nuxt.js

Build a Unique Domain Hosting Environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3

Build a Unique Domain Hosting Environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3
14 2

img

I built a unique domain hosting environment with Amazon Route 53, AWS WAF, Amazon CloudFront, and Amazon S3 πŸŽ‰

Advance Preparation

  • Upload the set of files you want to publish to Amazon S3 in advance.
  • You can leave the settings private. img img

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

Register your domain name on Amazon Route 53

First, register your domain name with Amazon Route 53.

AWS Console β†’ Click "Route 53.”
img

Click "Register Domain."
img

Search for the domain you want to purchase β†’ click "Add to Cart" β†’ Click "Continue."
img

Enter each contact information β†’ Click "Continue."
img

After verifying your email, check the auto-renewal and terms of service. β†’ Click "Complete your order."
img

Click "Go to Domain."
img

It will appear on your pending requests.
img

After a while, when it appears in the registered domains, the purchase registration is complete.
img

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

Click "Create CloudFront Distribution.”
img

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

After creation, check the S3 bucket to confirm that the policy has been set automatically.
img

Try accessing the URL of the CloudFront distribution for S3 that was created.
img

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

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

Click "Create Record."
img

Select A record as the record type, select CloudFront as the routing destination, enter the CloudFront domain, and click "Create Record."
img

The A record settings will be displayed.
img

SSL certificate settings in Amazon CloudFront

Next, configure the SSL certificate settings for Amazon CloudFront.

Select the target distribution β†’ Click "Edit."
img

Click "Request Certificate."
img

Configure the rest of the settings in AWS Certificate Manager. Select "Request a public certificate" β†’ Click "Next."
img

Enter the domain name to issue a certificate, select DNS validation, and click "Request."
img

Click on the configured certificate ID.
img

Click "Create Record with Route 53."
img

Click "Create Record."
img

The CNAME record settings will be displayed.
img

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

Confirm that the certificate has been set up.
img

Make sure that the certificate is also in the issued status in AWS Certificate Manager.
img

Once the configuration is complete, the WebSite will appear with its domain.
img

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

Click "Create web ACL.”
img

Set an arbitrary name. Select CloudFront as the resource type. Select the target CloudFront distribution. Leave the other settings as default this time.
img
img
img
img

Confirm the settings β†’ Click β€œCreate web ACL.”
img

Click on the Web ACL that has been created.
img

You can check the details of the Web ACL.
img

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 πŸ’‘

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.

Related Articles