Structuring URLs for AWS Certificate Manager and CloudFront
I set up SSL/TLS on both webinista.com and this blog using AWS Certificate Manager. Certificate Manager makes makes it absolutely trivial to add SSL/TLS support to an AWS CloudFront distribution. What's more, certificates are free.
Adding a certificate is easy, but if you have a directory-style URL structure as this blog once did, you'll need to rewrite your URLs and links.
This is only a problem if you're using CloudFront and S3 over HTTPS.
Using CloudFront with an S3 endpoint over HTTP
For an HTTP-only CloudFront distribution, use an S3 endpoint URL as the Origin Domain Name. Your CloudFront distribution will behave the same way as your S3 endpoint. Redirects will stay intact. Your index document will be served when a user requests a sub-directory; e.g.: http://example.com/path-to-post/index.html
will be served for requests to http://example.com/path-to-post/
.
Using HTTPS with CloudFront and S3
HTTPS-only CloudFront distributions, however, work differently for two interrelated reasons.
- Amazon S3 does not support HTTPS for website end points; and
- CloudFront does not support index documents for subdirectories, only distribution roots.
Solving problem 1 is easy. Use the S3 bucket for your web site as the Origin Domain Name instead of the S3 end point. Solving problem 2 is a little tougher.
CloudFront doesn't support index documents for subdirectories
CloudFront does support default root objects. A default root object is returned whenever a user requests the root of your distribution. If your root object is homepage.file
, for example, that's what visitors will see when they request https://example.com/
.
CloudFront does not, however, support index documents. A request for a subdirectory will return an empty directory object to the user. To work around this problem, use and link to files.
Put another way, https://example.com/path-to-post/
won't work as a link. URLs such as https://example.com/path-to-post/index.html
, https://example.com/path-to/post.html
or https://example.com/path-to-post/index
will.
Don't forget to set a Content-Type: text/html
header.
For this blog, that meant updating all of my internal links to point to /subdirectory/index.html
instead of /subdirectory/
. Since Webinista.com is a single-page site, the root object was enough.
One other thing to remember: update your site's src
and href
attribute values to use relative (e.g. //yourdomain.com/
, /css/style.css
) or https://
URLs.
To make this all work with your domain, create an alias that points to your CloudFront distribution.