6

I'm setting up React app frontend with Google Cloud Storage and Loadbalancer. During build, index.html and javascript file is uploaded into cloud storage. Loadbalancer points to backend bucket. I can now access react app if I go to http://(loadbalancerip)/index.html

I want to react to handle all routing, and I also want our user to access site via arbitrary path (eg http://(loadbalancerip)/user/details). Is there a way to achieve this with GCP load balancer? Basically I want it to always serve "index.html" regardless of path user is accessing.

Kazuki
  • 1,462
  • 14
  • 34

4 Answers4

3

I confirmed with GCP support that unfortunately it's not supported. Here is a open feature request https://issuetracker.google.com/issues/194125076

Kazuki
  • 1,462
  • 14
  • 34
1

You can achieve this by configuring the website settings on the bucket. Configure the 404 page to serve index.html. When the user hits any random route, they will be served index.html. The only downside I can see is you do get a 404 error in the console, but that doesn't seem to affect operation at all.

My loadbalancer is configured with only the default rule, serving all traffic to the bucket backend (no additional url map rules).

enter image description here

Dave C
  • 135
  • 2
  • 13
0

What's happening here is that your load balancer is trying to serve the path (and therefore the associated index.html file) to your users but of course in react there is only one index.html and all the routes within it are controlled by the JS router.

What you can do with cloud storage is assign a "not found" or error page, as mentioned in another answer, where you configure what happens if the file eg, /blog/my_post that the user tries to visit doesn't exist. GCP calls these kinds pages "specialty pages".

You can configure a specialty page, as discussed here:

https://cloud.google.com/storage/docs/static-website#specialty_pages

Hope this helps!

JK Gunnink
  • 106
  • 6
-2

Assuming you are using HTTP(S) External Load Balancer, what you are looking for is URL rewrite.

jabbson
  • 4,390
  • 1
  • 13
  • 23
  • 1
    This link says "Important: The rewrite is prepended to the path as is. Full path rewrites are not supported. HTTP(S) Load Balancing only implements path prefix rewrites". Can you provide example of rewrite config that allows me to rewrite everything to index.html? – Kazuki Jul 11 '21 at 14:13