如何在 Cloudflare 后面的 Google 存储桶中托管 React 应用程序？

Question

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

我有一个 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，一切似乎都正常。

但是，当我直接从 link 访问 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:

您需要在 Page Rules

中禁用名为 Smart Errors 的功能

以便 Cloudflare 的网络服务器让 Bucket 处理错误 "correctly"

更多信息在这里： https://www.ackee.cz/blog/en/how-to-host-static-react-apps-in-google-storage-bucket-behind-cloudflare-cdn/