Google 负载均衡器在不同路径上托管两个 React 应用程序

Question

我在两个单独的 Google Storage 存储桶中构建了两个客户端渲染的 React 应用程序。 我设置了一个具有两条路径的 Google 负载均衡器。 URL example.com/app/a指向一个存储桶， example.com/b /b 指向另一个。

如果我在浏览器中打开example.com/app/a ，它会显示以下内容：

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

如果我单击存储桶上的编辑网站配置并将index.html添加为 404 页面，它可以工作，但浏览器在控制台中显示 404 错误。

有没有更好的方法在 2022 年实现这一目标？ 当使用 nginx 和重写路径和 React 路由器的basename时，它可以工作。 对应的 nginx 配置如下所示：

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

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

使用 Google 的负载均衡器如何实现这一点？

Answer 1

根据提供的信息，很可能没有为后端正确设置“MainPageSuffix”和“NotFoundPage”标志，您可以使用命令gsutil web get gs://<your-bucket-name>进行验证，必须查看一个 output 与您的每个存储桶类似：

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

要正确设置标志，请使用以下命令：

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