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_UUIDGEN_HERE> with the uuidgen):

    aws cloudfront create-cloud-front-origin-access-identity --cloud-front-origin-access-identity-config CallerReference=<YOUR_UNIQUE_UUIDGEN_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.

  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_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:

    aws cloudfront update-distribution --id $CF_ID --distribution-config file://dist-config.json --if-match $CF_ETAG
Test and Verify

In the CloudFront Console, copy the CloudFront distribution domain name and paste it into a browser tab to confirm the website is working.

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.

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?