static website hosted in s3: pages return 404 after refresh

Question

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?

Answer 1

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.

Answer 2

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.