Deploying a Static Website with S3 and CloudFront: A Simple and Scalable Solution

When it comes to hosting static websites, Amazon Web Services (AWS) provides an excellent combination of S3 and CloudFront to deliver fast, secure, and scalable content. Whether you're launching a personal portfolio, a blog, or any other static content, AWS offers an ideal solution for high-performance delivery across the globe. In this article, I'll guide you through deploying a static website using S3 and CloudFront.

Architecture Overview

The architecture follows a simple flow:

Diagram Flow:

👤 User (Client Browser) → 🌐 Internet (Request via CloudFront URL) → 🚀 CloudFront (CDN for Fast Delivery) → 📦 S3 Bucket (Stores Website Files) → 🔒 IAM (Access Control) → 📤 CloudFront Delivers Content

Key Security Requirement:

• The S3 bucket should not be directly accessible from the internet. Instead, access should be restricted to CloudFront only.

Step 1: Set Up S3 Bucket

1. Go to the AWS S3 Console and create a new S3 bucket.
2. Ensure the bucket name is globally unique.
3. Disable public access to the bucket by keeping the default settings.
4. Upload your static website files (HTML, CSS, JavaScript, images, etc.).
5. Do not enable Static Website Hosting as CloudFront will serve the content.

Step 2: Configure IAM for Secure Access

To restrict direct access to the S3 bucket:

1. Go to AWS IAM and create an IAM policy.
2. Use the following policy generated by AWS= to allow CloudFront to access your S3 bucket:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": {
                   "Service": "cloudfront.amazonaws.com"
               },
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::your-bucket-name/*",
               "Condition": {
                   "StringEquals": {
                       "AWS:SourceArn": "arn:aws:cloudfront::your-account-id:distribution/your-distribution-id"
                   }
               }
           }
       ]
   }

1. Attach this policy to your S3 bucket.

Step 3: Set Up CloudFront Distribution

1. Go to AWS CloudFront Console and create a new CloudFront distribution.
2. Select S3 bucket as the origin and configure it:
   • Origin Access Control (OAC): Enable OAC to restrict access to the S3 bucket.
   • Restrict Bucket Access: Yes.
   • Bucket Policy: Update to allow CloudFront access only.
3. Configure settings for performance and security:
   • Enable caching to improve performance.
   • Enable HTTPS for secure content delivery.
   • Restrict viewer access if required.
4. Deploy the CloudFront distribution and note the CloudFront domain name.

Step 4: Test Your Website

1. Wait for CloudFront to propagate (can take up to 7-15 minutes).
2. Visit your CloudFront URL (https://your-cloudfront-url.cloudfront.net).
3. Verify that the website loads correctly and that direct access to the S3 bucket URL is denied.

Why This Setup Works

• Security: Direct S3 access is blocked, ensuring only CloudFront serves your content.
• Performance: CloudFront caches content at edge locations, reducing latency.
• Scalability: AWS handles traffic spikes without additional configuration.
• Cost-Effective: S3 storage and CloudFront’s pay-as-you-go pricing keep costs low.

Final Thoughts

Deploying a static website using S3 and CloudFront is an efficient, scalable, and secure way to ensure fast delivery of your content worldwide. By combining the reliability of S3 for storage with CloudFront’s global CDN capabilities, you can achieve superior performance for your static website with minimal effort. Whether you're just starting or refining your deployment process, AWS provides a powerful and cost-effective solution.

Have you deployed a static website using AWS? Share your thoughts and experiences in the comments!

Comments

[Anne Usang]

Great!
Welldone, Ella