CODEWITHSUNDEEP
reactjsamazon-s3react-router-dom
jamesdeath123
jamesdeath123

Reputation: 4608

static website hosted in s3: pages return 404 after refresh

With this bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mypage.com/*"
        }
    ]
}

I am deploying a website that is build by reactJS v16+ (react-router-dom v5), and when I open the url, it works perfectly, e.g. from mypage.com, the that goes to /list works fine. Url is loaded as mypage.com/list and the page content is displayed.

However on any child page that is not homepage, for example mypage.com/list, once I refresh the page with browser, it returns S3's 404:

404 Not Found

    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: list

I don't even know how to debug this... any idea?

Upvotes: 22

Views: 8610

Answers (3)

SAURABH
SAURABH

Reputation: 89

Issue is your s3 bucket is not able to find error page, so you have tell it to use index.html file as for error case also.

Follow the steps below to resolve the issue

  1. Go to the property of the s3 bucket.
  2. Go to Static website hosting and click on edit button.
  3. On the error page text field, enter your index.html file.

Then save

Boom issue is resolved.

Upvotes: 0

devbear
devbear

Reputation: 101

So, I had the same experience today, and the answer by @jamesdeath123 helped me too know the cause. In my case I am using create-react-app, so I was finding a way to generate the error.html to be used in s3 bucket. I realized though, that all I need to do is to set the error page to index.html as well.

Upvotes: 10

jamesdeath123
jamesdeath123

Reputation: 4608

As @Panther mentioned in the comment, the right way to go is to add an error fallback to index.html in the S3 bucket's static web hosting configuration.

The reason of this is when a URL is hit (either by manual input in the browser or a refresh), it sends a request to /list to the S3's root server (the one managed by AWS) before it hits our bucket. That S3 server have no idea if this is a reactjs app or not, so it goes into the bucket to look for the /list in the root of my bucket, which doesn't exist, so it returns the 404 error.

However by adding the error fallback, now when it gets 404, it redirects the request to index.html, where the react app defined and loaded into. In this case, the /list will go through the normal flow to reach the right router that handles page rendering, problem solved.

Upvotes: 23

Related Questions