DEV Community

Cover image for Build a Website Using S3 and CloudFront with Terraform
Shreya Nalawade
Shreya Nalawade

Posted on

Build a Website Using S3 and CloudFront with Terraform

#programming #tutorial #aws #networking

Introduction

Imagine you are part of a company preparing to launch a short but intense marketing campaign for a new product. Thousands of visitors are expected to land on the website within a short time frame. Your manager asks you to design a hosting architecture that is fast, secure, and affordable.

In this guide, we focus on the infrastructure design rather than the website content itself. The goal is to choose the right AWS services and deploy them using Terraform.

Key Requirements

Before selecting any technology, we must understand the constraints:

  • The campaign will only run for a limited time.
  • Traffic volume is unpredictable, but could reach thousands of users per day.
  • Protection against DoS and DDoS attacks is critical.
  • The solution must remain cost-effective.
  • Users should experience fast load times regardless of their geographic location.

Choosing the Hosting Platform

To satisfy global reach and performance, AWS provides two ideal services:

  • Amazon S3 for storing and serving static website files
  • AWS CloudFront as a global content delivery network (CDN)

Together, these services create a scalable and highly available solution.

Architecture Diagram

Image1description

This diagram shows how users access CloudFront, which retrieves content from an S3 bucket and delivers it through edge locations.

Why Terraform?

Terraform allows infrastructure to be defined in code and deployed automatically.

Using Terraform ensures that infrastructure is:

  • Reproducible
  • Version-controlled
  • Easy to audit and modify

Instead of repeatedly configuring resources in the AWS Console, we write declarative code and deploy everything with simple CLI commands.

Terraform Template Example 

resource "random_string" "bucket_rs" {
  count   = var.s3_count
  length  = 4
  special = false
  upper   = false
}

resource "aws_s3_bucket" "exos_bucket" {
  count  = var.s3_count
  bucket = join("-", ["exos-bucket", random_string.bucket_rs[count.index].result])
  acl    = "public-read-write"
}

resource "aws_cloudfront_distribution" "exos_distribution" {
  count = var.s3_count

  origin {
    domain_name = aws_s3_bucket.exos_bucket[count.index].bucket_regional_domain_name
    origin_id   = "exos_distribution"

    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "match-viewer"
      origin_ssl_protocols   = ["TLSv1", "TLSv1.1", "TLSv1.2"]
    }
  }

  enabled             = true
  default_root_object = "index.html"

  default_cache_behavior {
    viewer_protocol_policy = "redirect-to-https"
    compress               = true
    allowed_methods        = ["GET", "HEAD", "OPTIONS", "PUT", "POST", "PATCH", "DELETE"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "exos_distribution"

    min_ttl     = 0
    default_ttl = 86400
    max_ttl     = 31536000

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

  price_class = "PriceClass_All"

  restrictions {
    geo_restriction {
      restriction_type = "whitelist"
      locations        = ["US", "CA", "GB", "DE"]
    }
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }
}
Enter fullscreen mode Exit fullscreen mode

Understanding CloudFront

AWS CloudFront is a content delivery service that caches and distributes data from locations close to end users.

CloudFront improves performance by delivering:

  • Images
  • Videos
  • Static files (HTML, CSS, JS)

from global edge locations instead of a single origin server.

Built-in Security Features

  • Automatic DDoS mitigation
  • Support for Origin Access Identity (OAI)
  • Country-based access controls (geo-restriction)

This makes CloudFront both a performance and security layer in front of S3.

Understanding Amazon S3

Amazon S3 is an object storage service designed for durability and massive scale.

S3 can also function as a static website host by serving files such as:

  • HTML
  • CSS
  • JavaScript

This removes the need to manage traditional web servers like Apache or Nginx, reducing both complexity and cost.

Why S3 + CloudFront?

When a user accesses your website:

  1. The request goes to CloudFront.
  2. CloudFront checks its cache.
  3. If content is missing, it fetches it from S3.
  4. The content is cached and delivered to the user.

Benefits

  • Fast global CDN delivery
  • Low-cost storage
  • Free data transfer from S3 to CloudFront
  • Strong built-in security

Step-by-Step Implementation

Step 1: Install Terraform 

terraform -v
terraform init
Enter fullscreen mode Exit fullscreen mode

Step 4: Validate Configuration

terraform validate
Enter fullscreen mode Exit fullscreen mode

Step 5: Deploy Infrastructure

terraform apply
Enter fullscreen mode Exit fullscreen mode

Step 6: Upload Website Files

aws s3 sync ./website s3://your-bucket-name
Enter fullscreen mode Exit fullscreen mode

Step 7: Access via CloudFront

https://<distribution-id>.cloudfront.net
Enter fullscreen mode Exit fullscreen mode

Conclusion

Amazon S3 and CloudFront work together to provide a powerful platform for hosting static websites. This combination delivers:

  • Global performance
  • Built-in security
  • Low operational cost

The architecture can be further improved by integrating:

  • AWS WAF
  • AWS Shield
  • Amazon Route53

Terraform makes it easy to deploy, destroy, and reproduce this environment across multiple stages such as development, testing, and production.

Top comments (0)