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
Upload the
index.htmlfile 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
Create a CloudFront origin access identity so it can get content from your S3 bucket on your behalf (replacing
<YOUR_UNIQUE_UUIDGEN_HERE>with theuuidgen):aws cloudfront create-cloud-front-origin-access-identity --cloud-front-origin-access-identity-config CallerReference=<YOUR_UNIQUE_UUIDGEN_HERE>,Comment=MyOAICopy the
IdandEtagin 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
Modify the provided
policy_cloudfront.jsonfile in the home directory ofcloud_user.Execute this policy against the S3 website bucket (first changing to the
homedirectory):cd aws s3api put-bucket-policy --bucket <BUCKET_NAME> --policy file://policy_cloudfront.json
- Create CloudFront Distribution
Create a CloudFront distribution:
aws cloudfront create-distribution --origin-domain-name <BUCKET_NAME>.s3.amazonaws.com --default-root-object index.htmlThis will give you a lengthy output. Find and note/save the
ETagandIdof 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
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.jsonModify the following properties in the newly created
dist-config.jsonfile:OriginAccessIdentityunder keyOriginshould beorigin-access-identity/cloudfront/<OAI_ID>(don’t forget to replace<OAI_ID>with the actual OAI ID).PriceClassshould bePriceClass_100.ViewerProtocolPolicyshould beredirect-to-https.
- Update CloudFront Distribution with the Modified `dist-config.json` File
Update the CloudFront distribution with the
dist-config.jsonfile: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.
