Skip to main content

Demo - Adding CloudFront distribution to S3 Static Website

  1. Log into AWS and select the N. Virginia region
  2. Deploy a static website in S3 here.
  3. Open up the S3 bucket.
  4. Notice that this thing opens up in a non secure http protocol.
  5. Navigate to the CloudFront console and open in a new tab.
  6. Click New Distribution.
  7. Origin domain - S3 buckets
  8. Origin path - specific path - leave blank for root of the domain.
  9. Viewer protocol policy - set to HTTP and HTTPS
  10. Cache policy and origin request policy - caching optimized set.
  11. Use all edge locations set - this is a global app, remember?
  12. Alternate domain name will be used in a later demo
  13. Custom SSL certificate will be used later, leave this blank
  14. HTTP/2 checked.
  15. Default root object needs to be set to index.html so that we point this distribution to the end of the root url.
  16. IPv6 on by default
  17. Create distribution and wait for it to deploy
  18. Visit the distribution by opening up the URL in your browser - https://d4xg79avkp1h0.cloudfront.net

Part 2 - Messing with this​

  1. Replace one of the images with a new image and upload to S3.
  2. Refresh the CloudFront distribution (no new image)
  3. Refresh the S3 static website directly (new image)
  4. Refresh the CloudFront distribution again (no new image)
  5. Become frustrated.
  6. A workaround is to perform an invalidation or version your image.
  7. Navigate back to the Cloudfront console and click on the distribution.
  8. Click on the invalidation tab and click Create Invalidation and add /* into the invalidation
  9. Refresh the CloudFront distribution link. (new image!)
  10. Oh. open up your CloudFront distribution URL as https:// - that works too.
  11. Leave this in place for the next demo.

Demo - Adding a custom domain and HTTPS

You need a domain name registered in Route53 to do this demo.

  1. Navigate back to the CloudFront console
  2. Click your distribution and click edit.
  3. Change the CNAME to your custom domain name. I used rolex.babyyoda.site.
  4. Click Request Certificate
  5. Enter in your FQDN here and choose DNS validation.

image.png 6. Request the certificate 7. Refresh and you should see the certificate issued. Click on this and you can click on the Add Record to Route53. 8. Refresh the ACM console and your domain should move into a Successful Validation status.
image.png 9. Navigate back to the CloudFront distribution, click the refresh icon and then select the certificate from the dropdown. image.png 10. Leave the rest of the default and Save Changes. 11. Wait for this to move to the deployed state and then go into the Route53 console 12. Create a simple record for your custom domain. 13. Route this to your CloudFront distribution. image.png 14. Open your custom domain both as http and https and notice that it loads.

Demo - Using OAI

  1. Navigate to the S3 console
  2. Open up the bucket and click on the permissions tab to view the policy
  3. Notice that this is an open policy to allow everyone to access.
  4. Navigate to the CloudFront console and click on the distribution.
  5. Click on the Origins and then edit the origin.
  6. Select Yes use OA and click on Create New OAI
  7. Click on Yes, update the bucket policy to automatically update the bucket policy
  8. Refresh the bucket policy and remove the statement that allows all access.
  9. Try to access the site via the static website endpoint and you'll get a 403 error.
  10. Access via the custom domain that you've created and you are allowed to access.

Clean up​

Delete the distribution - disable first Remove Route53 records acm and the one pointing at the CloudFront distribution Delete SSL certificate from ACM Delete the OAI Delete the static website bucket