I have recently deployed a published Node.js application via Amazon S3 static website hosting. After deployment, I noticed that we get the 404 error message while refreshing the pages. After a few searching, I got the reason behind it. I found that the application required a special configuration for routing like .htaccess in Apache servers. But here is the issue, we can’t use the .htaccess file with S3 static website hosting.
In this tutorial, we will discuss solving this issue with the options provides under the S3 configuration. Also, provide you with instructions to fix this issue for the users using the Cloudfront.
Amazon S3 (Static Website Hosting)
Amazon S3 uses index.html as default index file. If your application is hosted on Amazon s3 static website hosting. You just need to configure index.html in the Error document.
Go to the application S3 bucket -> Properties -> Static website hosting and set the Error document as showing in below image:
Amazon CloudFront
In the case of using Amazon Cloudfront with an s3 bucket, You also need to configure the Error pages in Cloudfront.
Edit the Cloudfront -> Error pages. Now create a custom error response for 404 to index.html. You can also do the same for the 403 error code.
Conclusion
This blog post helped you to resolve the 404 error with Amazon S3 and Cloudfront.