Leveraging Amazon CloudFront with S3 and Route 53 for Subdomain Configuration

This article was written by Nestor Mayagma Jr., a web developer and member of the AWS Community Builder. He continuously strives to expand his knowledge and expertise in AWS to foster personal and professional growth. He also shares his insights with the community through numerous AWS blogs, highlighting his commitment to Cloud Computing technology.

Amazon S3 and Route 53, both integral components of AWS, offer a comprehensive solution for the management and deployment of web content. Route 53 enables the creation of alias records directing to the website endpoint of your S3 bucket. Concurrently, Amazon S3 serves as a robust platform for hosting static websites. When combined, these services form a potent toolkit for web content management. However, there's a crucial prerequisite for utilizing them in tandem: the S3 bucket name must align with the domain or subdomain hosted on Route 53. This alignment ensures that when a request reaches Route 53, it accurately redirects the traffic to the corresponding S3 bucket. Failure to match the bucket name with the domain or subdomain will result in Route 53's inability to route the traffic effectively.

Meeting this requirement can be challenging if you intend to employ a distinct bucket name, domain, or subdomain. Various reasons might prompt this decision, including adherence to organizational naming conventions, the necessity to manage multiple environments like development, staging, and production separately, the segregation of different content types into distinct buckets, or the desire to cater to users from diverse geographical locations by employing different buckets across regions to minimize latency. Opting for a different bucket name can also enhance security by introducing an additional layer of complexity, thereby making it more difficult for malicious entities to guess your bucket name. However, there are potential implications, such as the requirement for more intricate routing rules or the unavailability of certain features. Nevertheless, fret not, as there exists a solution to this challenge.

This process entails establishing an S3 static website, generating a CloudFront distribution directing to the S3 bucket, and configuring Route 53 to direct your domain or subdomain to the CloudFront distribution. With this configuration, we can utilize an S3 bucket name distinct from the domain or subdomain.

Before moving forward, make sure your S3 static website configuration is already set up. If you haven't configured your S3 static website yet, you can follow these steps to do so.

The Role of Amazon CloudFront

Amazon CloudFront, an AWS-provided content delivery network (CDN), can be used alongside S3 and Route 53 to circumvent the previously mentioned requirement.

Here’s how it works:

1. Create a CloudFront Distribution: You can create a CloudFront distribution and point it to the S3 bucket. This allows CloudFront to fetch content from your S3 bucket and deliver it to your users.

• Go to CloudFront -> Distributions -> Click the “Create Distribution” button.
• Origin domain: Click “Use website endpoint” after selecting your S3 bucket.

• Web Application Firewall (WAF): In this example, choose “Do not enable security protections”.
• Alternate domain name (CNAME): Enter the subdomain that you would like to use.

• To add an alternate domain name (CNAME) to a CloudFront distribution, ensure to attach a trusted certificate that validates your authorization to use the domain name.

• If you don’t need to change any settings, you can just stick with the default configurations.
• To create a distribution, simply click on the button labeled “Create Distribution” located at the bottom of the page.
• Note: It may take some time to create your CloudFront Distribution.

2. Create a Record Set in Route 53: In Route 53, you create a record set that points your domain or subdomain to the CloudFront distribution. This way, the S3 bucket name does not need to match the domain or subdomain.

• Go to Route53 -> Hosted zones -> YOUR_DOMAIN -> Create record
• Record name: Enter the subdomain that you would like to use (Make sure that the subdomain you have specified matches the one on the CloudFront Distribution.)
• Record type: Choose 
• Enable the Alias toggle.
• Choose endpoint: Choose 
• Choose region: Select the region that you have configured for your S3 static website.
• Choose distribution: When you click on the search box, it will automatically detect your CloudFront Distribution.
• Routing policy: Choose “Simple routing”.

• To create a record, simply click on the button labeled “Create records” located at the bottom of the page.
• Finally, verify in your browser that the newly created subdomain is properly pointing to your S3 static website.
• You can also verify your domain by visiting https://www.whatsmydns.net/

A CloudFront distribution can be configured to direct traffic either to an Amazon S3 bucket directly or to an S3 bucket website endpoint. Below are several distinctions between the two options:

1. S3 Bucket Directly (REST API endpoint): When setting up your CloudFront distribution to utilize an S3 bucket directly, it accesses the bucket via the S3 REST API endpoint. This grants you access to all S3 functionalities, such as server-side encryption and S3 Transfer Acceleration.
2. S3 Bucket Website Endpoint: When setting up your CloudFront distribution to utilize an S3 bucket website endpoint, it accesses the bucket through the S3 website hosting endpoint. This allows you to utilize S3 website hosting features. Nonetheless, it doesn't provide support for all S3 functionalities.

With CloudFront, you have the flexibility to use an S3 bucket name that differs from your domain or subdomain. However, it's crucial to highlight one key aspect: an S3 bucket configured as a website endpoint lacks SSL/TLS support. Consequently, when users connect to CloudFront, they utilize a secure HTTPS connection. Nonetheless, the connection between CloudFront and S3 occurs over HTTP. To guarantee end-to-end SSL/TLS encryption for the entire connection, including the segment between CloudFront and S3, you can designate the S3 REST API endpoint as the origin for CloudFront.

In summary, while there are specific requirements to adhere to when integrating Amazon S3 and Route 53, platforms like Amazon CloudFront provide the flexibility necessary to meet your individual requirements. This combination of services not only guarantees secure and effective content delivery but also offers a sturdy infrastructure for hosting your static website.

* This newsletter was sourced from this Tutorials Dojo article.