🚀 Deploying a Static Website on AWS using Terraform | S3 + CloudFront (Mini Project)
In this mini project, I built a complete Static Website Hosting solution on AWS using Terraform. The goal was to automate the entire infrastructure setup using Infrastructure as Code (IaC) and understand how S3 and CloudFront work together to deliver static web applications globally.
Instead of manually creating resources through the AWS Console, the complete infrastructure was defined as code, making it reusable, consistent, and easy to manage.
Architecture Overview
Internet
↓
CloudFront Distribution (Global CDN)
↓
S3 Bucket (Static Website Files)
Components Used
Amazon S3 Bucket
S3 acts as the storage layer for the static website and stores all web assets including:
HTML files
CSS files
JavaScript files
Images and other static content
Amazon CloudFront
CloudFront is AWS’s Content Delivery Network (CDN) that delivers website content from edge locations around the world.
Benefits include:
Faster website loading times
HTTPS support
Content caching
Improved availability and reliability
Project Structure
day14/
├── main.tf # Terraform resources
├── variables.tf # Input variables
├── outputs.tf # Terraform outputs
├── README.md # Project documentation
└── www/ # Website source files
├── index.html
├── style.css
└── script.js
You can See Project Code on Github: " https://github.com/Sampaatil/terraform-s3-cloudfront-static-website "
Website Preview
The website includes several interactive features:
Responsive design for desktop and mobile devices
Dark and Light mode toggle with saved user preferences
Interactive buttons and dynamic updates using JavaScript
Smooth animations and transitions
Professional AWS-themed user interface
Infrastructure Prerequisites
Before deploying the website infrastructure, a remote Terraform backend was configured using an S3 bucket for storing the Terraform state file.
This ensures:
Centralized Terraform state management
Team collaboration support
State locking capability
Better security and reliability
AWS Resources Created
| AWS Resource | Purpose |
|---|---|
| S3 Bucket | Stores static website files |
| S3 Bucket Policy | Provides public read access to website content |
| S3 Objects | Uploads HTML, CSS, and JavaScript files |
| CloudFront Distribution | Delivers website globally through CDN |
Important Terraform Concepts Practiced
S3 Static Website Hosting
Configured S3 to host a static website with proper object permissions and content delivery.
Key concepts learned:
Bucket creation and configuration
Managing public access settings
Applying bucket policies
Setting correct MIME types for different file types
CloudFront Distribution
Created a CloudFront distribution in front of the S3 bucket to improve performance and provide HTTPS access.
Configuration included:
S3 as the origin
HTTP to HTTPS redirection
Global content delivery
Caching behavior configuration
File Provisioning using Terraform for_each
Terraform's for_each feature was used to dynamically upload multiple website files to S3.
Benefits:
Avoids duplicate resource blocks
Makes configuration cleaner
Easily handles additional website files in the future
Deployment Workflow
The Terraform workflow followed:
terraform init
Initialize the working directory and download required providers.
terraform plan
Review the infrastructure changes before deployment.
terraform apply
Create AWS resources and deploy the static website.
After successful deployment, Terraform outputs the CloudFront URL:
website_url = https://your-cloudfront-domain.cloudfront.net/
Cleanup
To remove all AWS resources and avoid unnecessary charges:
terraform destroy
Key Learnings
This mini project helped me understand:
✅ Hosting static websites using Amazon S3
✅ Using CloudFront as a global CDN
✅ Managing infrastructure using Terraform
✅ Uploading website files dynamically with for_each
✅ Configuring S3 bucket policies and public access
✅ Working with MIME types for different web assets
✅ Understanding caching and content delivery concepts
Resources That Helped Me Learn
The official Terraform and AWS documentation, along with YouTube hands-on tutorials, helped me understand the concepts and complete the practical implementation of this project.
Connect With Me
LinkedIn: https://www.linkedin.com/in/devops-samarjeet/
I’ll continue documenting my hands-on journey of learning Terraform, AWS, and DevOps through practical projects and real-world implementations.
