如何在Cloudflare后面的Google存储桶中托管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;
   }

正确处理路线。

我还希望使用https作为Cloudflare的 http代理，并且我觉得他们在为其自定义404错误页面提供服务时可能存在问题。

问题：

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

Answer 1

主要技巧是：

Google存储桶的网络服务器需要提供index.html，以防出现404错误

Cloudflare：

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

以便Cloudflare的网络服务器让存储桶“正确”处理错误

此处更多内容：https： //www.ackee.cz/blog/zh-CN/how-to-host-static-react-apps-in-google-storage-bucket-behind-cloudflare-cdn/