Production-Ready Static Website Hosting on AWS (S3 + CloudFront)

📌 Project Overview

• This project demonstrates how to host a secure and scalable static website on AWS using Amazon S3 and Amazon CloudFront.

• The website files are stored in a private S3 bucket, and Amazon CloudFront delivers the content globally using its CDN and default SSL certificate.

• To improve security, Origin Access Control (OAC) is used so that the S3 bucket cannot be accessed directly from the internet. Only CloudFront can retrieve the website content.

• This architecture follows AWS best practices for static website hosting.

---

📂 Project Structure

aws-s3-cloudfront-static-website
│
├── architecture
│   └── architecture-diagram.png
│
├── website-build
│   ├── index.html
│   └── assets
│
├── screenshots
│   ├── s3-bucket-overview.png
│   ├── s3-public-access-block.png
│   ├── cloudfront-distribution.png
│   └── website-live.png
│
└── README.md

---

🏗 Architecture

• This project demonstrates a secure and scalable static website hosting architecture on AWS.

• User requests are first routed through Amazon CloudFront, which acts as a global Content Delivery Network (CDN). CloudFront caches the website content at edge locations, improving performance and reducing latency.

• The origin for CloudFront is an Amazon S3 bucket that stores the static website files.

• To enhance security, the S3 bucket is kept private and public access is blocked. CloudFront accesses the bucket using Origin Access Control (OAC), ensuring that the content cannot be accessed directly from S3.

• All user requests are served over HTTPS using CloudFront's default SSL certificate.

Architecture Flow:

• User Browser → Amazon CloudFront → Origin Access Control (OAC) → Amazon S3 (Private Bucket)

---

🧱 Architecture Components

1️⃣ User Browser

The user accesses the website using a browser. Requests are sent over HTTPS.

2️⃣ Amazon CloudFront

Amazon CloudFront acts as a Content Delivery Network (CDN) and distributes the website globally through edge locations.

Key responsibilities:

• HTTPS delivery using CloudFront default SSL certificate
• Content caching for faster performance
• Secure access to S3 using Origin Access Control (OAC)

3️⃣ Origin Access Control (OAC)

OAC ensures that only CloudFront can access the S3 bucket.

Benefits:

• Prevents direct public access to the bucket
• Improves security
• Follows AWS best practices

4️⃣ Amazon S3 (Private Bucket)

The S3 bucket stores the static website files.

Features:

• Public access blocked
• Private storage
• Only accessible through CloudFront

---

📸 Screenshots

S3 Bucket Configuration

S3 Public Access Block

CloudFront Distribution

Website Live via CloudFront

---

🔐 Security Best Practices Implemented

✔ S3 bucket kept private

✔ Public access blocked on S3

✔ Access controlled using Origin Access Control (OAC)

✔ HTTPS enforced using CloudFront default SSL certificate

---

💰 Cost Consideration

This project stays within the AWS Free Tier for most usage scenarios.

Typical costs (very low for small projects):

• S3 storage
• CloudFront requests
• Data transfer

For learning projects, costs are usually a few cents or completely free.

---

📈 Future Improvements

Possible enhancements:

• Custom domain with Route53
• SSL certificate using AWS Certificate Manager
• CI/CD deployment using GitHub Actions
• Infrastructure as Code using Terraform or AWS CDK
• Web Application Firewall (AWS WAF)

---

🧠 Key Learnings

Through this project I learned:

• Hosting static websites on AWS
• Using Amazon CloudFront for global CDN delivery
• Securing S3 buckets with Origin Access Control
• Configuring HTTPS and routing for static applications

---

🏁 Conclusion

This project demonstrates a secure and production-ready architecture for static website hosting on AWS using S3 and CloudFront.

The solution ensures:

• High performance through CDN
• Secure access to storage
• Scalable static website delivery