CloudFront Route All Paths to Index.html

29 November 2023, by Goodman. Last update at 29 July 2024

To fix problem can use Cloudfront Functions.

Create the Cloudfront Function
Setup the Cloudfront function as the "Viewer request" of the default (*) behavior

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

    if (!uri.includes('.')) {
        request.uri = '/index.html';
    }

    return event.request;
}

By terraform

Create function

resource "aws_cloudfront_function" "redirect" {
  name    = "RedirectToIndex"
  runtime = "cloudfront-js-2.0"
  comment = "Redirect to index.html"
  publish = true
  code    = file("${path.module}/configs/cloudfront/RedirectToIndex.js")
}

Add function to cloudfront

resource "aws_cloudfront_distribution" "this" {
  # piece of code cloudfront setup
  default_cache_behavior {
    viewer_protocol_policy     = "redirect-to-https"
    cache_policy_id            = data.aws_cloudfront_cache_policy.this.id
    response_headers_policy_id = data.aws_cloudfront_response_headers_policy.this.id
    compress                   = true
    allowed_methods            = ["GET", "HEAD"]
    cached_methods             = ["GET", "HEAD"]
    target_origin_id           = var.domain
    min_ttl                    = 0
    default_ttl                = 0
    max_ttl                    = 0
    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.redirect.arn
    }
  }
}