Rewriting URLs Using CloudFront Functions

I got past the access denied error for nielmclaren.com. I changed the S3 bucket to block public access, then used Origin Access Control to grant CloudFront permission to access the bucket.

When you choose Origin Access Control from the S3 bucket Permissions tab, there’s a “Copy policy” button that will give you the bucket policy you need to allow access.

Now, requests to the homepage work great. The next problem is with subdirectories.

In S3 I can set the default root object to index.html so / gets redirected there. The problem is that this only works in the root directory. So blog/ does not get redirected to blog/index.html.

There are a bunch of possible solutions for this:

• I could go back to S3 static website hosting but then I’m stuck with HTTP, no HTTPS.
• I can insert a Javascript snippet to rewrite all link URLs to append index.html if needed. Downside is that external links to my website would need to include index.html at the end. I prefer technology-agnostic URLs.
• Use a Lambda@Edge but now you’re maintaining and paying for a Lambda@Edge.

…and the winner is…

CloudFront Functions!

I just found another option. Create a CloudFront Function with the following code:

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } 
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}

Then, create a Behaviour to associate that function with the distribution.

This is great because I get HTTPS, I don’t have to pay for a Lambda@Edge, and this all happens on the server side so the URLs while navigating the website stay nice and clean.

Phew.

Well, my website is up now. Hello world.