A Guide to Creating a Static Website Hosting on AWS using Terraform

Overview

In this blog, we embark on a user-friendly exploration of creating a static website hosting solution on AWS, blending simplicity with powerful tools. Amazon S3 takes center stage, offering secure and scalable storage for our website’s content. Paired with Amazon CloudFront, the global content delivery network, we optimize performance by bringing our website closer to users worldwide. Adding a touch of magic is Terraform, our trusty tool for turning infrastructure into code. This guide aims to demystify the process of making static website hosting on AWS an accessible and efficient endeavor.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Introduction

In today’s digital landscape, establishing an online presence is paramount, and the foundation of any successful website lies in its hosting infrastructure. This blog delves into the seamless orchestration of a static website hosting solution on Amazon Web Services (AWS) using a powerful combination of Amazon S3 for storage and Amazon CloudFront for content delivery. Leveraging the efficiency of Terraform, a leading infrastructure as a code tool, we embark on a journey to create a robust and scalable architecture. Whether you’re a seasoned cloud engineer or a newcomer to AWS, this guide aims to demystify the process and empower you to deploy and manage your static website effortlessly and with precision. So, let’s dive into the nuts and bolts of this seamless orchestration and discover how these tools redefine the landscape of hosting in the AWS cloud when combined.

Architecture

At the heart of our static website hosting solution on AWS lies Amazon Simple Storage Service (S3), a powerhouse in scalable and durable object storage.

The reliability and versatility that Amazon S3 brings to the table make it the ideal choice for storing our website’s static content. Complementing this robust storage solution is Amazon CloudFront, the dynamic content delivery network (CDN) service. Amazon CloudFront’s strategically placed edge locations globally enhance the performance of our web application by caching static content closer to end-users.

This dynamic duo— Amazon S3 and Amazon CloudFront—ensures high availability and low-latency access and streamlines the deployment and scaling of our static website. Let’s explore how this powerful combination, coupled with the power of Terraform, shapes the landscape of our AWS-based static website.

Creating the Terraform script

To create the static website hosting, we need to create some resources on AWS. This should be in a sequence. We need to do the following:

Create an Amazon S3 bucket and block public access
Create an Amazon CloudFront origin access control for the Amazon S3 bucket
Create an Amazon CloudFront distribution
Create an Amazon S3 bucket policy to allow access to objects from Amazon CloudFront

Step-by-Step Guide

Create an Amazon S3 bucket and block public access

variable "bucket" {
  default = {
    name = "some-website-hosting-bucket-876431"
  }
}

resource "aws_s3_bucket" "static_webiste_bucket" {
  bucket = var.bucket.name

  tags = {
    Name = var.bucket.name
  }
}

resource "aws_s3_bucket_public_access_block" "static_webiste_bucket_block_public_access" {
  bucket                  = aws_s3_bucket.static_webiste_bucket.id
  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

variable "bucket" {

default = {

name = "some-website-hosting-bucket-876431"

}

resource "aws_s3_bucket" "static_webiste_bucket" {

bucket = var.bucket.name

tags = {

Name = var.bucket.name

}

resource "aws_s3_bucket_public_access_block" "static_webiste_bucket_block_public_access" {

bucket = aws_s3_bucket.static_webiste_bucket.id

block_public_acls = true

block_public_policy = true

ignore_public_acls = true

restrict_public_buckets = true

}

Create an Amazon CloudFront origin access control for the Amazon S3 bucket

resource "aws_cloudfront_origin_access_control" "s3_oac" {
  name                              = "s3_oac"
  origin_access_control_origin_type = "s3"
  signing_behavior                  = "always"
  signing_protocol                  = "sigv4"
}

resource "aws_cloudfront_origin_access_control" "s3_oac" {

name = "s3_oac"

origin_access_control_origin_type = "s3"

signing_behavior = "always"

signing_protocol = "sigv4"

}

Create an Amazon CloudFront distribution

resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket.static_webiste_bucket.bucket_regional_domain_name
    origin_id                = "static_bucket"
    origin_access_control_id = aws_cloudfront_origin_access_control.s3_oac.id
  }

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

  default_cache_behavior {
    allowed_methods        = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "static_bucket"
    viewer_protocol_policy = "allow-all"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
    forwarded_values {
      query_string = false

      cookies {
        forward = "none"
      }
    }
  }

  price_class = "PriceClass_200"

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

  viewer_certificate {
    cloudfront_default_certificate = true
  }
}

resource "aws_cloudfront_distribution" "s3_distribution" {

origin {

domain_name = aws_s3_bucket.static_webiste_bucket.bucket_regional_domain_name

origin_id = "static_bucket"

origin_access_control_id = aws_cloudfront_origin_access_control.s3_oac.id

}

enabled = true

is_ipv6_enabled = true

default_root_object = "index.html"

default_cache_behavior {

allowed_methods = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]

cached_methods = ["GET", "HEAD"]

target_origin_id = "static_bucket"

viewer_protocol_policy = "allow-all"

min_ttl = 0

default_ttl = 3600

max_ttl = 86400

forwarded_values {

query_string = false

cookies {

forward = "none"

}

price_class = "PriceClass_200"

restrictions {

geo_restriction {

restriction_type = "whitelist"

locations = ["IN"]

}

viewer_certificate {

cloudfront_default_certificate = true

}

Create an Amazon S3 bucket policy to allow access to objects from Amazon CloudFront

resource "aws_s3_bucket_policy" "allow_s3_access_policy" {
  bucket = aws_s3_bucket.static_webiste_bucket.id
  policy = data.aws_iam_policy_document.allow_s3_access_policy_document.json
}

data "aws_iam_policy_document" "allow_s3_access_policy_document" {
  statement {
    sid = "access_s3_from_cloudfront"
    principals {
      type        = "Service"
      identifiers = ["cloudfront.amazonaws.com"]
    }
    actions   = ["s3:GetObject"]
    resources = ["${aws_s3_bucket.static_webiste_bucket.arn}/*"]
    condition {
      test     = "StringEquals"
      variable = "AWS:SourceArn"
      values   = [aws_cloudfront_distribution.s3_distribution.arn]
    }
  }
}

resource "aws_s3_bucket_policy" "allow_s3_access_policy" {

bucket = aws_s3_bucket.static_webiste_bucket.id

policy = data.aws_iam_policy_document.allow_s3_access_policy_document.json

}

data "aws_iam_policy_document" "allow_s3_access_policy_document" {

statement {

sid = "access_s3_from_cloudfront"

principals {

type = "Service"

identifiers = ["cloudfront.amazonaws.com"]

}

actions = ["s3:GetObject"]

resources = ["${aws_s3_bucket.static_webiste_bucket.arn}/*"]

condition {

test = "StringEquals"

variable = "AWS:SourceArn"

values = [aws_cloudfront_distribution.s3_distribution.arn]

}

If you want to view the full working code, please visit this GitHub link.

Note: After running the Terraform script successfully, put a file named “index.html” in your Amazon S3 bucket. This will be your default home page for the static website.

Conclusion

In wrapping up, our adventure in making a static website on AWS was like putting together puzzle pieces for a smooth online experience. Amazon S3 securely held our website’s stuff, while Amazon CloudFront made it load faster for people worldwide. Using Terraform was like having a magic wand that made everything fall into place. As a Cloud Engineer with GCP and AWS badges, you’ve shown how to make tech work effortlessly. So, as you step into the world of AWS hosting, it may be easy and scalable and take your online presence to new levels.

Drop a query if you have any questions regarding Amazon S3 or Amazon CloudFront and we will get back to you quickly.

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, Microsoft Gold Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, and many more.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.

FAQs

1. Why choose AWS for hosting a static website?

ANS: – AWS provides a robust infrastructure with services like Amazon S3 and Amazon CloudFront, offering scalability, reliability, and a global reach for your static website.

2. How does Amazon CloudFront improve website performance?

ANS: – Amazon CloudFront is a content delivery network (CDN) that caches static content at edge locations globally. This reduces latency and accelerates content delivery to users, enhancing the overall performance of your website.

WRITTEN BY Avinash Kumar

Avinash Kumar is a Senior Research Associate at CloudThat, specializing in Cloud Engineering, NodeJS development, and Google Cloud Platform. With his skills, he creates innovative solutions that meet the complex needs of today's digital landscape. He's dedicated to staying at the forefront of emerging cloud technologies.