I've developed a React application and deployed its created build to an S3 bucket. The application is with various pages such as sign in, signup, and user/*.
Problem:
However, after setting up a CloudFront distribution for the S3 bucket (e.g., https://d4cvljufvoog1.cloudfront.net), accessing specific routes directly through the CloudFront URL results in an "Access Denied" error. For instance, when navigating to ``https://d4cvljufvoog1.cloudfront.net/signin,
however https://d4cvljufvoog1.cloudfront.net that is working but when i hit signin page that is also in build but getting access denied issue also i have added in distribution behavior
following error is encountered:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>8545M4YXSVV59542</RequestId>
<HostId>Hj247UsHnGHPCl1yyFRAWPAKDUVtKrSUnHN8mcyQMEzxiKeynWhpzfONp1t0fEKPhO6eM63vY3Q=</HostId>
</Error>
Actions Taken: I've configured CloudFront behaviors to match the paths of the application, including /signin, with the same S3 bucket.
Request for Assistance: What steps should I take to troubleshoot and resolve this issue? I need guidance on ensuring CloudFront properly serves all routes from the S3 bucket without encountering access issues from the same bucket
like
https://d4cvljufvoog1.cloudfront.net/signin
https://d4cvljufvoog1.cloudfront.net/signup
When working with ReactJS application in S3 + CloudFront combination, besides adding a behavior, it's necessary to add Error pages. In error pages tab, you should add error pages for these 2 HTTP codes:
For both of these status codes, HTTP response code should be set to 200 and Response page path should be set to /index.html. The reason is that for ReactJS you don't have signin or some other files so that's why S3 is returning error. Instead, when you get this error, you redirect it back to index.html and that's when React's router takes over and send you to proper page.