React App served via S3 + Cloudfront getting 403 Access Denied

#cloudfront #s3 #aws #react

Serving the React App in S3 bucket and caching it with Cloudfront on its edge network will help speeding up the web app load time. All you need to do is just setting up S3 bucket as Cloudfront's origin and mapping a custom domain url to the Cloudfront url on DNS for it's distribution to work.

Ideal setup isn't it? But when you access the path to React App, and you see 403 Access Denied as followed:



<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>FYHS010933j</RequestId>   
  <HostId>iboleABhadhISamHT+je56AQHlSGAdTRIkFmGAXIbGpvd/PixA9KinXZVOYv1OOBKa7saKYtmuCkuELle=</HostId>
</Error>

It could mean that you bucket policy does not allow access to the bucket files. Hence, please verify your bucket policy to allow the GetObject permission.

In my case, I have also turned off Block public access so that public can request for the objects.

Other cause of access issues please visit https://aws.amazon.com/premiumsupport/knowledge-center/s3-troubleshoot-403/ for solutions.

Then, make sure your bucket has enabled static web hosting. Find the configuration in bucket > properties > scroll to bottom.

Next, check your Cloudfront distribution settings. To clarify, let's create a new Cloudfront distribution with Origin settings as followed:

Note on the HTTPS settings if you plan to use one, otherwise default to HTTP setup.

Then, input the alternate domain name, this is the domain url that you're going to map on the DNS after this Cloudfront distribution is created.

Secondly, choose a SSL cert if you have one. Then, make sure you have index.html as default root object.

DNS CName mapping:

Once all of the above has been performed, you should be able to access the root path of your React App. However, if you are still getting 403 access denied on a specific React route, it is because S3 will try to locate that object in the bucket with the path, and clearly that object does not exist.

This can be resolved by returning a custom error response in Cloudfront that handles the HTTP 403 Response, the custom response should direct to the path at index.html and return 200 code. This way, HTTP request will not error out, instead, react will route correctly within the app.