Search code examples
reactjsangulargoogle-cloud-platformgoogle-cloud-storageload-balancing

Deploy SPA application on Google Cloud Storage using Load Balancer and CDN

I'm investigating a way of deploying an Angular or React web application on Google Cloud using GCS, Load Balancer, and CDN.

I've set up the LB and the GCS using the urlRewrite, but since the LB does not allow full URL rewrite only pathPrefixRewrite, I cannot redirect all the requests to /index.html

I want to achieve the same functionality as firebase hosting where you can specify the rewrite rules

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

Another option will be to set the 404 page as index.html, but that will result in a 404 status code return by the server, which I don't like.

Is this possible with Load Balancer, because they are not supporting a full rewrite?

Solution

  • Google added rewrite engine in 2020 (see https://serverfault.com/questions/927143/how-to-manage-url-rewrites-with-a-gcp-load-balancer/1045214) and it is only capable pathPrefixRewrite (stripping fixed prefix).

    For SPA you need variable suffix rewrite to index.html so you use Nginx or Firebase.

    Or mentioned error handler in bucket's HTTP server (with a downside of HTTP code 404 for your virtual URLs):

    gsutil web set -m index.html -e index.html gs://web-stage/

    Full instructions to set SPA app is here: Google cloud load balancer create backend service for Firebase Hosting to serve microservices & frontend SPA from the same domain via load balancer?

    Discussion of LB rewrite engine limitations: