Setting Up AWS CloudFront as an HTTPS Endpoint for S3

1 hour
  • 7 Learning Objectives

About this Hands-on Lab

In this hands-on lab we’ll be setting up a CloudFront distribution in front of an S3 bucket website and securing it via HTTPS provided by CloudFront. AWS CloudFront is a versatile caching service (CDN) that helps with lowering latency when accessing objects over the internet. Additionally, it can act as an HTTPS termination point for your cached website — thus, providing a secure way of distributing your content over the internet.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Upload Content to S3 Bucket
  1. Upload the index.html file to the bucket (replacing <BUCKET_NAME_PROVIDED> with the S3 bucket name listed on the lab page):

    aws s3 cp index.html s3://<BUCKET_NAME_PROVIDED>
Create CloudFront OAI
  1. Create a CloudFront origin access identity so it can get content from your S3 bucket on your behalf (replacing <YOUR_UNIQUE_STRING_HERE> with a random series of numbers):

    aws cloudfront create-cloud-front-origin-access-identity --cloud-front-origin-access-identity-config CallerReference=<YOUR_UNIQUE_STRING_HERE>,Comment=MyOAI
  2. Copy the Id and Etag in the output and paste them into a text file, as we’ll need them later.

Modify S3 Policy File in Directory and Execute It Against S3 Bucket
  1. Modify the provided policy_cloudfront.json file in the home directory of cloud_user and replace <OAI-ID> with the OAI ID retrieved as a result of the previous OAI creation command.

  2. Execute this policy against the S3 website bucket (first changing to the home directory):

    aws s3api put-bucket-policy --bucket <BUCKET_NAME> --policy file://policy_cloudfront.json
Create CloudFront Distribution
  1. Create a CloudFront distribution:

    aws cloudfront create-distribution --origin-domain-name <BUCKET_NAME> --default-root-object index.html

    This will give you a lengthy output. Find and note/save the ETag and Id of the CloudFront distribution from within that returned JSON string, as you’ll need them later to update it.

Get and Update the CloudFront Distribution Config
  1. Get the CloudFront distribution config and filter out the distribution-specific part:

    aws cloudfront get-distribution-config --id <CF_DIST_ID> | jq -r .DistributionConfig > dist-config.json
  2. Modify the following properties in the newly created dist-config.json file:

    • OriginAccessIdentity under key Origin should be origin-access-identity/cloudfront/<OAI_ID> (don’t forget to replace <OAI_ID> with the actual OAI ID).
    • PriceClass should be PriceClass_100.
    • ViewerProtocolPolicy should be redirect-to-https.
Update CloudFront Distribution with the Modified `dist-config.json` File
  1. Update the CloudFront distribution with the dist-config.json file (replacing <DISTRIBUTION_ID> and <DISTRIBUTION_ETAG> with the values noted earlier):

    aws cloudfront update-distribution --id <DISTRIBUTION_ID> --distribution-config file://dist-config.json --if-match <DISTRIBUTION_ETAG>
Test and Verify
  1. Browse or curl the CloudFront distribution URL to ensure your website is working:

  2. Head to the AWS console to verify the changes you made are in place. You can also do this by issuing the AWS CloudFront GetDistribution CLI command.

Note: CloudFront distributions can take about 20 minutes to be globally effective. It might work for you immediately or within a few minutes after you create it, so be patient and wait for it to deploy before you test.

Additional Resources

You have successfully created an S3 static website for your high-traffic sale event later in the month. However, management now has two concerns. They want the static website to be:

  1. Secure
  2. Easily accessible with low latency across the world

You have been assigned to research, test, and come up with a solution to address the above concerns.

To begin, open a terminal session and log in to the provided EC2 instance via SSH using the credentials provided:

ssh cloud_user@<PUBLIC IP>

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?