How do I host a React app in Google Storage Bucket behind Cloudflare?

问题

I have a small static website in React that I want to deploy to Google Storage Bucket.

I have a router.jsx similar to this

<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>

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

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

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;
   }

to handle the routes correctly.

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.

Questions:

How do I set the Bucket's webserver to serve the js app routes correctly?
Do I need to set something on Cloudflare's webserver part?

回答1:

The main trick is:

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

Cloudflare:

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

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

More here: https://www.ackee.cz/blog/en/how-to-host-static-react-apps-in-google-storage-bucket-behind-cloudflare-cdn/

来源：https://stackoverflow.com/questions/43610300/how-do-i-host-a-react-app-in-google-storage-bucket-behind-cloudflare

标签

reactjs

react-router

google-cloud-storage

cloudflare