Jak na hosting React aplikací v Google Storage Bucket za Cloudflare CDN
V Ackee vyvíjíme mnoho statických webů v Reactu. V případě použití Google Storage Bucket za Cloudflare CDN pravděpodobně narazíte na několik problémů s React Routerem, s limitovaným nastavením webserveru Bucketu a nastavením https. Na straně Cloudflare je také potřeba vlastní nastavení pro správnou funkci vaší aplikace v Reactu.
Ve většině případů byste nejspíše použili klasický webhosting od lokálního poskytovatele s přístupem přes ftp pro testing, staging a produkci. S ftp hostingem budete spokojeni do té doby, než bude potřeba něco rychle a pravidělně testovat, nasadit nebo rozdělit několik projektů do několika nezávislých kontejnerů či udržovat zálohy a verze aplikace. Migrace a nasazení na ftp u lokálního poskytovatele můžou být bolestivě pomalé.
Google Cloud
Nasazujeme většinu věcí na náš Kubernetes cluster hostovaný na Google Container Engine. Avšak nasadit malou statickou webovou aplikaci jako nginx pod by byl šílený overkill.
Statické weby je možno hostovat v Google Storage Bucket. Google Storage nabízí několik typů Bucketů. Například: Nearline (levnější, redundantní v jednom regionu) vhodný pro testing a staging a Multi-Regional (dražší, redundantní v několika regionech). Díky Bucketům můžeme "udržet naše věci" v jednom cloudu, rychle a jednoduše migrovat a škálovat a šetříme tím čas a peníze. Přesto nedoporučujeme toto řešení pro produkční weby pro širokou veřejnost (čtěte dál a dozvíte se proč).
Bucket webserver
Tak na co ještě čekáme? Stačí pushnout aplikaci do Bucketu a máme vyhráno, že?! Ne tak rychle...
Představte si, že máme následující kód v našem routes.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> Typicky hostujeme React aplikaci ve webserveru s podobnou konfigurací (nginx syntax):
...
# Obsluhuj každý požadavek souborem index.html
location / {
root /var/www/;
try_files $uri /index.html;
}
...Všechny routy typu /companies/125 jsou tedy obsluhovány souborem index.html a webserver se nesnaží hledat adresář se jménem companies a dále podadresář companies/125 (žádný z nich fyzicky neexistuje, jsou to jen dynamické routy generované javascriptem).
Bohužel GS Bucket webserver nás nechá nakonfigurovat pouze práva souborů, index a 404 stránku. Nejsou zde žádné .conf soubory, žádný .htaccess, nic takového. S nasazenou aplikací v čistém novém bucketu po přímém přístupu na URL /companies/125 page by nám aplikace vyhodila 404 error.
Nemůžeme modifikovat virtuálního hosta, ale můžeme říci webserveru, aby obsluhoval všechny požadavky souborem index.html pomocí jednoduchého triku nastavení index.html jako 404-stránky (nenalezeno). Co to doopravdy znamená je, že "pokud nemůžeš najít soubor specifikovaný v URL, vrať /index.html", což udělá to samé jako konfigurace nginxu zmíněná výše.
# Vytvořte bucket
gsutil mb gs://example.ack.ee
# Synchonizujte bucket s buildDir lokálním adresářem. Adresář excludeDir nesynchonizujte
gsutil -m rsync -R -x ./excludeDir ./buildDir gs://example.ack.ee
# Umožněte všem vidět vaší webovou stránku
gsutil -m acl ch -R -u AllUsers:R gs://example.ack.ee
# Nastavte webserver - index a error stránky
gsutil -m web set -m index.html -e index.html gs://example.ack.eeCloudflare nastavení
Google Storage Buckety nepodporují https. Přesto vaše webová aplikace může běžet pod https na straně klienta s pomocí poskytovatele Content Delivery Network jako je Cloudflare.
Cloudflare disponuje svými vlastními Error stránkami nazvanými Smart Errors. Pokud zašlete požadavek na neexistující stránku s povolenou CDN místo zobrazení běžného erroru 404 daného webu, Cloudflare zobrazí jejich defaultní 404 stránku s pár informacemi o možné miskonfiguraci. Toto je defaultní chování Cloudflare a nefunguje s naším malým trikem vlastní error stránky v Google Storage Bucket.
Pro vypnutí těchto "Smart Errors" jednoduše přidejte Page Rule se Smart Errors nastavenými na Off. Pro testovací doménu můžete případně ještě vypnout Cache tak, jak lze vidět na obrázku níže.
Page rules je možné nastavit i pomocí velice dobře dokumentovaného Cloudflare API ve vaší CI/CD pipelině jako to děláme my pomocí Jenkins Pipeline plugin.
Závěr
Ačkoliv nasazení a migrace React aplikací (a dalších aplikací, které potřebují webserver s pokročilejším nastavením) jsou rychlé a pohodlné s Buckety, nedoporučujeme je používat pro produkční weby. Nevýhodou této obsluž-404-souborem-index.html metody je samozřejmě vrácení kódu 404 v HTTP hlavičce, která může negativně ovlivnit SEO. Pokud nechcete přepisovat aplikaci s vynucením HTTP 200 v odpovědi, používejte Buckety pro kontinuální integraci a nasazení administračních CMS webů nebo čehokoliv jiného, co není určeno široké veřejnosti.
Odkazy
