Amazon’s CloudFront allows you to distribute your static S3 website around the world, giving it performance gains reminiscent of Arnold on Dianabol. It also allows you to easily (and I mean really easily) enable HTTPS for your site when coupled with Certificate Manager.
“Wow that sounds great,” I hear you saying as you close this tab and rush off to the CloudFront console1. That’s cool, let me know when your site breaks.
Back yet? What happened was that in Origin Settings you probably picked one of your internal buckets which so conveniently appear under Origin Domain Name.
~Buzzer~ – Wrong!
As mentioned in the article, you have to instead paste in your S3 endpoint, which you find in the S3 console.
“Remember me?” - S3 Console
I think the article’s explanation for why this happens isn’t hella coherent. Essentially, if you pick an internal S3 bucket, then CloudFront will only be able to access those objects verbatim. It will find
example.com/post/index.html, but it will throw an error if you try to access
example.com/post/. Since the former is ugly and most websites use extensionless URLs, this will probably result in your website breaking. You have to use your S3 endpoint so that CloudFront grabs your files through the S3 server rather than the internal bucket.
Note also that whenever you modify your site, you should invalidate your CloudFront distribution (that is, kill the cache that is holding your pages hostage). You can find out how to do that here, with an example using Travis here.
So, what’s the life lesson here? I can’t think of any. Bye!
This is what happened to me with the article linked above. If I hadn’t skimmed it, I could have saved a few hours of frustration. ↩