S3 Static Website displays different index.html on frontend of website - amazon-web-services

I have static website on AWS. This website displays an error of missing index.html file so i checked the folder and index.html was missing so for confirming the issue I upload another websites index.html which is not public just to check the show. So my website displays the content so finally I upload the index.html file of my original website. But now issue is its showing the other website content on front end not the actual html which is the folder. When I click the index.html file and opens the object URL it redirects me to my original website content but when I open with domain name it shows the other website content.
This is the object URL:
https://s3.amazonaws.com/archiwiz.com/index.html
This is the website URL:
https://archiwiz.com/

Related

static website on s3 gives 404 on refresh for non home page: no such keys error

On clicking/refresh following site https://rrc6k2ykxxxxx.cloudfront.net/example-1
this error comes for all non home page url
I have reactjs App on s3 bucket which is served through cloudfront.
Error:
NoSuchKey
The specified key does not exist.
Key: example-1
what would be best way to redirect refresh on non home pages back to home page? thanks
Assuming this is a single page app (SPA) since this is react - in other words, there is no file in your s3 bucket example-1/index.html?
For single-page apps, whatever is delivering the static contents needs to return the root index.html file for all unmatched paths. In CloudFront, you can click on the distribution, then click on "Error pages", click "Create a custom error response", select 404 for the HTTP error code, select "create a custom error response" and put /index.html in the response page path with a 200 for the response code. You will want to repeat this for a 403 error code.
Just set the Error Page to index.html it will solve the problem. path => Go to aws s3 then in buckets select properties tab and go to Static website hosting
Static website hosting

How to serve static files from GCP Bucket and redirect from any not found path to index.html with status 200 instead 404

I'm working with GCP serving a single page application static files.
for all effects, not found paths, should redirect to index.html and the main script route will display the correct page. our set is:
GCP Bucket -> Load Balancer -> DNS
On the GCP Bucket configuration we set the index.html file as a 'default file' and if the 'not found'. it works like a charm, all routes are redirected to index.html as planned.
However the returned status is 404 instead of 200. This mess up our metrics and performance metrics.
the question is: How serve files for a not found path withn status 200 instead of 404?
for instance /students/1 should serve index.html and the main script should display correct page with status 200. But now is serving with status 404.

Subdirectory pages not found static site hosted on Google Cloud Storage Bucket

I'm setting up a static site on a Google Cloud Storage Bucket with Loadbalancer. The site gets generated with Gridsome and then the dist folder gets saved in the bucket.
I have set the index and error with gsutil like in the [documentation]: https://cloud.google.com/storage/docs/gsutil/commands/web
Now I am facing a problem with how every url for accessing subdirectories gets redirected to dir/index.html. This is desired behavior, the dir/index.html page even exists in the bucket. But I still get a 404 - not found.
If I do a curl to the url subdir/index.html I get the HTML
I do not know exactly how you are testing your subfolder but I think this link can help you with your issue Error 404 when loading subfolder on GCS. In addition, you maybe must to take a look here How subdirectories work.
Based on How subdirectories work on GCS, when browser request URL http://www.example.com/dir it will be redirect (301) to The object http://www.example.com/dir/index.html on content served.
My assumption is there is no route http://www.example.com/dir/index.html on Vue (vue-router). So it will be throw to Not Found 404 page.
The simple solution is try to change all subdirectories link from
http://www.example.com/dir, http://www.example.com/about etc, to
http://www.example.com/dir/, http://www.example.com/about/
It will not redirect to 404 page when you request subdirectories url or reload the browser. But we all know that it's not best practices.

S3 and CloudFront website hosting for multiple SPA redirect to different index.html based by url path

I have a single S3 bucket for multiple Single Page Applications, and enabled static website hosting for this bucket. Bucket has the following folders and files (firstApp & secondApp are folders and correspond to different SPA):
firstApp
index.html
*.js & *.css files
secondApp
index.html
*.js & *.css files
Also I setup CloudFront in front of S3 bucket, default root object is set to index.html.
And now cloud-front-url/firstApp/ displays index.html from firstApp SPA and cloud-front-url/secondApp displays index.html from secondApp.
I need that all incorrect requests redirect to different index.html for specific app based by url path, e.g. if someone requests cloud-front-url/firstApp/non-existing-path - it should redirect to index.html from firstApp and similar behavior for secondApp.
I know how to setup CloudFront to redirect all 404 errors to a single index.html:
select distribution > Error Pages > Create custom error response:
* Http error code: 404
* Error Caching Minimum TTL (seconds) : 0
* Customize response: Yes
* Response Page Path : /firstApp/index.html
* HTTP Response Code: 200
Is it possible with CloudFront to redirect 404 errors to different index.html based on requested path (redirect to index.html either in firstApp or secondApp folder)?
When hosting a static website on S3, it's not possible to have different 404 pages. Generally speaking, one bucket has one 404 error page.
You could host your two applications in two separate buckets. Each would have it's own 404 error page.
Then, in CloudFront, use multiple behaviours pointing to each separate bucket. This way, /firstApp/ goes to bucket1, and /secondApp/ goes to bucket2.

Why is AWS S3 returning a 404 when I can see the file in the S3 Management Console?

I the title pretty much sums up my problem. I have uploaded the files using the web interface, can launch the index.html, but the PDF in an assets folder returns a 404.
The server responds with:
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: assets/PDF/piano0817.pdf
RequestId: 02770C292FC4DBFA
HostId: zSn07EPw7JngHLCdcveteFDJNKATslKDCSKkJSAhsFsbW+gfeVQwvFMu3WMcY513iwt32F/OG1c=```
I have waited the prescribed hour but S3 will still not serve my PDF. What am I doing wrong?
Go to S3 bucket properties -> Static web hosting and add index.html as Error document.
It considers everything as directory once you append something to host URL. Now after adding index.html as Error document, when it doesn't find the required path as a folder, it will go to index.html and redirect your request.