Skip to main content

Setting Up AWS CloudFront as an HTTPS Endpoint for S3

Hands-On Lab

 

Photo of Moosa Khalid

Moosa Khalid

AWS Training Architect II

Length

01:00:00

Difficulty

Intermediate

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.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Setting Up AWS CloudFront as an HTTPS Endpoint for S3

Introduction

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.

Solution

Open a terminal session and log in to the provided EC2 instance via SSH using the credentials provided on the lab page:

ssh cloud_user@<PUBLIC IP>

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 (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 in the output and paste it into a text file, as we'll need it for the next step.

Modify S3 Policy File in Directory and Execute It Against S3 Bucket

  1. Open the policy_cloudfront.json file:

    vim policy_cloudfront.json
  2. Replace <OAI-ID> with the OAI ID retrieved as a result of the previous OAI creation command.

  3. Save and exit the file.

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

    cd
    
    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>.s3.amazonaws.com --default-root-object index.html
  2. Copy the ETag and Id of the CloudFront distribution from within the returned JSON string and paste them into a text file, as we'll need them later.

Get and Update the CloudFront Distribution Config

  1. Get the CloudFront distribution config and filter out the distribution-specific part (replacing <CF_DIST_ID> with the Id you copied in the previous step):

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

    vim dist-config.json
  3. Modify the following properties in the file:

    • OriginAccessIdentity under key Origin should be origin-access-identity/cloudfront/<OAI_ID> (don't forget to replace <OAI_ID> with the OAI ID you copied at the beginning of the lab).
    • PriceClass should be PriceClass_100.
    • ViewerProtocolPolicy should be redirect-to-https.
  4. Save and exit the file.

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. Log in to the AWS console using the credentials provided on the lab page.

  2. Once you're logged in, navigate to CloudFront.

  3. CloudFront distributions take about 20 minutes to be globally effective, so give it some time before testing.

  4. Once it's deployed, browse to the domain name listed to verify the website is working.

  5. You can also curl the CloudFront distribution URL:

    curl <CLOUDFRONT_DIST_URL>

Conclusion

Congratulations on successfully completing this hands-on lab!