I have a Nuxt 3 (v3.11.2) application that I’m trying to deploy to an AWS S3 bucket and serve using Cloudfront / Route53 for the domain.

In my nuxt.config.ts I’m using ssr: false and then running nuxi generate to create the static files. I then upload these to the s3 bucket using the aws-cli and invalidate my Cloudfront distribution.

I have a Cloudfront distribution behaviour (lambda trigger) to redirect traffic to /index.html:

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;
}

If I visit the site directly on the https://examplesite.com everything is great and I can navigate around. If I’m in a sub directory https://examplesite.com/something/:id everything works until I reload the page. If I refresh the page I get a AccessDenied error from Cloudfront.