reactjs - 如何在 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 存储桶的网络服务器需要在出现 404 错误时提供 index.html

Cloudflare:

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

这样 Cloudflare 的网络服务器就可以让 Bucket “正确”处理错误

更多内容请看这里: https://www.ackee.cz/blog/en/how-to-host-static-react-apps-in-google-storage-bucket-behind-cloudflare-cdn/