Configure Google Load Balancer host and path rules to serve react.js application properly with GCF

Question

We are going to use Google Cloud Load Balancer with React.js application. React.js application has special routing rules. We are going to organize our application structure in the following way.

-[BUCKET]uiresources
  -[FILE]index.html
  -[FOLDER]dist
    -[FILE]src.bundle.js
    -[FOLDER]...
    -[FILE]

Also we need to route api calls to GCF endpoints. That means that they should be proxied to another domain, that, seems to be impossible because we configuring backend-service with VM as a target.

Example of routing

/ ---------------------------> /index.html (To storage bucket)
/index.html --------------> /index.html (To storage bucket)
/signup -------------------> /index.html (To storage bucket)
/someroute --------------> /index.html (Still to storage bucket)
/api/signup ---------------> anotherhost.com/signup (To GCF endpoint with long url)
/resources/images -----> /resources/images (To storage bucket)

We can say that in another way, like, if our route contain dot, that will mean that we requesting file, then return appropriate file, otherwise always return index.html.

It is possible to use subdomains if it will help to build such navigation. For example:

Another routing example

https://targetdomain.com/api or https://api.targetdomain.com -> for services call
https://targetdomain.com/resources or https://resources.targetdomain.com -> - for resources loading including index.html
https://targetdomain.com/[^index.html] -> for direct routes from browser for which index.html will be returned

So, the question is just how? I setup load balancer using tutorial and tried to configure the rules here, but I didn't have any luck with it. I started from index.html issue and this is what I have at the moment.

Previously I've managed this on Azure and on simple nginx server, but on this two platforms more powerful routes configurations is available. I don't know if it possible here, but hope someone can help me with that.

All the VM instances are running under Debian 8 with Apache server. I though about routing rules inside each VM instance, but for me it looks a little bit crazy now and something that will bring a lot of troubles in the future.

Tuxdude Tuxdude · Accepted Answer · 2017-06-27T00:31:31

URL maps

The URL routing you're configuring is referred to as a URL map in GCE HTTP/HTTPS load balancer configuration.

Capabilities and restrictions

I would recommend you read about URL maps to understand how it works. To be specific, you will need to understand the capabilities and the restrictions of URL maps in load balancing.

This list is not comprehensive, but more suited to your specific use case:

You can add rules based on host names and paths. Host matches the host name for the request. For each host, you specify a path matcher (which is a collection of different path strings) to specify the paths to match (Eg. /foo/*, /bar/*, /foo/bar/baz/*). These are exactly the text boxes you see in the configuration UI. Paths column in the UI corresponds to the path matcher.
You can set up different rules for the same path string as long as they are for different hosts.
If no host is specified, it will match all hosts.
There is always a default path matcher /* per host, which will decide how to handle requests which were not matched by any of the defined rules.
The available destinations for routing the requests are backend services and backend buckets.
You will use a backend service to route the requests to a VM (actually an instance group - which is a collection of VMs).
You will use a backend bucket to route the requests to content stored in Google Cloud Storage buckets.
When routing requests from a Load balancer to a backend service, your VM will get the request containing the full requested URI. So, the service on your VM can decide how to handle it by looking at the path.
When routing requests from a Load balancer to a backend bucket, the full path in the request (from /) should match the path of the object stored in your Google Cloud Storage Bucket. Eg. if your request is for a path https://www.example.org/foo/bar/baz/info.txt which gets routed to a backend bucket, your corresponding GCS bucket should have a file at this location /foo/bar/baz/info.txt.

URL map configuration for your use case

Having said that, it is possible to map all the requests as you specified with some minor modifications and taking advantage of HTTP 301 (permanent URL redirects) using a backend service.

/ -------------------> /index.html
/index.html ---------> /index.html (in GCS bucket)
/signup -------------> /index.html (in GCS bucket)
/someroute ----------> /index.html (in GCS bucket)
/api/signup ---------> anotherhost.com/signup
/resources/images/* -> /resources/images/* (in GCS bucket)
/* ------------------> Recommend using a backend service which returns a 404.

You will need to configure your URL map as follows:

/ -------------------> Backend service which returns a HTTP 301 (permanent URL redirection) /index.html
/index.html ---------> Backend bucket (will take to /index.html in the GCS bucket)
/signup -------------> Backend service which returns a HTTP 301 (permanent URL redirection) /index.html (which will cause the user to hit your GCS bucket)
/someroute ----------> Backend service which returns a HTTP 301 /index.html (will redirect to the /index.html content from your GCS bucket)
/api/signup ---------> Backend Service which returns a HTTP 301 (permanent URL redirection) to anotherhost.com/signup
/resources/images/* -> Backend bucket - Will pull /resources/images/* in GCS bucket
/* ------------------> Backend Service which returns a 404.