23

I'm trying to serve a static website using GCP and Google Cloud Storage. I have done everything specified here https://cloud.google.com/storage/docs/hosting-static-website

Say I have the following file structure:

- index.html
- folder
    - index.html
    - another.html

I enter www.example.com/folder.

It redirects to www.example.com/folder/index.html => index.html is undesired

But if I enter www.example.com/folder/, it doesn't redirect and serves correctly the index.html page transparently.

How do I prevent the first behavior? Or automatically add a trailing slash?

Thanks!

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
Danetag
  • 496
  • 6
  • 9
  • 4
    Did you manage to find a solution to this? The answer citing setting the MainPageSuffix doesn't solve the problem. – Will Viles Sep 14 '18 at 09:57
  • facing this issue as well. this is annoying. was thinking about using a small javascript snippet to "spank" the `.../index.html` to `.../` – Jossef Harush Kadouri Feb 26 '20 at 09:03
  • You have to describe routing rules in app.yaml. How does your app.yaml look like? – V.Tran Jun 10 '20 at 23:28
  • @V.Tran they're describing Google Cloud Storage static website hosting - it's not related to app engine. – Louis Sayers Jun 11 '21 at 08:16
  • @JossefHarush This tutorial explain how to host a static website (Usually a single page web app built on Angular or React, these website routing won't work well if hosted using bucket. https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website#:~:text=You%20can%20use%20Google%20App,Engine%20provides%20a%20free%20tier. – V.Tran Jun 11 '21 at 16:16
  • @LouisSayers The purpose is to host a static site. You bind one solution into the problem, which is hosting a static site using GC Storage. – V.Tran Jun 11 '21 at 16:41
  • @V.Tran - yes that is a solution, but it is not the answer to this question. Specifically they want to know about routing rules within GCS. Basically what you're saying is "don't use GCS", but that's not helping in solving this issue, it's simply diverting someone away from this technology to a different one. – Louis Sayers Jun 12 '21 at 22:23
  • 2
    For anyone experiencing this issue, you might want to follow https://issuetracker.google.com/issues/151713401 – Louis Sayers Jun 15 '21 at 06:34
  • @LouisSayers "but that's not helping in solving this issue" - You seem to stick to the issue "Go to New York by bike" rather than "Go to New York" and the solution open to whatever effective way you can get there. Do you see that the other solution also suggests Firebase to host a static website instead of sticking to gcp storage? This is the first lesson engineers need to learn: Identify the actual problem they are trying to solve. However, I do see many engineers formulate their problem as "Go to New York by bike". – V.Tran Jun 16 '21 at 19:51

5 Answers5

2

As per https://cloud.google.com/storage/docs/hosting-static-website this behaviour is intended. As to whether it's desirable, that's a bigger issue.

For example, say you set the MainPageSuffix of your static website to index.html. Additionally, say you have no file named directory in your bucket www.example.com. In this situation, if a user requests the URL http://www.example.com/directory, Cloud Storage attempts to serve the file www.example.com/directory/index.html. If that file also doesn't exist, Cloud Storage returns an error page.

The MainPageSuffix also controls the file served when users request the top level site. Continuing the above example, if a user requests http://www.example.com, Cloud Storage attempts to serve the file www.example.com/index.html

Unfortunately I do not know of a way to automatically add the trailing slash. Perhaps you could add a message on index.html to the tune of "Did you mean to go to http://example.com/thisfolder/ instead of http://example.com/thisfolder/index.html", but this is something of a kludgy workaround.

J. Olsson
  • 98
  • 8
  • 5
    I've read the documentation indeed, but it should serve `index.html` in the background, and not actually do a 301 redirect. It works for the root directory. `www.example.com` does not get `index.html` attached, but once you go to a subdirectory, the `index.html` is added (by redirect) – Poul Kruijt May 03 '19 at 20:15
1

Firebase Hosting might be easier than using a bucket, because one can define rewrite rules there.

Martin Zeitler
  • 1
  • 19
  • 155
  • 216
  • Even though this doesn't really answer the question, it does provide a very interesting alternative. So it probably shouldn't be marked as answer, but you'll get the bounty :) – Poul Kruijt May 09 '19 at 07:22
  • @PierreDuc with [gsutil](https://cloud.google.com/storage/docs/gsutil/commands/web) it might not be possible to set `index.html` as an actual "directory index" for a bucket, alike apache2 has it as directive. one bucket per such directory might be the only option ...it actually reads "main page" (`MainPageSuffix`) and not "directory index". – Martin Zeitler May 09 '19 at 07:49
  • Thanks for the heads-up! There seem to be a lot of interesting redirection options though, strange that I've never noticed firebase hosting before :) – Poul Kruijt May 09 '19 at 08:52
-1

You should be able to set the MainPageSuffix to the index.html accordingly. For more information, check the additional notes available in public documentation link. Reference example can be found in the same documentation.

Syntax:

gsutil web set [-m main_page_suffix] bucket_url
N Singh
  • 317
  • 1
  • 9
-2

If you follow the tutorial above, then you must have a app.yaml file to describe your routing rules. Here is an answer for that:

Angular 7 Routing in Google Cloud App Engine not working

V.Tran
  • 457
  • 1
  • 5
  • 13
-2

Check this out

https://cloud.google.com/storage/docs/gsutil/commands/web#description

The main_page_suffix applies to each subdirectory of the bucket. For example, with the main_page_suffix configured to be index.html, a GET request for http://www.example.com would retrieve http://www.example.com/index.html, and a GET request for http://www.example.com/photos would retrieve http://www.example.com/photos/index.html.

user12293923
  • 11