From Code to Cloud: Static Website Hosting Using AWS S3, CloudFront & Terraform

Introduction

In today's digital landscape, hosting static websites efficiently and securely is crucial. While there are numerous hosting solutions available, AWS S3 combined with CloudFront offers an unbeatable combination of performance, security, and cost-effectiveness. In this comprehensive guide, I'll walk you through my open-source project, Smart S3 Deploy, which automates the deployment of static websites using Infrastructure as Code (IaC).

🤷Why Smart S3 Deploy?

Traditional hosting solutions can be expensive and complex to manage. Smart S3 Deploy solves these challenges by:

• 🚀 Reducing hosting costs to just $0.87/month

• 🔒 Implementing security best practices out of the box

• ⚡ Providing global content delivery through CloudFront

• 🛠️ Automating infrastructure deployment with Terraform

Key Features

1. Secure S3 Configuration 🔒

resource "aws_s3_bucket" "website" {
  bucket = var.bucket_name

  # Enable versioning for backup and rollback
  versioning {
    enabled = true
  }

  # Enable server-side encryption
  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }
}

The S3 bucket is configured with:

• Public access blocked

• Server-side encryption enabled

• Versioning for backup and rollback

• Lifecycle rules for cost optimization

• CORS configuration for web assets

2. CloudFront Distribution 🌐

resource "aws_cloudfront_distribution" "website" {
  origin {
    domain_name = aws_s3_bucket.website.bucket_regional_domain_name
    origin_id   = "S3-${aws_s3_bucket.website.id}"

    s3_origin_config {
      origin_access_identity = aws_cloudfront_origin_access_identity.website.cloudfront_access_identity_path
    }
  }

  enabled = true
  default_root_object = "index.html"

  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "S3-${aws_s3_bucket.website.id}"

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }
}

Features include:

• Global content delivery network

• HTTPS support

• Optimized caching for different file types

• Custom error responses

• Origin Access Identity for secure S3 access

Real-world Use Cases

1. Personal Portfolio Websites

• Perfect for developers showcasing their work

• Cost-effective for personal projects

• Global reach with CloudFront

2. Documentation Sites

• Ideal for technical documentation

• Version control with S3 versioning

• Fast content delivery worldwide

3. Marketing Landing Pages

• High-performance for marketing campaigns

• Cost-effective for seasonal promotions

• Secure content delivery

Cost Breakdown

| Service | Usage Estimate | Monthly Cost |

|------------|----------------|--------------|

| S3 | 1 GB storage | ~$0.023 |

| CloudFront | 10 GB transfer | ~$0.85 |

| Total | | ~$0.87 |

Getting Started

Prerequisites

• Terraform (v1.2.0 or later)

• AWS CLI configured with appropriate credentials

• An AWS account with necessary permissions

Quick Deployment

1. Clone the repository:

git clone https://github.com/amitkumar-Github8/Smart-S3-Deployment.git
cd Smart-S3-Deployment

2. Configure AWS credentials:

aws configure

3. Customize the configuration:

    cp terraform.tfvars.example terraform.tfvars
   

4. Deploy the infrastructure:

    terraform init
    terraform plan
    terraform apply
   

   Security Best Practices

   Smart S3 Deploy implements several security measures:

   • 🔐 S3 bucket public access blocked

• 🔒 CloudFront Origin Access Identity

• 🛡️ Server-side encryption for S3 objects

• 🔒 HTTPS enforcement through CloudFront

• 🔐 Proper IAM roles and policies

Customization Options

S3 Bucket Configuration

You can customize:

• Lifecycle rules

• CORS settings

• Versioning settings

• Bucket policies

CloudFront Distribution

Modify:

• Cache behaviors

• TTL settings

• Error responses

• Additional origins

Troubleshooting Guide

Common Issues and Solutions

1. CloudFront Distribution Not Working

• Check deployment status (10-15 minutes)

• Verify S3 bucket policy

• Create cache invalidation

1. S3 Website Endpoint Not Accessible

• Use CloudFront URL instead

• Check bucket permissions

• Verify OAI configuration

Project Structure

    smart-s3-deploy/
    ├── main.tf                  # Main Terraform configuration
    ├── variables.tf             # Input variables
    ├── outputs.tf               # Output values
    ├── provider.tf              # AWS provider configuration
    ├── terraform.tfvars         # Variable values
    ├── modules/
    │   ├── s3/                  # S3 bucket module
    │   └── cloudfront/          # CloudFront module
    └── website/                 # Sample website files

Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository

1. Create your feature branch

1. Commit your changes

1. Push to the branch

1. Open a Pull Request

Conclusion

Smart S3 Deploy provides a production-ready solution for hosting static websites on AWS. It combines the power of S3 and CloudFront with the flexibility of Terraform to create a secure, scalable, and cost-effective hosting solution.

Resources

• Github Repository

• AWS S3 Docs

• CloudFront Docs

• Terraform Docs