🚀 Building an S3 Static Website with CloudFront Using Terraform

Static websites are powerful and cost-effective for hosting content. By integrating Amazon S3 and CloudFront, you can deliver static assets globally, backed by scalability and reliability. This article will guide you through creating an S3 static website and integrating it with CloudFront using the tf-aws-s3-static-website module.

🌟 Why Use CloudFront with S3?

Amazon CloudFront enhances S3 static websites by:

• HTTPS Support: Secure content delivery with SSL/TLS.
• Global Distribution: Reduced latency via edge locations worldwide.
• Custom Domains: Seamlessly integrate with Route 53 for personalized branding.
• Enhanced Caching: Improve performance and reduce costs.

Note: Ensure your Route 53 domain has been validated to avoid issues with ACM certificate validation.

🔧 Prerequisites

• AWS Account: Access to AWS services.
• Terraform Installed: Version 1.0+ is recommended.
• AWS CLI Configured: With appropriate IAM permissions.

📁 Repository Overview

The tf-aws-s3-static-website module automates the creation of an S3 bucket configured for static website hosting and integrates CloudFront for enhanced performance. This module is authored by me, and you can find more detailed documentation and examples on the Terraform Registry.

Key Features

• Creates an S3 bucket with website hosting.
• Integrates with CloudFront for CDN and HTTPS support.
• Configures Route 53 for custom domain records.
• Supports optional versioning, logging, and custom tagging.

🛠️ Setup and Configuration

Step 1: Clone the Repository

git clone https://github.com/jdevto/tf-aws-s3-static-website.git
cd tf-aws-s3-static-website

This repository contains the Terraform module for setting up an S3 static website with CloudFront integration. Follow the instructions below to configure and deploy your static site.

Step 2: Configure Variables

Modify the main.tf file. Here's a minimal working example integrating S3, CloudFront, and Route 53. Ensure to replace cdn_config.domain.name with a valid domain name you own. If you don't have a valid domain, set cdn_config.enable to false to skip CloudFront configuration:

provider "aws" {
  region = "ap-southeast-2"
}

resource "random_string" "suffix" {
  length  = 8
  special = false
  upper   = false
}

module "s3_static_website" {
  source = "tfstack/s3-static-website/aws"

  s3_config = {
    bucket_name          = "s3-static-site"
    bucket_acl           = "public-read"
    bucket_suffix        = random_string.suffix.result
    enable_force_destroy = true
    object_ownership     = "BucketOwnerPreferred"
    enable_versioning    = true
    index_document       = "index.html"
    error_document       = "error.html"
    public_access = {
      block_public_acls       = false
      block_public_policy     = false
      ignore_public_acls      = false
      restrict_public_buckets = false
    }
    source_file_path = "${path.module}/external"
  }

  cdn_config = {
    enable = true
    domain = {
      name     = "example.com"
      sub_name = "web"
    }
  }

  logging_config = {
    enable = true
  }

  tags = {
    Name = "s3-static-site-${random_string.suffix.result}"
  }
}

output "cloudfront_website_url" {
  value = module.s3_static_website.cloudfront_website_url
}

output "website_url" {
  value = module.s3_static_website.website_url
}

output "s3_website_url" {
  value = module.s3_static_website.s3_website_url
}

Step 3: Initialize Terraform

terraform init

Step 4: Apply the Configuration

terraform apply

Review the plan, confirm, and let Terraform deploy your resources.

Step 5: Access Your Website

Terraform will output:

• cloudfront_website_url: URL served via CloudFront with HTTPS.
• website_url: Dynamic URL based on Route 53 domain.
• s3_website_url: Direct S3 website URL (HTTP-only).

🎯 Key Points to Remember

1. Route 53 Validation:

   • Ensure the Route 53 domain and subdomain have been validated to avoid ACM certificate validation errors.
   • Use terraform output to confirm domain settings.

2. HTTPS Support:

   • S3 natively supports only HTTP. CloudFront adds HTTPS with ACM certificates.

3. Access Configuration:

   • Use appropriate access settings (public-access and bucket_acl) based on your use case.

💡 Conclusion

With Terraform and the tf-aws-s3-static-website module, setting up a globally distributed, secure static website has never been easier. By integrating CloudFront, you enhance your website's performance, security, and scalability.

Check out the repository, try it yourself, and let us know your thoughts in the comments! 🚀