React router links in app broken after move to cloudfront + SSL

user_3560724 0
Viewed 3852

I have a react app, using react-router hosted in an S3 bucket, using Route53 as a DNS provider. The app worked fine with the Route53 config pointing to the S3 bucket.

Since I want to use SSL, I created a Cloudfront distribution pointing to the bucket, with an SSL cert., and pointed the DNS to it. Since doing that, none of the links work, (example.com works, but example.com/foo does not). It just returns a NoSuchKey error. I know that this is incorrect, as the key is definitely there, and it was working before.

react-router-v4 reactjs amazon-cloudfront amazon-s3
1 Answers

Problems

  1. Like most web-servers, CloudFront/S3 will throw a 404 if the bucket doesn't contain the object specified by the URL.
  2. Unknown/unidentified objects will automatically throw a 403 if they are not publicly accessible, or don't have the right permissions

Solution

You can have CloudFront return an object to the viewer (for example, an HTML file) when your Amazon S3 or custom origin returns an HTTP 4xx or 5xx status code to CloudFront. You can also specify how long an error response from your origin or a custom error page is cached in CloudFront edge caches.

More resources

user_20200020
Related