Deploy a Static Website with S3 & CloudFront

I was recently asked a question: "how would you deploy a static website using s3 and cloudfront?"

While I knew the steps to deploy this solution, I was a bit fuzzy on the details of what settings needed to be configured in Cloudfront to ensure a smooth execution. Forgetting those details frustrated me because I had to set it up for a developer last year. Now, I'm doing it again to memorize it forever!

Hosting a static website can be done simply by creating an S3 bucket, uploading your files to the bucket, and pointing your users to the s3 bucket endpoint to access the site. However, this solution has a few additional requirements:

• needs to integrate AWS Cloudfront for lowest latency
• needs to be secure, therefore a SSL certificate is needed
• CI/CD pipeline to deploy updates to code
• site needs to be accessible via a custom domain.

📝 TL;DR → I deployed a static website bolucloudtestbucket.demo.bolu.cloud using a S3 bucket, CloudFront, ACM Certificate and Route53. Head to my github repo for the Terraform and CloudFormation code to deploy this in your own AWS account.

The steps to get this done are outlined below. Also, see a diagram of the architecture I'll be implementing.

1. Create an S3 Bucket and policy
2. Create ACM Certificate
3. Create a Cloudfront Distribution
4. Create Route53 record

Create a S3 Bucket

This can be created using the AWS console, Cloudformation or Terraform. Open the AWS Console, navigate to S3 service and create a s3 bucket with the same name as the FQDN.

After the s3 bucket is created, turn OFF the "Block all public access" setting. Next, add a s3 bucket policy to allow access to the contents inside the s3 bucket. Go to the Static website hosting section and Enable it.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::<--s3 bucket name-->/*",
                "arn:aws:s3:::<--s3 bucket name-->"
            ]
        }
    ]
}

The terraform code below creates the s3 bucket with the correct settings:

# this creates the s3 bucket
resource "aws_s3_bucket" "s3_hosted_site" {
  bucket = var.hosted_site_name

  tags = {
    Name        = var.hosted_site_name
    environment = var.environment
  }
}

# this attaches s3 bucket policy to the bucket
resource "aws_s3_bucket_policy" "s3_hosted_site_allow_public_access_policy" {
  bucket = aws_s3_bucket.s3_hosted_site.id
  policy = data.aws_iam_policy_document.s3_hosted_site_allow_public_access_bucket_policy.json
}

# this creates the s3 bucket policy
data "aws_iam_policy_document" "s3_hosted_site_allow_public_access_bucket_policy" {
  statement {
    sid = "PublicReadGetObject"
    actions = [
      "s3:GetObject",
      "s3:ListBucket"
    ]
    resources = [
      "arn:aws:s3:::www.bolucloudtestbucket.demo.bolu.cloud/*",
      "arn:aws:s3:::www.bolucloudtestbucket.demo.bolu.cloud"
    ]
    principals {
      type        = "*"
      identifiers = ["*"]
    }
  }
}

# this enables the Static Website Hosting setting
resource "aws_s3_bucket_website_configuration" "s3_hosted_site_config" {
  bucket = aws_s3_bucket.s3_hosted_site.id

  index_document {
    suffix = "index.html"
  }

  error_document {
    key = "error.html"
  }
}

Create an ACM SSL Certificate

To create an ACM certificate, simply head to the ACM Certificate Manager service in the AWS console and select "Request Certificate" on the left menu. Enter the domain you wish to deploy your website to. Since I deploy my demo projects to the demo.bolu.cloud subdomain, I used that FQDN in my ACM certificate request.

Choose DNS Validation on the validation method setting, and RSA 2048 for the key algorithm and click Request. Once requested, you'll be given some DNS records to input into Route53 to validate the certificate. After validation, the certificate is officially ready for use.

Again, you can reference the Terraform code below to both create and validate the ACM SSL certificate you create.

# this creates an acm certificate
resource "aws_acm_certificate" "s3_hosted_site_cert" {
  domain_name       = "demo.bolu.cloud"
  validation_method = "DNS"

  subject_alternative_names = [
    "*.demo.bolu.cloud"
  ]

  lifecycle {
    create_before_destroy = true
  }
}

# this section validates the certificate based on the dns records provided
resource "aws_acm_certificate_validation" "demo_bolu_cloud_cert_validation" {
  certificate_arn         = aws_acm_certificate.s3_hosted_site_cert.arn
  validation_record_fqdns = [aws_route53_record.demo_bolu_cloud_acm_dns.fqdn]
}

# this section adds the route53 record needed to validate the certificate 
resource "aws_route53_record" "demo_bolu_cloud_acm_dns" {
  allow_overwrite = true
  name            = tolist(aws_acm_certificate.s3_hosted_site_cert.domain_validation_options)[0].resource_record_name
  records         = [tolist(aws_acm_certificate.s3_hosted_site_cert.domain_validation_options)[0].resource_record_value]
  type            = tolist(aws_acm_certificate.s3_hosted_site_cert.domain_validation_options)[0].resource_record_type
  zone_id         = data.aws_route53_zone.demo_bolucloud_zone.zone_id
  ttl             = 60
}

Create a Cloudfront Distribution

Head over to the Cloudfront service in the AWS console, click Create Distribution, and fill out the settings below:

• Origin domain: The default option for this is the standard s3 endpoint of the bucket you created. However, since this is being used for static website hosting, you need to head back to the s3 bucket you created to get the correct endpoint. S3 --> Bucket --> Select bucket you created --> Properties --> Static Website Hosting (scroll all the way down to get to this section) and copy the Bucket website endpoint.

• Name: enter the name you want to use for this origin.
• Viewer protocol policy: HTTP and HTTPS
• Allowed HTTP methods: GET, HEAD
• Web Application Firewall (WAF): Enable security protections
• Price class: Use all edge locations (best performance)
• Alternate domain name (CNAME): set an alternative domain name (FQDN) where this endpoint will be reached.
• Custom SSL certificate: select the SSL certificate you created earlier.
• You can leave the remaining options as default.
• Click Create distribution to start the cloudfront creation. This takes a few minutes to get created and deployed.

The terraform code below will create the cloudfront distribution with the necessary settings:

resource "aws_cloudfront_distribution" "s3_hosted_site_cloudfront_distro" {
  origin {
    domain_name         = "www.bolucloudtestbucket.demo.bolu.cloud.s3-website-us-east-1.amazonaws.com"
    origin_id           = "www.bolucloudtestbucket.demo.bolu.cloud.s3.us-east-1.amazonaws.com"
    connection_attempts = 3
    connection_timeout  = 10
    custom_origin_config {
      http_port                = 80
      https_port               = 443
      origin_keepalive_timeout = 5
      origin_protocol_policy   = "http-only"
      origin_read_timeout      = 30
      origin_ssl_protocols = [
        "SSLv3",
        "TLSv1",
        "TLSv1.1",
        "TLSv1.2"
      ]
    }
  }
  aliases = [
    "bolucloudtestbucket.demo.bolu.cloud"
  ]
  enabled         = true
  is_ipv6_enabled = true
  restrictions {
    geo_restriction {
      restriction_type = "none"
      locations        = []
    }
  }
  viewer_certificate {
    acm_certificate_arn      = aws_acm_certificate.s3_hosted_site_cert.arn
    ssl_support_method       = "sni-only"
    minimum_protocol_version = "TLSv1.2_2021"
  }

  default_cache_behavior {
    viewer_protocol_policy = "allow-all"
    cached_methods         = ["GET", "HEAD"]
    cache_policy_id        = "4135ea2d-6df8-44a3-9df3-4b5a84be39ad" # Using the CachingDisabled managed policy ID:
    allowed_methods        = ["GET", "HEAD"]
    compress               = true
    target_origin_id       = "www.bolucloudtestbucket.demo.bolu.cloud.s3.us-east-1.amazonaws.com"
  }
  depends_on = [
    aws_acm_certificate.s3_hosted_site_cert,
    aws_s3_bucket.s3_hosted_site
  ]
}

Create Route53 Records

The last step is creating the Route53 records to point your FQDN to the cloudfront distribution. Head over to the Route53 service, go to the hosted zone for your FQDN and Create a new record. Input the record name, keep the record type as an A record, and turn on the Alias. In the Route traffic to section, choose the "Alias to Cloudfront distribution" option and select the Cloudfront distribution you just created. Create record and give it some time to propagate.

NOTE: For the Cloudfront distribution you created to show up in the Route53 drop down menu, the record name HAS to be the same as one of the Alternate domain names set in Cloudfront. Spent a good amount of time trying to troubleshoot this omission.

You have now deployed your solution and hosted the static website on a S3 bucket in AWS. Visit your FQDN to validate that your custom domain name resolves and displays your website. For additional validation, run the nslookup command as below to see if your cloudfront distribution is serving your website. Visit bolucloudtestbucket.demo.bolu.cloud to validate that my solution works as well!

Please note that I usually destroy resources for my projects within 48 hours of creation for costs purposes.

>>> nslookup www.bolucloudtestbucket.demo.bolu.cloud
Server:  xxxxxxxx.xxxxxx.net
Address:  XXX.XXX.X.XXX

Non-authoritative answer:
Name:    dvlqyf7rz6dw1.cloudfront.net
Addresses:  2600:9000:26c8:5000:b:1b82:b440:93a1
          2600:9000:26c8:5a00:b:1b82:b440:93a1
          2600:9000:26c8:7200:b:1b82:b440:93a1
          2600:9000:26c8:1e00:b:1b82:b440:93a1
          2600:9000:26c8:f200:b:1b82:b440:93a1
          2600:9000:26c8:d000:b:1b82:b440:93a1
          2600:9000:26c8:0:b:1b82:b440:93a1
          2600:9000:26c8:4c00:b:1b82:b440:93a1
          3.161.242.66
          3.161.242.50
          3.161.242.117
          3.161.242.24
Aliases:  www.bolucloudtestbucket.demo.bolu.cloud

In the next part of this project, I'll walk through how to setup a CI/CD pipeline with Github Actions to automatically deploy changes made to the website code.