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

Question

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.

Answer 1

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

• How CloudFront Processes and Caches HTTP 4xx and 5xx Status Codes from Your Origin
• Creating a Custom Error Page for Specific HTTP Status Codes
• How can I troubleshoot the HTTP 404 error "NoSuchKey" from Amazon S3?
• CloudFront: Custom Error Pages and Error Caching