Deploying Static Websites with AWS CloudFront and S3

When it comes to hosting static websites, AWS offers a powerful combination of S3 and CloudFront that can significantly improve performance while keeping costs low. In this guide, I'll walk you through setting up a production-ready static website using CloudFront as a CDN in front of S3.

Why CloudFront + S3?

Before diving into the implementation, let's understand why this setup is beneficial:

• Global Performance: CloudFront caches your content at edge locations worldwide, reducing latency for users regardless of their location
• Cost Efficiency: S3 storage is cheap, and CloudFront data transfer costs are often lower than direct S3 access
• Security: You can keep your S3 bucket private while serving content publicly through CloudFront
• SSL/TLS: Easy HTTPS implementation with AWS Certificate Manager

Prerequisites

You'll need:

• An AWS account
• A domain name (optional but recommended)
• Your static website files (HTML, CSS, JS, images, etc.)

Step 1: Setting Up Your S3 Bucket

Have a look at my previous article to serve a website with S3 and skip Step 4.

Step 2: Create a CloudFront Distribution

Now let's set up CloudFront to serve your content:

1. Go to the CloudFront console
2. Click "Create distribution"
3. For "Origin domain", select your S3 bucket
4. Important: Click "Use website endpoint" - this ensures proper routing for SPA applications. In order to use it, your bucket must be public
5. Keep default settings for other options
6. Click "Create distribution"

The distribution will take a few minutes to deploy. Once ready, you can find the CloudFront URL in General > Details > Distribution domain name. You can test it to see if the website content is accessible from it.

Step 3: Custom Domain Setup (Optional)

To use your own domain:

1. Configure DNS:

• In Route 53, create an A record pointing to your CloudFront distribution
• Create another A record for www pointing to the same distribution

1. Create SSL Certificate:

• Go to AWS Certificate Manager (ACM)
• Request a certificate for yourdomain.com and www.yourdomain.com
• Use DNS validation as validation method

1. Update CloudFront Distribution:

• Go to your Cloudfront distribution settings
• Click on "General" and then under the "Settings" section click on "Edit"
• Set the domain specified your ACM certificate (yourdomain.com) in Alternate domain name (CNAME)
• Select the ACM certificate
• Save

1. Redirect traffic from HTTP to HTTPS:

• Click on "Behaviours" from Cloudfront distribution settings
• Select the behaviour and edit it
• Set Viewer protocol policy to Redirect HTTP to HTTPS
• Save

Step 4: Cache Management

CloudFront caches your content, so updates won't appear immediately if the content has already been served before and didn't expire. To invalidate the cache:

1. Go to your CloudFront distribution
2. Click "Invalidations" tab
3. Create invalidation with path /*
4. Wait for completion (just a few minutes)

Advanced: Private S3 Bucket Setup

I've written another tutorial on how to set up this architecture with a private bucket. Go have a read if you're interested. Otherwise, you can directly have a look at the full guide which includes all the steps starting from S3 bucket creation

Cost Considerations

While this setup is cost-effective, be mindful of:

• CloudFront data transfer costs (though often cheaper than direct S3)
• Cache invalidation costs ($0.005 per invalidation path)
• SSL certificate costs (free with ACM)

Troubleshooting Common Issues

Website not loading: Check bucket permissions and CloudFront origin settings
HTTPS errors: Verify SSL certificate is properly attached to CloudFront
Cache issues: Create cache invalidation and wait for completion
Routing problems: Ensure you're using the S3 website endpoint, not the bucket endpoint

Conclusion

This CloudFront + S3 setup provides a robust, scalable solution for hosting static websites. The combination offers excellent performance, security, and cost-effectiveness for most use cases.

For a more comprehensive guide covering advanced scenarios like private buckets, check out this complete AWS static website deployment guide.

The real power of this setup is its simplicity. Once configured, it requires minimal maintenance while providing production-ready stability and low latency