AWS Cloudfront / S3 website redirection issue

Question

We are using cloudfront for one of our website. So, to work with cloudfront we have setup s3 bucket and added all files in it. Then to use custom domain we have created a record set in Route53 and given cloudfront url. This everything is working fine.

However, we are facing redirection OR page refresh issue for our site. Let say if we are on some inner page 'https://www.example.com/my-page' and we refresh the page then page is not displayed and we are getting below error.

<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>my-page</Key>
<RequestId><some-request-id></RequestId>
<HostId><some-host-id></HostId>
</Error>

And this issue is occurring for all pages.

i have tried setting redirect url for s3 bucket; but it seems it always redirect to login page.

Any help on this appreciated !

which framework you are using ? angular or react or simple html ? — Avinash Dalvi, Jun 03 '20 at 07:49
S3 and cloudfront doesnot know about rewriting rules. we need to configure some rules. see this can help you https://stackoverflow.com/questions/50299204/receive-accessdenied-when-trying-to-access-a-reload-or-refresh-or-one-in-new-tab/50302276#50302276 — Avinash Dalvi, Jun 03 '20 at 07:50
@aviboy2006 Yes.. i tried.. But its not working.. it still redirecting to login page.. but now it is not showing the error which i posted — XamDev, Jun 03 '20 at 08:40
Error gone right ? . you can add new question for this error. in this you have to mention details error. Also if this help you don't forget to upvote on answer and question. — Avinash Dalvi, Jun 03 '20 at 08:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215217/discussion-between-aviboy2006-and-xamdev). — Avinash Dalvi, Jun 03 '20 at 08:54

Tom · Answer 1 · 2020-06-03T08:15:36.853

3

I'm assuming that you're using simple HTML. If you're using a framework like React or Angular then the problem might lie there rather than Cloudfront.

This can happen when the Cloudfront distribution is set up to point to the S3 bucket rather than the S3-as-website endpoint URL.

Go the the Cloudfront distribution and check the origin group. Your origin should look something like this BUCKET_NAME.s3-website-eu-west-1.amazonaws.com and NOT like this BUCKET_NAME.s3-eu-west-1.amazonaws.com.

This is an easy mistake to make as the option they give you when setting up the distribution - the bucket - is not actually the one you want. You need to copy the endpoint url from the S3 settings and paste it into the box.

edited Jun 03 '20 at 08:15

answered Jun 03 '20 at 08:04

Tom

1,447
1
12
26

This is one of check can do to verify about setting. In case angular it not make much impact. this issue happen when you static html using folder and index.html. Upvoting you answer because this is helpful in other context. – Avinash Dalvi Jun 03 '20 at 08:14
1

OK, thanks. I've set up quite a few sites on S3 with React and React Router only works properly when the Cloudfront distribution points to the index.html entry point as website url. – Tom Jun 03 '20 at 08:22

score 1 · Answer 2 · answered Jul 20 '20 at 15:19

I don't know if this will solve your issue, but one thing it's easy to miss out when setting up your Cloudfront distribution is to add your domain (in this case www.example.com or example.com) to the 'Alternate Domain Names (CNAMEs)' setting under 'General' for the distribution.

AWS Cloudfront / S3 website redirection issue

2 Answers2