Reports

I don't know much about Gatsby but I'm guessing that it's generated a structure like this which you've deployed to your S3 bucket?

/index.html
/path1/index.html
...etc

And you want GET / to return the content from index.html, and GET /path1 to return the content from /path1/index.html etc.? And your plan to do this was to set /index.html as the 403 custom error response?

If I've understood that correctly, then this isn't going to work as you want. If you've set things up as described I would expect GET /path1 to return the content from /index.html.

One way of getting this working as you want is to change the 403 custom error response to something more appropriate (i.e. a /404.html page) and then associate a viewer-request function with your CloudFront distribution that rewrites requests to include /index.html at the end of the path if needed. Something like:

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  if (uri.endsWith("/")) {
    request.uri += "index.html";
  } else if (!uri.includes(".")) {
    request.uri += "/index.html";
  }
  return request;
}

Here's a CloudFormation template where this is set up if you want to see how it all fits together (disclaimer: this is my github repo).

79552420