Google Load Balancer hosting two React apps on different paths

I have two client-side rendered React app builds in two separate Google Storage buckets. I set up a Google Load balancer with two paths. The URL example.com/app/a points to one bucket and example.com/b points to the other.

If I open the example.com/app/a in the browser it shows the following:

 <Error>
     <Code>NoSuchKey</Code>
     <Message>The specified key does not exist.</Message>
 </Error>

If I click Edit website configuration on the bucket and add the index.html as 404 page, it works, but the browser shows a 404 error in the console.

Is there a better way to achieve this in 2022? When using nginx with rewrite paths and React routers' basename, it works. The corresponding nginx config looks like this:

server {
     listen       $PORT;
     server_name  localhost;
     root   /usr/share/nginx/html;
     rewrite ^/app/a/(.*)$ /$1 last;

     location / {
         try_files $uri $uri/ /index.html;
     }
}

How can this be achieved with Google's Load Balancer?

1 answer

  • answered 2022-01-18 17:05 Gabriel Robledo Ahumada

    Based on the information provided, most probably the 'MainPageSuffix' and 'NotFoundPage' flags are not properly set for the backends, you can verify that with the command gsutil web get gs://<your-bucket-name>, have to see an output similar to this one for each of your buckets:

    {"mainPageSuffix": "index.html", "notFoundPage": "404.html"}
    

    To properly set the flags use this command:

    gsutil web set -m index.html -e 404.html gs://<your-bucket-name>
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum