In this module you will create an S3 static hosted website that will be accessible through a CloudFront Distribution. By doing this, you will block all direct public access to your S3 objects, and they will only be available through the content delivery network. This will also provide an HTTPS connection, instead of the static website hosting URL that is HTTP. You will create a bucket policy so that CloudFront will have access to "GetObject" from the S3 Bucket. Let's get started!

Create a new branch in GitHub

Login to GitHub
Select the Issues tab > Select New Issue
Add the a title, e.g. Create static website
Select Submit new issue

On the right pane, under Development, Select Create a branch
Leave the defaults > Select Create branch

Open your IDE Terminal.
Input the following:

git fetch origin

git checkout YOUR_BRANCH_NAME

Current Bucket State

Note the start of your current bucket, should be like below.

To view this, select your Bucket > select Properties
- Scroll to the bottom and see Static website hosting

Modifying s3_website_configuration

To get started you will be modifying the main, variables and outputs Terraform files located in ./infra/modules/aws/s3/s3_website_configuration/.

main.tf

To create the configuration for the Static website hosting for your S3 Bucket, input the following:
```
  resource "aws_s3_bucket_website_configuration" "website_configuration" {
    bucket   = var.bucket_name

    index_document {
      suffix = "index.html"
    }
  }
```
This will create the website configuration on the bucket defined as bucket_name.

Next you will add a bucket policy so that CloudFront will have access to the S3 Bucket.

Input the following:

  data "aws_iam_policy_document" "bucket_policy" {
    statement {
      sid = var.sid
      effect = "Allow"

      principals {
        type = "Service"
        identifiers = ["cloudfront.amazonaws.com"]
      }

      actions = [
        "s3:GetObject"
      ]

      resources = var.resource

      condition {
        test = "StringEquals"
        variable = "AWS:SourceArn"
        values = [ var.cloudfront_distribution_arn ]
      }
    }
  }

  resource "aws_s3_bucket_policy" "bucket_policy" {
    bucket = var.bucket_name
    policy = data.aws_iam_policy_document.bucket_policy.json
  }

data.aws_iam_policy document creates a template of an IAM policy to allow the CloudFront service the ability to "GetObject" from the S3 bucket. You further define a condition for what Distribution will have the allow access to your defined bucket. The ARN for the CloudFront distribution will be an output variable from the CloudFront distribution module.

The policy is then attached as a bucket policy to the bucket you created.

Save the file

variables.tf

Input the following to define the variables for the S3 Bucket website configuration:

  variable "bucket_name" {
    description = "The name of the S3 bucket"
    type = string
  }

  variable "sid" {
    description = "statement ID for Policy"
    type = string
  }

  variable "cloudfront_distribution_arn" {
    description = "ARN for CloudFront distribution"
    type = string
  }

  variable "resource" {
    description = "(Required in only some circumstances) – If you create an IAM permissions policy, you must specify a list of resources to which the actions apply. If you create a resource-based policy, this element is optional. If you do not include this element, then the resource to which the action applies is the resource to which the policy is attached."
    type = list(string)
  }

Save the file

Note: Defining output variables is optional here since you will not require any of them as inputs for other modules. Refer to the references above for the available outputs.

Modifying cloudfront_distribution

In this section, you will modify the terraform files located in ./infa/moudles/aws/cloudfront_distrution

main.tf

Input the following to create the CloudFront Distribution resource block

  resource "aws_cloudfront_distribution" "s3_distribution" {
    origin {
      domain_name              = var.bucket_regional_domain_name
      origin_access_control_id = aws_cloudfront_origin_access_control.default.id
      origin_id                = var.origin_id
    }

    enabled             = true
    is_ipv6_enabled     = true
    comment             = var.comment
    default_root_object = var.default_root_object

    default_cache_behavior {
      allowed_methods  = var.allowed_methods
      cached_methods   = var.cached_methods
      target_origin_id = var.origin_id

      forwarded_values {
        query_string = var.query_string

        cookies {
          forward = var.cookies_forward
        }
      }

      viewer_protocol_policy = var.viewer_protocol_policy
      min_ttl                = var.min_ttl
      default_ttl            = var.default_ttl
      max_ttl                = var.max_ttl
    }

    price_class = var.price_class

    restrictions {
      geo_restriction {
        restriction_type = var.restriction_type
        locations        = var.locations
      }
    }

    viewer_certificate {
      cloudfront_default_certificate = true
    }
  }

Later in the variables section you will define the majority of these variables with default values.

In order for the CloudFront distribution to be accessible, you will need to create an Origin Access Control for the S3 bucket website configuration resource.

Input the following to define the Origin Access Control

  resource "aws_cloudfront_origin_access_control" "default" {
    name                              = var.name
    description                       = var.description
    origin_access_control_origin_type = var.origin_access_control_origin_type
    signing_behavior                  = var.signing_behavior
    signing_protocol                  = var.signing_protocol
  }

Save the file

variables.tf

Input the following to define each of the variables and some with their default values.

  # aws_cloudfront_origin_access_contol.default
  variable "name" {
    description = "(Required) A name that identifies the Origin Access Control."
    type = string
  }

  variable "description" {
    description = "(Optional) The description of the Origin Access Control. Defaults to \"Managed by Terraform\" if omitted."
    type = string
  }

  variable "origin_access_control_origin_type" {
    description = "(Required) The type of origin that this Origin Access Control is for. Valid values are s3, and mediastore."
    type = string
    default = "s3"
  }

  variable "signing_behavior" {
    description = "(Required) Specifies which requests CloudFront signs. Specify always for the most common use case. Allowed values: always, never, and no-override."
    type = string
    default = "always"
  }

  variable "signing_protocol" {
    description = "Required) Determines how CloudFront signs (authenticates) requests. The only valid value is sigv4."
    type = string
    default = "sigv4"
  }

  # aws_cloudfront_distribution.s3_distribution
  variable "comment" {
    description = "(Optional) - Any comments you want to include about the distribution."
    type = string
  }

  variable "bucket_regional_domain_name" {
    description = "Regional Domain Name for S3 Bucket"
    type = string
  }

  variable "default_root_object" {
    description = "(Optional) - Object that you want CloudFront to return (for example, index.html) when an end user requests the root URL."
    type = string
    default = "index.html"
  }

  variable "allowed_methods" {
    description = "(Required) - Controls which HTTP methods CloudFront processes and forwards to your Amazon S3 bucket or your custom origin."
    type = list(string)
    default = [ "DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT" ]
  }

  variable "cached_methods" {
    description = "(Required) - Controls whether CloudFront caches the response to requests using the specified HTTP methods."
    type = list(string)
    default = [ "GET", "HEAD" ]
  }

  variable "origin_id" {
    description = "Origin Access Control ID Value"
    type = string
  }

  variable "query_string" {
    description = "(Required) - Indicates whether you want CloudFront to forward query strings to the origin that is associated with this cache behavior."
    type = bool
    default = false
  }

  variable "cookies_forward" {
    description = "(Required) - The forwarded values cookies that specify how CloudFront handles cookies (maximum one)."
    type = string
    default = "none"
  }

  variable "viewer_protocol_policy" {
    description = "(Required) - Use this element to specify the protocol that users can use to access the files in the origin specified by TargetOriginId when a request matches the path pattern in PathPattern. One of allow-all, https-only, or redirect-to-https."
    type = string
    default = "redirect-to-https"
  }

  variable "min_ttl" {
    description = "(Optional) - Minimum amount of time that you want objects to stay in CloudFront caches before CloudFront queries your origin to see whether the object has been updated. Defaults to 0 seconds."
    type = number
    default = 0
  }

  variable "default_ttl" {
    description = "(Optional) - Default amount of time (in seconds) that an object is in a CloudFront cache before CloudFront forwards another request in the absence of an Cache-Control max-age or Expires header."
    type = number
    default = 3600
  }

  variable "max_ttl" {
    description = "(Optional) - Maximum amount of time (in seconds) that an object is in a CloudFront cache before CloudFront forwards another request to your origin to determine whether the object has been updated. Only effective in the presence of Cache-Control max-age, Cache-Control s-maxage, and Expires headers."
    type = number
    default = 84600
  }

  variable "price_class" {
    description = "(Optional) - Price class for this distribution. One of PriceClass_All, PriceClass_200, PriceClass_100."
    type = string
    default = "PriceClass_200"
  }

  variable "restriction_type" {
    description = "(Required) - Method that you want to use to restrict distribution of your content by country: none, whitelist, or blacklist"
    type = string
    default = "none"
  }

  variable "locations" {
    description = "(Required) - ISO 3166-1-alpha-2 codes for which you want CloudFront either to distribute your content (whitelist) or not distribute your content (blacklist). If the type is specified as none an empty array can be used."
    type = list(string)
    default = []
  }

Save the file

outputs.tf

Input the following to define the output variables for your CloudFront distribution resource

  output "id" {
    description = "Identifier for the distribution. For example: EDFDVBD632BHDS5."
    value = aws_cloudfront_distribution.s3_distribution.id
  }

  output "arn" {
    description = "ARN for the distribution. For example: arn:aws:cloudfront::123456789012:distribution/EDFDVBD632BHDS5, where 123456789012 is your AWS account ID"
    value = aws_cloudfront_distribution.s3_distribution.arn
  }

  output "caller_reference" {
    description = "Internal value used by CloudFront to allow future updates to the distribution configuration."
    value = aws_cloudfront_distribution.s3_distribution.caller_reference
  }

  output "status" {
    description = "Current status of the distribution. Deployed if the distribution's information is fully propagated throughout the Amazon CloudFront system."
    value = aws_cloudfront_distribution.s3_distribution.status
  }

  output "tags_all" {
    description = "Map of tags assigned to the resource, including those inherited from the provider default_tags configuration block."
    value = aws_cloudfront_distribution.s3_distribution.tags_all
  }

  output "trusted_key_groups" {
    description = "List of nested attributes for active trusted key groups, if the distribution is set up to serve private content with signed URLs."
    value = aws_cloudfront_distribution.s3_distribution.trusted_key_groups
  }

  output "trusted_signers" {
    description = "List of nested attributes for active trusted signers, if the distribution is set up to serve private content with signed URLs."
    value = aws_cloudfront_distribution.s3_distribution.trusted_signers
  }

  output "domain_name" {
    description = "Domain name corresponding to the distribution. For example: d604721fxaaqy9.cloudfront.net"
    value = aws_cloudfront_distribution.s3_distribution.domain_name
  }

  output "last_modified_time" {
    description = "Date and time the distribution was last modified."
    value = aws_cloudfront_distribution.s3_distribution.last_modified_time
  }

  output "in_progress_validation_batches" {
    description = "Number of invalidation batches currently in progress."
    value = aws_cloudfront_distribution.s3_distribution.in_progress_validation_batches
  }

  output "etag" {
    description = "Current version of the distribution's information. For example: E2QWRUHAPOMQZL."
    value = aws_cloudfront_distribution.s3_distribution.etag
  }

  output "hosted_zone_id" {
    description = "CloudFront Route 53 zone ID that can be used to route an Alias Resource Record Set to. This attribute is simply an alias for the zone ID Z2FDTNDATAQYW2."
    value = aws_cloudfront_distribution.s3_distribution.hosted_zone_id
  }

Save the file

Updating s3_cloudfront_site

In this section you will complete the s3_cloudfront_site module so it can be used in the my_portfolio module. You will include module blocks from the s3_website_configuration and the cloudfront_distribution.

main.tf

Input the following to update your current configuration.

  module "s3_website_config" {
    source = "../aws/s3/s3_website_configuration"

    sid                         = var.bucket_policy_sid
    bucket_name                 = module.bucket.id
    cloudfront_distribution_arn = module.cloudfront_distribution.arn
    resource                    = ["${module.bucket.arn}/*"]
  }

Module block for the S3 Bucket website configuration

  module "cloudfront_distribution" {
    source = "../aws/cloudfront_distribution"

    name                        = var.name
    description                 = var.description
    comment                     = var.comment
    bucket_regional_domain_name = module.bucket.bucket_regional_domain_name
    origin_id                   = var.origin_id
  }

Module block for CloudFront Distribution

Save the file

variables.tf

Input the following to update the input variables for s3_cloudfront_site:

  variable "bucket_name" {
    description = "Given name of the S3 bucket"
    type = string
  }

  variable "name" {
    description = "Name for Origin Access Control"
    type = string
  }

  variable "description" {
    description = "Description for Origin Access Control"
    type = string
  }

  variable "comment" {
    description = "Comment for CloudFront Distribution"
    type = string
  }

  variable "origin_id" {
    description = "ID for Origin Access Control"
    type = string
  }

  variable "bucket_policy_sid" {
    description = "Sid for Bucket Policy"
    type = string
  }

outputs.tf

Input the following to update your output variables for this module:

  output "cloudfront_id" {
    description = "Identifier for the distribution. For example: EDFDVBD632BHDS5."
    value = module.cloudfront_distribution.id
  }

  output "cloudfront_arn" {
    description = "ARN for the distribution. For example: arn:aws:cloudfront::123456789012:distribution/EDFDVBD632BHDS5, where 123456789012 is your AWS account ID"
    value = module.cloudfront_distribution.arn
  }

  output "cloudfront_caller_reference" {
    description = "Internal value used by CloudFront to allow future updates to the distribution configuration."
    value = module.cloudfront_distribution.caller_reference
  }

  output "cloudfront_status" {
    description = "Current status of the distribution. Deployed if the distribution's information is fully propagated throughout the Amazon CloudFront system."
    value = module.cloudfront_distribution.status
  }

  output "cloudfront_tags_all" {
    description = "Map of tags assigned to the resource, including those inherited from the provider default_tags configuration block."
    value = module.cloudfront_distribution.tags_all
  }

  output "cloudfront_trusted_key_groups" {
    description = "List of nested attributes for active trusted key groups, if the distribution is set up to serve private content with signed URLs."
    value = module.cloudfront_distribution.trusted_key_groups
  }

  output "cloudfront_trusted_signers" {
    description = "List of nested attributes for active trusted signers, if the distribution is set up to serve private content with signed URLs."
    value = module.cloudfront_distribution.trusted_signers
  }

  output "cloudfront_domain_name" {
    description = "Domain name corresponding to the distribution. For example: d604721fxaaqy9.cloudfront.net"
    value = module.cloudfront_distribution.domain_name
  }

  output "cloudfront_last_modified_time" {
    description = "Date and time the distribution was last modified."
    value = module.cloudfront_distribution.last_modified_time
  }

  output "cloudfront_in_progress_validation_batches" {
    description = "Number of invalidation batches currently in progress."
    value = module.cloudfront_distribution.in_progress_validation_batches
  }

  output "cloudfront_etag" {
    description = "Current version of the distribution's information. For example: E2QWRUHAPOMQZL."
    value = module.cloudfront_distribution.etag
  }

  output "cloudfront_hosted_zone_id" {
    description = "CloudFront Route 53 zone ID that can be used to route an Alias Resource Record Set to. This attribute is simply an alias for the zone ID Z2FDTNDATAQYW2."
    value = module.cloudfront_distribution.hosted_zone_id
  }

Save the file

Modifying my_portfolio

In this section, you will update my_portfolio

main.tf

Input the following to update the module.static_website block:

    name              = var.origin_access_name
    description       = var.origin_access_description
    comment           = var.cloudfront_comment
    origin_id         = var.origin_id
    bucket_policy_sid = var.bucket_policy_sid

Save the file

variables.tf

Input the following to update your variables.tf

  variable "origin_access_name" {
    description = "Name for Origin Access Control"
    type = string
  }

  variable "origin_access_description" {
    description = "Description for Origin Access Control"
    type = string
  }

  variable "cloudfront_comment" {
    description = "Comment for CloudFront Distribution"
    type = string
  }

  variable "origin_id" {
    description = "ID for Origin Access Control"
    type = string
  }

  variable "bucket_policy_sid" {
    description = "Sid for Bucket Policy"
    type = string
  }

Save the file

outputs.tf

Input the following to update your output variables for this module:

  output "cloudfront_id" {
    description = "Identifier for the distribution. For example: EDFDVBD632BHDS5."
    value = module.static_website.cloudfront_id
  }

  output "cloudfront_arn" {
    description = "ARN for the distribution. For example: arn:aws:cloudfront::123456789012:distribution/EDFDVBD632BHDS5, where 123456789012 is your AWS account ID"
    value = module.static_website.cloudfront_arn
  }

  output "cloudfront_caller_reference" {
    description = "Internal value used by CloudFront to allow future updates to the distribution configuration."
    value = module.static_website.cloudfront_caller_reference
  }

  output "cloudfront_status" {
    description = "Current status of the distribution. Deployed if the distribution's information is fully propagated throughout the Amazon CloudFront system."
    value = module.static_website.cloudfront_status
  }

  output "cloudfront_tags_all" {
    description = "Map of tags assigned to the resource, including those inherited from the provider default_tags configuration block."
    value = module.static_website.cloudfront_tags_all
  }

  output "cloudfront_trusted_key_groups" {
    description = "List of nested attributes for active trusted key groups, if the distribution is set up to serve private content with signed URLs."
    value = module.static_website.cloudfront_trusted_key_groups
  }

  output "cloudfront_trusted_signers" {
    description = "List of nested attributes for active trusted signers, if the distribution is set up to serve private content with signed URLs."
    value = module.static_website.cloudfront_trusted_signers
  }

  output "cloudfront_domain_name" {
    description = "Domain name corresponding to the distribution. For example: d604721fxaaqy9.cloudfront.net"
    value = module.static_website.cloudfront_domain_name
  }

  output "cloudfront_last_modified_time" {
    description = "Date and time the distribution was last modified."
    value = module.static_website.cloudfront_last_modified_time
  }

  output "cloudfront_in_progress_validation_batches" {
    description = "Number of invalidation batches currently in progress."
    value = module.static_website.cloudfront_in_progress_validation_batches
  }

  output "cloudfront_etag" {
    description = "Current version of the distribution's information. For example: E2QWRUHAPOMQZL."
    value = module.static_website.cloudfront_etag
  }

  output "cloudfront_hosted_zone_id" {
    description = "CloudFront Route 53 zone ID that can be used to route an Alias Resource Record Set to. This attribute is simply an alias for the zone ID Z2FDTNDATAQYW2."
    value = module.static_website.cloudfront_hosted_zone_id
  }

Save the file

Modifying ./infra/main.tf

In this section, you will define the input variables for your module.my_static_website

Input the following:

    bucket_policy_sid = "AllowCloudFrontServicePrincipalReadOnly"
    origin_id = "my_origin_access_id"
    origin_access_name = "Origin Access Cotrol for Bucket Website"
    origin_access_description = "Original Access Controls for Static Website Hosting"
    cloudfront_comment = "Static website hosting for my personal website."

Save the file

outputs.tf

There is only one output that you will require to complete CloudFront invalidations:

Input the following:

  output "cloudfront_id" {
    description = "Identifier for the distribution. For example: EDFDVBD632BHDS5."
    value = module.my_static_website.cloudfront_id
  }

Save the file

Pushing to GitHub

Ensure your files are saved.
In your IDE Terminal, type the following:

git add .

Add all files that were changed.

git commit -m "create cloudfront distribution for static website"

Commit the changes with a comment.

git push

Push to GitHub.

Create Pull Request

Login to GitHub.
You should see the push on your repository.
Select Compare and pull request.
Validate the changes that were made to be pushed to main
Select Create pull request.

Your Terraform Plan should run before you can merge to main.

If you are using the same site files from the original template, the plan to add 4 should match.

Select Merge pull request > Confirm merge.
Delete branch.
In your IDE Terminal, type the following:

git checkout main

git pull

Validation:

AWS Management Console:
- In the Search bar, search for "s3" > Select your bucket
- Notice your bucket state under properties:

Note this URL will not be accessible directly due to the bucket policy restrictions from public access.

In the Search bar, search for "cloudfront" > Select "Distributions"
Locate your distribution and note the Domain name. This will be how you access your site.

Once the CloudFront Distribution completes it's deployment, navigate to the CloudFront URL.

You have successfully created a CloudFront distribution to host your S3 bucket website. In the next module, you will create a DynamoDB table and a table item to store a visitor count for your site. This will be integrated later with API Gateway and Lambda.

5. Cloud Resume Challenge: Creating CloudFront Distribution

Create a new branch in GitHub

Current Bucket State

Modifying s3_website_configuration

main.tf

variables.tf

Modifying cloudfront_distribution

main.tf

variables.tf

outputs.tf

Updating s3_cloudfront_site

main.tf

variables.tf

outputs.tf

Modifying my_portfolio

main.tf

variables.tf

outputs.tf

Modifying ./infra/main.tf

outputs.tf

Pushing to GitHub

Create Pull Request

Validation:

Subscribe to my newsletter

Michael Maratita

Michael Maratita