Launch Your Static Website on AWS S3: A Beginner's Guide to High Availability and CDN

Create the S3 bucket and configure it to host an static website

This part is a little bit longer because it requires the creation of several resources:

               
#S3 encryption is not required due the data on this bucket is publicly accessible
# tfsec:ignore:avd-aws-0088 tfsec:ignore:avd-aws-0089 tfsec:ignore:avd-aws-0090 tfsec:ignore:avd-aws-0132 tfsec:ignore:avd-aws-0320
resource "aws_s3_bucket" "website_bucket" {
   bucket = local.bucket_name
}
resource "aws_s3_bucket_public_access_block" "website_bucket_acl" {
   bucket                  = aws_s3_bucket.website_bucket.id
   block_public_acls       = true
   block_public_policy     = true
   ignore_public_acls      = true
   restrict_public_buckets = true
}

resource "aws_s3_bucket_website_configuration" "website_bucket_website_configuration" {
   bucket = aws_s3_bucket.website_bucket.bucket

   index_document {
      suffix = "index.html"
   }

   error_document {
      key = "index.html"
   }
}

data "aws_iam_policy_document" "website_bucket_policy_document" {
   statement {
      sid    = "AllowCloudFrontServicePrincipal"
      effect = "Allow"
      principals {
      type        = "Service"
      identifiers = ["cloudfront.amazonaws.com"]
      }
      actions   = ["s3:GetObject"]
      resources = [aws_s3_bucket.website_bucket.arn, "${aws_s3_bucket.website_bucket.arn}/*"]
      condition {
      test     = "StringEquals"
      variable = "AWS:SourceArn"
      values   = [aws_cloudfront_distribution.this.arn]
      }
   }
   statement {
      sid    = "AllowCloudFrontOriginAccessIdentity"
      effect = "Allow"
      principals {
      type        = "AWS"
      identifiers = [aws_cloudfront_origin_access_identity.origin_access_identity.iam_arn]
      }
      actions   = ["s3:GetObject"]
      resources = [aws_s3_bucket.website_bucket.arn, "${aws_s3_bucket.website_bucket.arn}/*"]
   }
}
resource "aws_s3_bucket_policy" "website_bucket_policy" {
   bucket = aws_s3_bucket.website_bucket.id
   policy = data.aws_iam_policy_document.website_bucket_policy_document.json
}


/*UPLOADING EXAMPLE WEBSITE*/
# this is not the ideal way to deploy code into S3. This was created to show how the static site will work
resource "aws_s3_object" "dist" {
   for_each     = fileset("./example-website-code", "**")
   bucket       = aws_s3_bucket.website_bucket.id
   key          = each.value
   source       = "./example-website-code/${each.value}"
   content_type = lookup(local.content_type_map, reverse(split(".", "./example-website-code/${each.value}"))[0], "text/html")
   # update files when they changes
   etag = filemd5("./example-website-code/${each.value}")
}                  
               
            

aws_s3_bucket

This terraform resource will create the bucket that will server our static website

aws_s3_bucket_public_access_block

Here we're going to define basic security policies to prevent the bucket's content is exposed directly to internet. We will be using a CDN for that puprose

aws_s3_bucket_website_configuration

In this resource we tell AWS that the content of the S3 bucket is a website, and the entry point is index.html. And the error is the same page (later you can create an specific page for that)

aws_iam_policy_document

In this data block we're going to define the S3 bucket policy to allow access to Cloudfront to pull the files to its cache servers

aws_s3_bucket_policy

This assigns the data we created previously to our S3 bucket

aws_s3_object

Here we upload the html site to the S3 bucket. This is not the best approach to deploy the static website, in a future tutorial we will explain how to deploy the site using a CI/CD pipeline.
The basic opperation here is to recursively iterate on the folder example-website-code to upload each file specifying its content type.

The file locals.tf has other variables that won't be changed to often.
It defines the bucket name and creates a map that is used by aws_s3_object to set the right content content_type:

                  
locals {
   content_type_map = {
      "js"   = "application/json"
      "html" = "text/html"
      "css"  = "text/css"
   }
   bucket_name = "my-site.stoneitcloud.com"
}                      
                  

               

The functioning of the map is self explainatory. When terraform finds a file ending on js it assigns the content type application/json, when it finds a file with extension html it assings the content type text/html, and for css files it assings the content type text/css

You can add other extensions and content type declaration to cover the case of images, videos and other assets.

Setting up the CDN with Cloudfront

AWS CloudFront is a Content Delivery Network (CDN) service provided by Amazon Web Services. A CDN is a globally distributed network of servers that helps deliver content to users with high performance and low latency.

When a user requests content from a website or application, the CDN serves the content from the server that is geographically closest to the user. This reduces the distance the content needs to travel, resulting in faster load times and improved user experience.

CDNs like AWS CloudFront work by caching content in multiple edge locations around the world. These edge locations act as points of presence (PoPs) and store copies of the content. When a user requests the content, the CDN routes the request to the nearest edge location, which then delivers the cached content to the user.

By using AWS CloudFront, content providers can ensure that their content is delivered quickly and reliably to users around the world, regardless of their geographical location.

Let's create the Cloudfront distribution by creating the file cloudfront.tf:

               
resource "aws_cloudfront_origin_access_identity" "origin_access_identity" {
   comment = "OAI for ${local.bucket_name}"
}
   
# cloudwatch logging and WAF are not required for this example
# tfsec:ignore:avd-aws-0010 tfsec:ignore:avd-aws-0011
resource "aws_cloudfront_distribution" "this" {
   origin {
      domain_name = aws_s3_bucket.website_bucket.bucket_regional_domain_name
      origin_id   = aws_s3_bucket.website_bucket.arn
   
      s3_origin_config {
         origin_access_identity = aws_cloudfront_origin_access_identity.origin_access_identity.cloudfront_access_identity_path
      }
   
   }

   enabled             = true
   is_ipv6_enabled     = true
   comment             = "Cloudfront distribution for ${local.bucket_name}"
   default_root_object = "index.html"

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

   price_class = "PriceClass_200"
   viewer_certificate {
      cloudfront_default_certificate = true
   }


   restrictions {
      geo_restriction {
         restriction_type = "none"
      }
   }
}                  
               
            

aws_cloudfront_origin_access_identity

The aws_cloudfront_origin_access_identity is a resource in AWS CloudFront that represents an origin access identity (OAI). An origin access identity is a special CloudFront user that you can associate with your CloudFront distribution to restrict access to your Amazon S3 bucket or custom origin.

aws_cloudfront_distribution

The aws_cloudfront_distribution is a resource in Terraform that allows you to manage an Amazon CloudFront distribution. Amazon CloudFront is a content delivery network (CDN) that securely delivers data, videos, applications, and APIs to your viewers with low latency and high transfer speeds.
We configure the following elements:

origin

In this section we define our previouslu created S3 bucket as backend of this CDN

default_root_object

It specifies the object that you want CloudFront to return when a user requests the root URL of your distribution. In this case index.html

default_cache_behavior

here we configure the CDN to redirect http traffic to https, don't forward cookies or query strings, and only accept the GET and HEAD http methods

price_class

In our configuration we use PriceClass_200 which serves your objects from edge locations in all regions except South America and Australia. This is a mid-tier price point.

geo_restriction

This helps to define what region are allowed to access our site. In this case we don't restrict access

Now we have all our resources set, it's time to set the intput variables set on the file terraform.tfvars:

                     
aws_access_key = ""

aws_secret_key = ""

aws_region = ""

stack = ""

                     
                  

Now let's run a plan to verify what resources will be created by our code

terraform plan -out plan.tfplan

You should see an output similar to this one:

Now, if everything went well we can apply the plan we run before (be patient because the CDN creation might take a couple of minutes):

terraform apply plan.tfplan

And the output should looks like this one:

That's all! You have your static site running on AWS with S3 and Cloudfront!

If for some strange reason you want to destroy all this infrastructure, you could do it with

terraform destroy

but we promise you don't want to delete this site! Let's see what costs says...