Day 66 of 100 Days : Host Your Static Website on AWS S3 and CloudFront
Introduction
Hello, DevOps enthusiasts! 🚀 Welcome to another insightful day of learning. Today, I’ll walk you through hosting a static website using AWS S3 and CloudFront. If you’re looking for a secure, scalable, and cost-effective solution for your portfolio, blog, or documentation site, this guide has you covered. Let’s dive in!
Why Host Static Websites on AWS?
Scalability: Handle high traffic without breaking a sweat.
Security: Keep your bucket private while serving files securely.
Performance: Use CloudFront’s edge locations for lightning-fast delivery.
Cost-Effectiveness: Pay only for what you use—perfect for small projects.
Step-by-Step Guide to Hosting
1. Create and Configure an S3 Bucket
AWS S3 is your storage solution for static files.
Log in to the AWS Management Console and navigate to S3.
Click on Create Bucket and give it a unique name like
my-static-site-bucket.Once created, go to the Properties tab and enable Static Website Hosting:
Set your index document (e.g.,
index.html) and optionally, an error document (e.g.,404.html).Save the configuration.
2. Upload Website Files
Now, it’s time to add your static website files:
Drag and drop your
index.html, CSS, JS, and other files into the S3 bucket.Keep public access disabled for now (we’ll use CloudFront for secure access).
3. Test Your Bucket URL
Locate the bucket URL in the Properties section.
Open the URL in your browser. If you see a 403 Forbidden error, don’t worry—it means the bucket is private as expected.
Configure CloudFront for Global Distribution
4. Create a CloudFront Distribution
AWS CloudFront acts as a CDN (Content Delivery Network) to serve your website globally.
Go to the CloudFront service in the AWS Console.
Click Create Distribution and choose:
Origin Domain Name: Select your S3 bucket.
Enable Origin Access Identity (OAI): This allows CloudFront to access the bucket securely.
Update the bucket policy to grant OAI permissions.
5. Optimize CloudFront Settings
Redirect HTTP to HTTPS for secure connections.
Set the Default Root Object as
index.html.Optionally, configure caching and regional restrictions for better performance.
6. Deploy the Distribution
Save your changes and deploy the distribution. It may take a few minutes to propagate.
Once deployed, you’ll get a CloudFront domain name (e.g.,
example123.cloudfront.net).
Verify Your Setup
Access your CloudFront domain name in a browser to check your website.
Ensure the S3 bucket is private—accessible only through CloudFront.
Tips for Enhancing Your Website
Security Best Practices
Always use HTTPS for secure communication.
Keep public access to the S3 bucket disabled.
Cost Management
Monitor your usage to avoid unexpected charges.
Utilize CloudFront caching to reduce data transfer costs.
Advanced Enhancements
Link a custom domain via Route 53.
Add an SSL certificate for custom domain HTTPS.
Enable logging and monitoring for insights into traffic and performance.
Real-Life Example
Imagine hosting your portfolio site:
Files are securely stored in an S3 bucket.
CloudFront serves the site globally, ensuring faster load times.
HTTPS ensures secure access for your audience.
With just a few steps, your website is live, fast, and secure!
Wrapping Up
AWS S3 and CloudFront make hosting a static website straightforward, secure, and scalable. Whether for personal projects or professional use, this setup ensures performance and reliability with minimal effort.
Got questions? Drop them in the comments below! See you next time with more exciting DevOps insights. 🌟