Serving the React App in S3 bucket and cached it with Cloudfront on its edge network will help speeding up access to your React App. You just need to set S3 bucket as Cloudfront's origin and map your domain url to the Cloudfront url on DNS for the 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+jejAAQHlSGAdTRIkFmAGXIbGpvd/PixA9KinXZVOYv1OOBKa7saKYtmuCkuELle=</HostId> </Error>
Other cause of access issues please visit https://aws.amazon.com/premiumsupport/knowledge-center/s3-troubleshoot-403/ for solutions.
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.
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.
403 should be gone by now and you're good to go now :)