By /

Project – Create a Highly Secure S3 Static Site with CloudFront: A Step-by-Step Guide

This project involves setting up a highly secure S3 static site with CloudFront on AWS.

You’ll learn to set up a Secure S3 Static Site with CloudFront to ensure fast content delivery, enhanced security, and HTTPS encryption. By keeping your S3 bucket private and only serving content through CloudFront, you’ll achieve maximum protection while benefiting from AWS’s global CDN performance.

Follow these steps to configure Amazon S3, AWS CloudFront, ACM SSL, and Route 53 to host your secure S3 static site with CloudFront securely. Let’s get started!

Secure S3 Static Site with CloudFront

Before you Start, Do You have the Following Installed?

Before setting up a secure S3 static site with CloudFront, ensure you have the necessary tools installed and configured. These tools will help you efficiently manage your AWS infrastructure using Infrastructure as Code (IaC) with Terraform.

Follow this checklist to prepare your environment:

NOTE: We assume you have a Route53 DNS Record to play with 🙂

✅ Install VS Code – A lightweight and powerful code editor for managing Terraform configurations. Download VS Code
✅ Install Terraform – The infrastructure-as-code tool used to define AWS resources. Download Terraform
✅ Install AWS CLI – The command-line tool for interacting with AWS services. Download AWS CLI
✅ Configure AWS CLI – Run aws configure and set up your AWS credentials.
✅ Install jq (Optional) – A command-line JSON processor for debugging AWS CLI outputs.
✅ Install Git – For version control and managing your Terraform code repositories.
✅ Set Up IAM Permissions – Ensure your AWS user has AdministratorAccess or WAFFullAccess permissions.

Step 1: Set Up a Secure S3 Bucket for Static Website Hosting

Amazon S3 provides a reliable and scalable way to store website content. However, to ensure your secure S3 static site with CloudFront, we need to:

  • 1. Create an S3 bucket to store website files.
  • 2. Enable KMS encryption to protect data at rest.
  • 3. Block public access to prevent unauthorized access.
  • 4. Apply a bucket policy to allow access only from CloudFront.
  • 5. Upload a demo `index.html` file to the bucket.

Each step is crucial to ensuring your website remains as secure as possible while still accessible through a CloudFront Distribution.

Step 1.1: Create an S3 Bucket

  • 1. Open the AWS Management Console and navigate to S3.
  • 2. Click Create bucket.
  • 3. Enter a unique bucket name (e.g., `myawesomecode-static-site`).
  • 4. Select a region close to your users to reduce latency.
  • 5. Click Create bucket.
#S3 - Create Bucket
resource "aws_s3_bucket" "static_site" {
  bucket = "myawesomecode-static-site"
}

Good to Know:

  • – S3 bucket names must be globally unique across AWS.
  • – Choosing a region close to your audience reduces latency.
  • – S3 does not provide default security, so further steps are needed.

Step 1.2: Enable KMS Encryption

To protect the data inside your S3 bucket, AWS Key Management Service (KMS) encryption should be enabled.

  • 1. Navigate to the AWS KMS Console.
  • 2. Click Create Key and select Symmetric Encryption.
  • 3. Name the key (e.g., `s3-static-encryption-key`).
  • 4. Attach an appropriate IAM policy.
  • 5. Save the KMS Key ARN for later use.
#KMS Key for Encyption of S3 Bucket Data
resource "aws_kms_key" "s3_encryption" {
  description         = "KMS key for S3 encryption"
  enable_key_rotation = true
}

#S3 - Encryption
resource "aws_s3_bucket_server_side_encryption_configuration" "s3_encryption" {
  bucket = aws_s3_bucket.static_site.id
  rule {
    apply_server_side_encryption_by_default {
      kms_master_key_id = aws_kms_key.s3_encryption.arn
      sse_algorithm     = "aws:kms"
    }
  }
}

Step 1.3: Block Public Access to the S3 Bucket

By default, S3 does not block public access. We must explicitly deny public access to maintain security.

#S3 - Block Public Access
resource "aws_s3_bucket_public_access_block" "block" {
  bucket                  = aws_s3_bucket.static_site.id
  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

 Step 1.4: Apply a Bucket Policy to Allow CloudFront Access Only

To ensure that only CloudFront can retrieve files from the bucket, we create a bucket policy that grants `s3:GetObject` permissions to CloudFront.

#S3 - Bucket Policy / Cloudfront Access
resource "aws_s3_bucket_policy" "private_access" {
  bucket = aws_s3_bucket.static_site.id
  policy = jsonencode({
    Version = "2012-10-17",
    Statement = [
      {
        Sid    = "AllowCloudFrontAccessOnly",
        Effect = "Allow",
        Principal = {
          Service = "cloudfront.amazonaws.com"
        },
        Action   = "s3:GetObject",
        Resource = "${aws_s3_bucket.static_site.arn}/*",
        Condition = {
          StringEquals = {
            "AWS:SourceArn" = aws_cloudfront_distribution.site.arn
          }
        }
      }
    ]
  })
}

Step 1.5: Upload a Demo `index.html` File

Now that our S3 bucket is secure, we will upload a simple HTML file as our demo static site.

#S3 - Create HTML File in S3 Bucket
resource "aws_s3_object" "index_html" {
  bucket       = aws_s3_bucket.static_site.id
  key          = "index.html"
  content      = "<html><body><h1>Welcome to CloudFront-secured Static Site - myawesomecode.com</h1></body></html>"
  content_type = "text/html"
}

Good to Know:

  • This `index.html` file acts as the default page of our website.
  • The CloudFront distribution will serve this file when users access the domain.
  • If you update this file later, CloudFront caching may delay changes until invalidation is requested.

At this stage, we have:

  • ✅ Created a **secure S3 bucket** for website files.
  • ✅ Enabled **KMS encryption** to protect data.
  • ✅ Blocked **all public access** for security.
  • ✅ Configured **a bucket policy** to allow CloudFront-only access.
  • ✅ Uploaded a **demo `index.html` file** as the default website page.

In the next step, we will set up **AWS Certificate Manager (ACM)** to enable **HTTPS** for your website. 🚀

Secure S3 Static Site with CloudFront Buckets

Step 2: Set Up an SSL Certificate with AWS Certificate Manager (ACM)

To ensure your secure S3 static site with CloudFront is protected with HTTPS encryption, we need an SSL certificate. AWS Certificate Manager (ACM) allows us to create a free SSL certificate and attach it to CloudFront.

Why ACM?

  • Free SSL/TLS certificates managed by AWS.
  • Automatic renewal so you never need to worry about expiration.
  • Integrated with CloudFront, making HTTPS enforcement easy.

Step 2.1: Retrieve Domain Information

Before requesting a certificate, we need to pull Route 53 information for our domain (cloudprodev.com).

#Get R53 data
data "aws_route53_zone" "myawesomecode" {
  name         = "myawesomecode.com."
  private_zone = false
}

Good to Know:

  • If your domain is not on Route 53, you must manually configure DNS validation elsewhere.
  • ACM certificates must be in us-east-1 for CloudFront to use them.
  • Ensure Route 53 is properly configured before proceeding.

Step 2.2: Request an SSL Certificate

Once we have domain information, we can request a certificate in AWS Certificate Manager (ACM).

# ACM - Create Cert
resource "aws_acm_certificate" "ssl_cert" {
  domain_name               = "myawesomecode.com"
  validation_method         = "DNS"

  subject_alternative_names = ["*.myawesomecode.com"]

  lifecycle {
    create_before_destroy = true
  }
}

Good to Know:

  • ACM certificates are free and automatically renewed.
  • DNS validation is recommended over email validation for security and automation.
  • Certificates in ACM are only valid in AWS services like CloudFront and ALB.

Step 2.3: Validate the Certificate with Route 53

Since we selected DNS validation, ACM provides a CNAME record that must be added to Route 53 for verification.

# Create a local map of unique validation options keyed by the record name.
locals {
  unique_validation_options = {
    for dvo in aws_acm_certificate.ssl_cert.domain_validation_options :
    dvo.resource_record_name => {
      name   = dvo.resource_record_name
      record = dvo.resource_record_value
      type   = dvo.resource_record_type
    }...
  }
}

# ACM - Cert Validation Record
resource "aws_route53_record" "ssl_cert_validation" {
  for_each = local.unique_validation_options

  zone_id = data.aws_route53_zone.myawesomecode.zone_id

  # Since each.value is a tuple (due to grouping duplicates),
  # we reference the first element.
  name    = each.value[0].name
  type    = each.value[0].type
  ttl     = 60
  records = [each.value[0].record]
}

# Validate the ACM certificate using the DNS records
resource "aws_acm_certificate_validation" "ssl_cert_validation" {
  certificate_arn         = aws_acm_certificate.ssl_cert.arn
  validation_record_fqdns = [
    for record in aws_route53_record.ssl_cert_validation : record.fqdn
  ]
}

Good to Know:

  • DNS records may take a few minutes to propagate before ACM recognizes them.
  • Certificates are not active until ACM validation is complete.
  • After validation, attach the certificate to CloudFront in Step 3.

At this stage, we have:

✅ Fetched Route 53 domain information.

✅ Requested an SSL certificate via ACM.

✅ Validated the certificate using Route 53 DNS records.

✅ Prepared for CloudFront HTTPS enforcement.

In the next step, we will configure CloudFront to serve content securely from S3 with the SSL certificate. 🚀

Secure S3 Static Site with CloudFront

Step 3: Configure AWS CloudFront for Secure Content Delivery

AWS CloudFront is essential for optimizing and protecting your secure S3 static site with CloudFront. It serves content securely and improves performance globally. In this step, we will:

  • Set up an Origin Access Control (OAC) to restrict S3 access to CloudFront only.
  • Create a CloudFront distribution to serve content securely.
  • Enforce HTTPS using the ACM SSL certificate.
  • Optimize cache settings for performance.

Step 3.1: Create an Origin Access Control (OAC)

To ensure that only CloudFront can access your private S3 bucket, we need to set up an Origin Access Control (OAC).

#Cloudfront - OAC
resource "aws_cloudfront_origin_access_control" "oac" {
  name                              = "myawesomecode-static-site-oac"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

Good to Know:

  • OAC is more secure than older Origin Access Identity (OAI) methods.
  • Prevents direct S3 access, ensuring requests come from CloudFront only.

Step 3.2: Create a CloudFront Distribution

Now, we configure CloudFront to serve our static site securely.

#Cloudfront Distro
resource "aws_cloudfront_distribution" "site" {
  origin {
    domain_name              = aws_s3_bucket.static_site.bucket_regional_domain_name
    origin_id                = aws_s3_bucket.static_site.id
    origin_access_control_id = aws_cloudfront_origin_access_control.oac.id
  }

  aliases = ["myawesomecode.com", "www.myawesomecode.com"]

  enabled             = true
  is_ipv6_enabled     = true
  default_root_object = "index.html"

  default_cache_behavior {
    allowed_methods        = ["GET", "HEAD"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = aws_s3_bucket.static_site.id
    viewer_protocol_policy = "redirect-to-https"
    forwarded_values {
      query_string = false
      cookies { forward = "none" }
    }
  }

  viewer_certificate {
    acm_certificate_arn      = aws_acm_certificate_validation.ssl_cert_validation.certificate_arn
    ssl_support_method       = "sni-only"
    minimum_protocol_version = "TLSv1.2_2021"
  }

  restrictions {
    geo_restriction {
      restriction_type = "whitelist"
      locations        = ["US"]
    }
  }
}

Good to Know:

  • Redirecting HTTP to HTTPS ensures secure browsing.
  • Caches static content globally, improving speed and reducing costs.
  • SNI-only SSL is cost-effective and works with most modern browsers.

Step 3.3: Optimize Cache Settings

To further enhance performance, we can configure CloudFront’s cache settings:

#Cloudfront Cache
resource "aws_cloudfront_cache_policy" "optimized_cache" {
  name        = "optimized-cache-policy"
  comment     = "Optimized caching for static site"
  default_ttl = 86400
  max_ttl     = 31536000
  min_ttl     = 3600

  parameters_in_cache_key_and_forwarded_to_origin {
    cookies_config {
      cookie_behavior = "none"
    }
    headers_config {
      header_behavior = "none"
    }
    query_strings_config {
      query_string_behavior = "none"
    }
  }
}

Good to Know:

  • Longer TTLs improve caching efficiency but require invalidation for updates.
  • Gzip & Brotli compression reduces bandwidth usage and speeds up loading.

At this stage, we have:

✅ Created an Origin Access Control (OAC) to restrict S3 access.

✅ Configured CloudFront to serve static sites securely.

✅ Enabled HTTPS enforcement with ACM SSL.

✅ Optimized caching for performance.

Next, we will configure Route 53 to link your domain to CloudFront. 🚀

Step 4: Configure Route 53 to Link Your Domain to CloudFront

Now that your secure S3 static site with CloudFront is set up, we need to ensure your domain (cloudprodev.com) correctly points to the CloudFront distribution using Route 53. This will allow visitors to access your site using a user-friendly domain name.

Step 4.1: Retrieve Hosted Zone Information

Before creating any DNS records, we need to pull Route 53 information for our domain (cloudprodev.com).

#Get R53 data
data "aws_route53_zone" "myawesomecode" {
  name         = "myawesomecode.com."
  private_zone = false
}

#NOTE - If you did this step above you can skip here...

Good to Know:

  • If your domain is not hosted on Route 53, you must manually add DNS records in your domain registrar and follow that process.
  • A hosted zone in AWS is required to manage DNS records via Route 53.

Step 4.2: Create an Alias Record for CloudFront

To route traffic from cloudprodev.com to CloudFront, we create an A (Alias) record that maps the domain to the CloudFront distribution.

#R53 - A Record
resource "aws_route53_record" "cloudfront_alias" {
  zone_id = data.aws_route53_zone.myawesomecode.zone_id
  name    = "myawesomecode.com"
  type    = "A"
  alias {
    name                   = aws_cloudfront_distribution.site.domain_name
    zone_id                = aws_cloudfront_distribution.site.hosted_zone_id
    evaluate_target_health = false
  }
}

Good to Know:

  • Alias records are preferred over CNAMEs for AWS services like CloudFront.
  • The evaluate_target_health setting should be false since CloudFront manages availability.
  • Route 53 automatically recognizes CloudFront as an alias target, ensuring efficient DNS resolution.

Step 4.3: Add a CNAME Record (Optional for Subdomains)

If you plan to use a subdomain (e.g., www.cloudprodev.com), you should create a CNAME record pointing to your CloudFront Distribution.

# Alias for www.myawesomecode.com
resource "aws_route53_record" "cloudfront_alias_www" {
  zone_id = data.aws_route53_zone.myawesomecode.zone_id
  name    = "www.myawesomecode.com"
  type    = "A"
  alias {
    name                   = aws_cloudfront_distribution.site.domain_name
    zone_id                = aws_cloudfront_distribution.site.hosted_zone_id
    evaluate_target_health = false
  }
}

Good to Know:

  • CNAME records work for subdomains but cannot be used for the root domain.
  • If using www., you should redirect it to the main domain via Route 53.

At this stage, we have:

✅ Fetched Route 53 hosted zone information.

✅ Created an alias record to link CloudFront to the domain.

✅ (Optional) Added a CNAME record for subdomains.

✅ Completed the infrastructure setup for a secure static website.

Your static site is now fully deployed, secure, and globally accessible via https://myawesomecode.com. 🚀

myawesomecode website

Conclusion

By completing this guide, you have successfully deployed a secure, scalable, and high-performance static website on AWS using S3, CloudFront, ACM, and Route 53. This setup ensures:

  • Your S3 bucket remains private, accessible only via CloudFront.
  • HTTPS encryption with ACM SSL enhances security and SEO rankings.
  • CloudFront accelerates global content delivery, improving website speed.
  • Route 53 provides reliable DNS management, making your site easily accessible.

With this infrastructure in place, your static website is now fully optimized for performance, security, and scalability. You can further enhance it by adding custom error pages, logging, monitoring with AWS CloudWatch, or automating deployments with CI/CD pipelines.

Now that your secure S3 static site with CloudFront is live, what’s next?

Consider adding more features, optimizing caching, or integrating a backend using AWS Lambda and API Gateway. 🚀

Happy Terraforming – Jason Feil

Ready for the next project?

Access More Projects

Scroll to Top