如何在 Cloudflare 后面的 Google Storage Bucket 中托管 React 应用程序？

Question

我在 React 中有一个小型静态网站，我想将其部署到 Google Storage Bucket。

我有一个与此类似的router.jsx

<Route component={App}>            
  <Route path="/" component={AuthenticationFirewall(AccessSecurity(MainPanel), Login)}>
     <IndexRoute component={Homepage} />
     <Route path="/companies" component={Companies}>
       <IndexRoute component={CompaniesTable} />  
       <Route path="/companies/:id" component={CompaniesDetail} />
     </Route> 
  </Route> 
</Route>

当我访问索引页面并单击所有内容时，例如，

/companies/12，一切似乎都正常。

但是，当我直接从链接访问

domain.com/companies/12 时（之前没有点击到达那里），我收到 404 错误。

Bucket 的网络服务器不允许我设置我在

nginx 中设置的内容

 location / {
    root /var/www/;
    try_files $uri /index.html;
   }

正确处理路线。

我也想拥有

Cloudflare 的 http 代理，因为 https 我觉得他们提供的 他们的自定义 404 错误页面可能有问题。

问题：

如何设置 Bucket 的网络服务器以正确服务 js 应用程序路由？
我需要在 Cloudflare 的网络服务器部分进行一些设置吗？

Answer 1

主要技巧是:

Google 存储桶的网络服务器需要提供

index.html，以防出现 404 错误

Cloudflare：

您需要在页面规则中禁用名为“智能错误”的功能

这样 Cloudflare 的网络服务器就可以让 Bucket “正确”处理错误 更多这里： https://www.ackee.cz/blog/en/how-to-host-static-react-apps-in-google-storage-bucket-behind-cloudflare-cdn/

推荐的方法是在云存储桶前面放置一个全局外部负载均衡器。在负载均衡器中，您可以配置

Answer 2

并创建

路由规则，该规则重写对您的index.html的每个请求。

defaultService: projects/xxxx/global/backendBuckets/spa
name: path-matcher-1
routeRules:
- matchRules:
  - pathTemplateMatch: /**
  priority: 10
  service: projects/xxxx/global/backendBuckets/spa
  routeAction:
    urlRewrite:
      pathTemplateRewrite: /index.html