Hosting Static Websites with S3 and CloudFront using Terraform

Understanding Static Websites

A static website, serving fixed content like HTML, CSS, and images, offers speed, cost-effectiveness, scalability, and security when properly configured. AWS leverages Amazon S3 and CloudFront to excel in static website hosting.

This lesson details how to deploy a static website using AWS services and Terraform, highlighting the importance of infrastructure as code for managing these resources. A common challenge faced during deployment is account-level restrictions, such as limitations on creating CloudFront distributions, which underscores the need to verify permissions and account limits before starting.

Key Insights

• S3 Object Storage: S3 stores data as objects, accessed by unique keys, offering global durability with regional hosting.
• CDN Benefits: Content Delivery Networks (CDNs) like CloudFront cache content at edge locations, reducing latency and improving user experience.
• Terraform for IaC: Terraform allows for declarative management of infrastructure, ensuring consistency and repeatability in deployments.

Working Example

resource "aws_s3_bucket" "firstbucket" {
  bucket = var.bucket_name
}

resource "aws_s3_bucket_public_access_block" "block" {
  bucket = aws_s3_bucket.firstbucket.id
  block_public_acls = true
  block_public_policy = true
  ignore_public_acls = true
  restrict_public_buckets = true
}

resource "aws_s3_object" "object" {
  for_each = fileset("${path.module}/www", "**/*")
  bucket = aws_s3_bucket.firstbucket.id
  key = each.value
  source = "${path.module}/www/${each.value}"
  etag = filemd5("${path.module}/www/${each.value}")
  content_type = lookup({
    "html" = "text/html",
    "css" = "text/css",
    "js" = "application/javascript",
    "json" = "application/json",
    "png" = "image/png",
    "jpg" = "image/jpeg",
    "svg" = "image/svg+xml"
  }, split(".", each.value)[length(split(".", each.value)) - 1], "application/octet-stream")
}

resource "aws_cloudfront_origin_access_control" "origin_access_control" {
  name = "demo-oac"
  origin_access_control_origin_type = "s3"
  signing_behavior = "always"
  signing_protocol = "sigv4"
}

resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name = aws_s3_bucket.firstbucket.bucket_regional_domain_name
    origin_access_control_id = aws_cloudfront_origin_access_control.origin_access_control.id
    origin_id = local.origin_id
  }
  enabled = true
  default_root_object = "index.html"
  default_cache_behavior {
    allowed_methods = ["GET", "HEAD"]
    cached_methods = ["GET", "HEAD"]
    target_origin_id = local.origin_id
    viewer_protocol_policy = "redirect-to-https"
  }
  viewer_certificate {
    cloudfront_default_certificate = true
  }
}

resource "aws_s3_bucket_policy" "allow_cf" {
  bucket = aws_s3_bucket.firstbucket.id
  policy = jsonencode({
    Statement = [{
      Effect = "Allow"
      Principal = { Service = "cloudfront.amazonaws.com" }
      Action = "s3:GetObject"
      Resource = "${aws_s3_bucket.firstbucket.arn}/*"
    }]
  })
}

Practical Applications

• Marketing Websites: Companies like Netflix use CDNs (similar to CloudFront) to deliver static marketing assets quickly and reliably to global audiences.
• Pitfall: Failing to configure S3 bucket policies correctly can lead to data breaches and unauthorized access to website content.

References:

• https://dev.to/alafiz/day-14-of-30daysofawsterraform-hosting-a-static-website-with-s3-and-cloudfront-4i7a