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

Question

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

Answer 1

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.

Answer 2

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.