2

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 !

Improve this question
10
  • which framework you are using ? angular or react or simple html ?
    – Avinash Dalvi
    Commented Jun 3, 2020 at 7:49
  • S3 and cloudfront doesnot know about rewriting rules. we need to configure some rules. see this can help you stackoverflow.com/questions/50299204/…
    – Avinash Dalvi
    Commented Jun 3, 2020 at 7:50
  • @aviboy2006 We are using angular framework..
    – XamDev
    Commented Jun 3, 2020 at 8:12
  • try my answer mention above.
    – Avinash Dalvi
    Commented Jun 3, 2020 at 8:13
  • Have you try this approach ? @xamdev
    – Avinash Dalvi
    Commented Jun 3, 2020 at 8:37

3 Answers 3

Reset to default
4

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.

Improve this answer
2
  • 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
    Commented Jun 3, 2020 at 8: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
    Commented Jun 3, 2020 at 8:22
2

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.

Improve this answer
0

I used the alternate domains like mentioned above, but needed to remove optional the index.html from the "default root object". My use case was to redirect subdomain.example.com to example.com/subdomain. I pointed the cloudfront alternate domain to subdomain.example.com, created an S3 with subdomain.example.com as name for origin, and in the S3 made the site redirect to the path rather than host the objects in the properties, and static hosting.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.