如何在Cloudflare后面的Google存储桶中托管React应用？ [英] How do I host a React app in Google Storage Bucket behind Cloudflare?

问题描述

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

I have a small static website in React that I want to deploy to 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 ，一切似乎正常。

When I access the index page and I click through everything to, say, /companies/12, everything seems ok.

但是，当我直接从链接访问 domain.com/companies/12 时（没有先前的点击到达该位置），我收到一个 404错误。

However, when I access the domain.com/companies/12 directly from a link (no previous clicking to get there), I get a 404 error.

存储桶的网络服务器不允许我设置我想设置在 nginx

The Bucket's webserver doesn't allow me to set something I'd set in nginx

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

正确处理路线。

由于 https ，我还希望拥有 Cloudflare的 http代理，我觉得他们为其自定义404错误提供服务可能存在问题页面。

I also want to have Cloudflare's http proxy because of the https and I feel like there might be something wrong with them serving their custom 404 error pages.

问题：

• 如何设置Bucket的网络服务器是否可以正确提供js应用程序的路由？


• 我需要在Cloudflare的网络服务器部分设置一些东西吗？

推荐答案

主要技巧是：

Google存储桶的网络服务器需要服务 index.html，如果出现404错误

The Google Storage Bucket's webserver needs to serve index.html in case of 404 errors

Cloudflare ：

您需要禁用名为 Smart Erro的功能rs （在页面规则中

You need to disable a feature called Smart Errors in Page Rules

，以便Cloudflare的网络服务器让Bucket处理错误正确

so that the Cloudflare's webserver let's the Bucket to handle the errors "correctly"

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

这篇关于如何在Cloudflare后面的Google存储桶中托管React应用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！