Seamlessly Integrating AWS S3 Static Web Hosting with CloudFront and DNS Configuration: An In-Depth Guide

Introduction
In today's digital world, businesses and developers are leaning towards serverless architectures, making the most of services like Amazon S3's static web hosting combined with CloudFront's global content distribution capabilities. Together, they create a compelling platform for lightning-fast, worldwide content delivery. This article offers an in-depth exploration into configuring this powerful combination, ensuring you can set up a robust and efficient static web hosting solution on AWS.

Prerequisites
1- An AWS account with access to S3, CloudFront, and Route 53.
2- A static website hosted on an S3 bucket.
3- Basic understanding of DNS records.

Setting Up CloudFront Distribution for S3 Static Website

1. Establishing Origin Access Controls (OAC)
OAC, or Origin Access Identity, is a special CloudFront user that you can associate with your distribution. This allows the distribution to securely access the content in your S3 bucket.

Steps:
1- In the AWS Management Console, open the CloudFront console.
2- In the navigation pane, choose "Origin Access Identity".
3- Select "Create a new identity", provide a comment to help you identify it later, and save.

2. Creating the CloudFront Distribution
With the OAC set up, we now move on to create a distribution:

Steps:
1- Navigate to CloudFront service in AWS Console.
2- Click "Create Distribution".
3- In the "Origin Settings", set the origin domain name to your S3 bucket's endpoint.
4- Associate this distribution with the OAC you created in step 1.
5- Adjust any other distribution settings as needed and save.

3. Updating the S3 Bucket Policy
Your S3 bucket's policy dictates who can access its content. By configuring it properly, you ensure only your CloudFront distribution can fetch the assets.

Steps:
1- Navigate to your S3 bucket in the AWS Console.
2- Click on "Permissions" and then "Bucket Policy".
3- Enter the following policy, adjusting the "Resource" and "AWS:SourceArn" to match your specific setup:

4. Configuring DNS Records
A custom domain ensures your users access the website through a memorable address. You'll use Route 53 or your DNS provider to point your domain to CloudFront.

Steps:
1- In Route 53 or your DNS provider, create a new DNS record.
2- Set the type to CNAME.
3- Point it to the CloudFront distribution's domain name.
4- Save the changes.

5. Linking CloudFront to DNS Configuration:
After creating the DNS record, note the generated Record name.

Steps:
1- Return to the CloudFront console and locate your distribution.
2- Inside the 'General' tab, locate the 'Settings' section and click 'Edit'.
3- Navigate to "Alternate domain name (CNAME) - optional" and click 'Add Item' to input the CNAME record you previously created.

Conclusion
Amazon's S3 and CloudFront services offer a powerful and scalable solution for hosting and distributing static web content globally. By understanding and properly configuring these services, developers and businesses can unlock a world of performance and scale for their web applications. This guide provides a deep dive into each step, ensuring a smooth and efficient integration.

For more tech insights: follow and check out my latest articles on:
📘 medium: https://lnkd.in/dQ8udmiH
🔷 dev.to: https://lnkd.in/dTXX4AUa