GCP Load Balancing (non classic) - URL rewrite

I have a very simple use case and I can't seem to find a way to do it. My application has an app part (angular) and an api part (nodejs). From the UI, although I call the api as /api/*, the api server itself does not have the /api prefix. Because of this, I need to rewrite any request for /api to /.

In the development environment, my angular application simply has a proxy configuration which does the rewriting:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "pathRewrite": {
      "^/api/": ""
    },
    "secure": false,
    "logLevel": "debug"
  }
}

So, for the production environment, I need to configure the GCP load balancer for the following scenarios:

While I am able to configure the simple Routing rules for mapping the host and path to the ui-backend-service, it looks really difficult to rewrite url for /api.

Any example that I could find for URL rewriting shows the Classic Load Balancing, which does not seem to be applicable anymore.

I tried modifying the Advanced host and path rules, but it tells me that I can either provide pathRules or routeRules, not both. I cannot create a separate rule, because the host (which is * in my case) cannot be used more than once.

I don't want to setup an nginx on my api server just for this. Is there another way to do it?

I finally managed to resolve my problem.

Apparently, the web UI of GCP Console for Load Balancing does not yet support a way to let users add rewrite rules through a form. The only way to do it is to add the configuration manually.

I found two ways of doing this:

(This answer assumes that you already have a load-balancing configuration created)

1. Console

1. edit the HTTP(S) load balancer
2. add Frontend and backend configurations
3. in Routing rules, select Advanced host and path rules and add the following in the text-area provided for the rules:

defaultService: projects/my-project/global/backendServices/ui-backend-service
name: path-matcher-1
pathRules:
- paths:
  - /
  service: projects/my-project/global/backendServices/ui-backend-service
- paths:
  - /app
  - /app/*
  service: projects/my-project/global/backendServices/ui-backend-service
- paths:
  - /api
  - /api/*
  service: projects/my-project/global/backendServices/api-backend-service
  routeAction:
    urlRewrite:
      pathPrefixRewrite: /

2. gcloud

gcloud compute url-maps edit <lb-name>

This will retrieve the load-balancing configuration and show it in an editor (in linux it shows it in a vi editor in the terminal)

Comment out (by placing # at the beginning of each line) or delete the existing configuration. Insert the above configuration (with some changes, as explained below) in the vi editor in place of the lines commented out or deleted.

When updating the configuration through gcloud, the backend services need to be referenced using URIs. So, just add https://www.googleapis.com/compute/v1/ before each service reference.

The configuration should look similar to the one shown below:

defaultService: https://www.googleapis.com/compute/v1/projects/my-project/global/backendServices/ui-backend-service
name: path-matcher-1
pathRules:
- paths:
  - /app
  - /app/*
  service: https://www.googleapis.com/compute/v1/projects/my-project/global/backendServices/ui-backend-service
- paths:
  - /
  service: https://www.googleapis.com/compute/v1/projects/my-project/global/backendServices/ui-backend-service
- paths:
  - /api
  - /api/*
  service: https://www.googleapis.com/compute/v1/projects/my-project/global/backendServices/api-backend-service
  routeAction:
    urlRewrite:
      pathPrefixRewrite: /

Keep in mind that any changes to the load-balancing configurations usually take a few minutes to take effect. So, be patient and try out the changes accordingly.

Inspiration: https://cloud.google.com/load-balancing/docs/https/setting-up-url-rewrite#gcloud

In the "inspirational" link above, the Console version seems outdated (at the time of writing this answer). The gcloud version, however, works fine.