Failed to load resource: the server responded with a status of 404 (Not Found) AWS s3

0

I want to deploy a React Vite project to AWS S3. It didn't say "NoSuchKey" or anything else. In the console, it said "Failed to load resource: the server responded with a status of 404 (Not Found)" with "index-4e255f60.js:1" and "index-b8da4848.css:1". Enter image description here Enter image description here

I enabled static web hosting. It is public access. I also set index document and Error document as "index.html".

I also tried to run "aws s3api head-object --bucket natkuma-portfolio --key object.jpg" on my terminal, I got result:

An error occurred (InvalidAccessKeyId) when calling the ListObjectsV2 operation: The AWS Access Key Id you provided does not exist in our records.

What is that mean? How can I fix it? I am new to AWS and try to host projects on AWS instead of githubpages

1 Answer
1
Accepted Answer

Hello.

I think the cause of the error is that the file could not be found in S3.
Is the file path such as "index-4e255f60.js" specified in index.html correct?
Also, try changing the paths specified in "href" and "src" as shown below.
Try removing the leading "/".

src="portfolio/assets/index-4e255f60.js"
href="portfolio/assets/index-b8da4848.css"

An error occurred (InvalidAccessKeyId) when calling the ListObjectsV2 operation: The AWS Access Key Id you provided does not exist in our records.

This error may occur because the correct IAM user access key is not set up on your PC.
Did you set the IAM user's access key and secret access key correctly in the "aws configure" command?
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html#cli-configure-files-methods

IAM user access keys can be created by following the steps in the document below.
https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_CreateAccessKey

profile picture
EXPERT
answered 13 days ago
profile picture
EXPERT
reviewed 13 days ago
  • I took off the "/" on my index.html. Also created an access key and a secret key and run "aws configure" in terminal. Then I run "aws s3api head-object --bucket natkuma-portfolio --key object.jpg " again. It still shows a blank page, and "the server responded with a status of 404 Not Found" in the console.

    The file path I changed it to "natkuma-porfolio/assets/index-4e255f60.js" instead. I realized the folder name was incorrect. However, the ending part: "index-4e255f60.js", I'm not sure where it comes from. It just happened there after I run "npm run build".

    I uploaded my project on Github before. I also used React Router and a couple other libraries in the project. Would that be the reason I keep getting the 404?

  • I think the following blog will be helpful for setting up React apps to be hosted on S3. https://blog.tericcabrel.com/host-static-website-aws-s3-cloudfront/
    By the way, I think the file path is "assets/index-4e255f60.js", what do you think? bucket name at the beginning of the file path (natkuma-porfolio) is not required.

  • Thank you so much, Riku; the link is very helpful. Yes, and the path is "assets/index-4e255f60.js" .

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions