Leveraging Amazon CloudFront with S3 and Route 53 for Subdomain Configuration

Amazon S3 and Route 53, both provided by AWS, offer a comprehensive solution for managing and deploying web content. Route 53 allows you to create alias records that direct to the website endpoint of your S3 bucket. Meanwhile, Amazon S3 is a robust service for hosting static websites. These services, when used together, provide a powerful toolset for web content management. However, there’s a key requirement when using these services together: the bucket name in S3 must be the same as the domain or subdomain hosted on Route 53. This is because when a request comes to Route 53, it redirects the request to the S3 bucket with the same name. If the bucket name doesn’t match the domain or subdomain, Route 53 will not be able to route the traffic correctly.

This requirement can pose a challenge if you want to use a different bucket name, domain, or subdomain. Reasons could include organizational naming conventions, managing multiple environments like development, staging, and production, categorizing different types of content into different buckets, or catering to users from various geographical locations with different buckets in different regions to reduce latency. A different bucket name can also add a layer of security by making it harder for malicious actors to guess your bucket name. However, there can be implications, such as the need for more complex routing rules or certain features not being available. But don’t worry, there’s a solution to this.

The process involves setting up an S3 static website, creating a CloudFront distribution that points to the S3 bucket, and configuring Route 53 to point your domain or subdomain to the CloudFront distribution. This setup allows us to have an S3 bucket name that is different from the domain or subdomain.

The Role of Amazon CloudFront

Amazon CloudFront is a content delivery network (CDN) offered by AWS. It can be used in conjunction with S3 and Route 53 to bypass the aforementioned 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.

       

1. • • 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 “A – Routes traffic to an IPV4 address and some AWS resources”
     • Enable the Alias toggle.
     • Choose endpoint: Choose “Alias to CloudFront Distribution”
     • 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 point to either an Amazon S3 bucket directly or an S3 bucket website endpoint. Here are some differences between the two:

1. S3 Bucket Directly (REST API endpoint): When you configure your CloudFront distribution to use an S3 bucket directly, it accesses the bucket using the S3 REST API endpoint. This allows you to use all S3 features, including server-side encryption and S3 Transfer Acceleration.

2. S3 Bucket Website Endpoint: When you configure your CloudFront distribution to use an S3 bucket website endpoint, it accesses the bucket using the S3 website hosting endpoint. This allows you to use S3 website hosting features. However, it does not support all S3 features.