Search code examples
amazon-web-servicesamazon-s3amazon-cloudfront

How to get clean URLs on AWS Cloudfront (S3)?


I'm hosting my static website on AWS S3, with Cloudfront as a CDN, and I'm wondering how I can get clean URLs working.

I currently have to go to example.com/about.html to get the about page. I'd prefer example.com/about as well as across all my other pages. Also, I kind of have to do this because my canonical URLs have been set with meta tags and search engines, and it's gonna be a bit much to go changing them.

Is there a setting in Cloudfront that I'm non seeing?

Updates

There are two options I've explored, one detailed by Matt below.

First is trimming .html off the file before uploading to S3 and then editing the Content Header in the http for that file. This might work beautifully, but I can't figure out how to edit content headers from the command line, where I'm writing my "push website update" bash script.

Second is detailled by Matt below and leverages S3's feature that recognizes root default files, usually index.html. Might be a great approach, but it makes my local testing challenging, and it leaves a trailing slash on the URLs which doesn't work for me.


Solution

  • Try AWS Lamda@Edge. It solves this completely.

    First, create an AWS Lambda function and then attach your CloudFront as a trigger.

    In the code section of this AWS Lamda page, add the snippet in the repository below.

    https://github.com/CloudUnder/lambda-edge-nice-urls/blob/master/lambdaRewrite.js

    Note the options in the readme section of the repo