CODEWITHSUNDEEP
node.jsangularamazon-web-servicesamazon-s3amazon-cloudfront
Janier
Janier

Reputation: 4412

s3 cloudfront app Code: NoSuchKey on refreshing

I have my angular2 webapp hosted in s3. it has cloudfront as well. Its connecting to nodejs as backend which is in different machine in AWS EBS.

My web application works fine.But when i refresh any page , its throwing 404 Not Found with the below message.

Code: NoSuchKey
Message: The specified key does not exist.
Key: user/adduser/edit
RequestId: CA306FFABB30FB75
HostId: WAp7/BZMHH0UpE3z2dJLJT4gqEwv7u/LKbFTUuHH86lRyReLXvODLgTuTw+3emnTJ3jDj2VpiYo=

Can you help to resolve this?

Upvotes: 8

Views: 4365

Answers (4)

Shresth Ojha
Shresth Ojha

Reputation: 21

I was having the exact same issue with my S3 website endpoint. The issue arises when you use some internal routing in your angular/react app which changes the URL. So, now the S3 tries to find the new file that is in your URL but fails to do so because in the build folder, there is just a single index.html file which handles the routing on its own.

Let's understand with my example. Let's say the S3 endpoint is: http://bucketname.s3-website.region.amazonaws.com.

So, when I was trying to access http://bucketname.s3-website.region.amazonaws.com or http://bucketname.s3-website.region.amazonaws.com/index.html, everything was working fine, even on refreshing the page. Now, my website has a default route '/dashboard'. When the page loads on the root route '/', it gets redirected to '/dashboard' which works fine. But when I refresh the page, the URL changes to http://bucketname.s3-website.region.amazonaws.com/dashboard. So, now the S3 tries to find this file called 'dashboard' in the bucket but it fails to do so hence the error "The specified key does not exist".

The solution is simple and it is to return an error page on every such error. This error page should be set to "index.html". So now when I access http://bucketname.s3-website.region.amazonaws.com/dashboard, S3 knows that it will throw an error, so it returns the index.html page which by itself handles the routing according to your angular/react app and it shows the dashboard page properly.

Steps to set this error page:

  1. Go to your S3 bucket in AWS console.
  2. Go to 'properties' tab (just beside the 'objects' tab)
  3. Scroll all the way down to 'Static website hosting' section.
  4. Click the 'Edit' button to change the settings.
  5. You will be able the see the 'Error document - optional' text field.
  6. Type in 'index.html' and save the changes. Screenshot of the settings page

Now everything should work fine! Do support by upvoting if you found this useful and let me know if there can be any improvements or updates in this answer.

Upvotes: 2

Ergin
Ergin

Reputation: 9356

I was getting the same error but using GCP (Google Cloud Platform) storage buckets instead of Amazon S3. As @janier mentions configuring my app's main index page and error page settings to index.html resolved the issue.

In GCP go to your storage bucket in question and use the right side menu to access the Website Configuration as seen below:

GCP Bucket Configuration

In the following modal set your index and error pages to index.html

enter image description here

Then simply refresh your app and it should fixed!

Upvotes: 0

Sam S
Sam S

Reputation: 21

I was having this error that looks very similar to yours: error 404: no such key on refreshing S3 website webpage.

Try adding "index.html" in the S3 bucket configurations:

  1. Edit static website hosting
  2. Set "Error document - optional"
  3. and type "index.html"

This solution fixed my problem and I am confident that it will also fix yours.

Upvotes: 2

Janier
Janier

Reputation: 4412

I am not sure if its the correct thing to do.But it fixed my issue. I configured s3 404 redirection url to be my index.html.ie pointed my 404 redirection to index.html itself. It worked.

Upvotes: 20

Related Questions