Skip to content

Cloudflare - Host Static pages + redirects & functions

Zprovozneni Cloudflare Pages

vyzaduje gitlab/gihub cloud (muze byt i neverejne repo).

Pro redirecty slouzi soubor _redirects o kterem je vice napsano v oficialni dokumentaci

Priklad 

/blog/* https://blog.my.domain/:splat 
/team /about-us/ 301
/products/:code/:name /products?code=:code&name=:name

Pro pokrocilejsi, nebo genericka rewrite pravidla je potreba pouzit URL Rewrite rules. Jejich pouziti je ve free planu omezene na pouha dve pravidla.

Priklad: - Udelam v gitlabu private repozitar - nahraju do adresare /public/ vygenerovany web - vse comitnu a pushnu

  • V cloudflare jdu zakladat pages project
  • vyberu gitlab a sve repo
  • dam build type Hugo (jen proto ze ho znam a vim, ze vystup dava do adresare /public)
  • upravim build prikaz na neco neskodneho co nic nedela, treba ls -al /public
  • vyberu branch, kterou chci releasovat a davam pokracovat

  • jakmile pipe dobehne, web je verejny a ted uz jen nastavim vlastni domenu

  • Pokud potrebuji zadat nejake redirecty, vytvorim soubor /public/_redirects a soubor nahraji do repozitare

Cache all by Page Rules

Pokud bychom chteli web posunout uplne do edge lokaci, muzeme jeste pouzit cache all moznost, ktera je popsana nize. Zpusobi to, ze vse dle dane masky se natahne do cloudflare, nasledne pak chodi na backend jen dotazy overujici, zda jsou data aktualni, ale vse se serviruje z Cloudflare.

https://developers.cloudflare.com/cache/best-practices/customize-cache#3SVKvGhbS9BNT34zRCsPJ7

Custom headers

https://developers.cloudflare.com/pages/platform/headers

Functions

Umoznuje dynamicky obsah, daji se tak resit treba i forwardy, ale je tu nejaky pricing a limit na pousteni, je to udelane lepe nez edge functions u AWS, protoze se to muze tykat jen nekterych URL a ne vsech.

Priklad pouziti

Jednotlive funkce se vkladaji do adresare functions/cesta_kde_funkce/posloucha.ts, tedy napriklad pokud chci, aby funkce poslouchala na adrese /api/users/list, umistim svou do functions/api/users/list.ts.

Da se takto resit napriklad forwardovani 

/*
 // Priklad preposilani pozadavku na jinou URL (cilova cesta musi byt absolutni)
 /dokumentace/kontakty-v10 -> /dokumentace/clanek/kontakty-v10 301

*/

export async function onRequest(context) {
  return Response.redirect("https://easyproject-cz-web.pages.dev/dokumentace/clanek/kontakty-v10", 301)
}

Pokud chci vratit nejakou odpoved, pak musim vracet response takto:

export async function onRequest(context) {
  return new Response("obsah odpovedi");
}

Spusteni funkce je limitovano na 100 tisic za den. Pote se prestane vykonavat a vse ostatni bezi jako by tam nebyla. Existuje moznost tento limit navysit napsanim na jejich support.

Komplexnejsi priklad jak redirektovat parametrizovane url (+ delame i nejaky import a trochu programujeme)

config.ts 

export const REDIRECTS = {
  "page=123": "https://example.com/target_url",
  "page=234": "https://example.com/another/target_url",
}

knowledge-base.ts 

import { REDIRECTS } from '../../config'

export async function onRequest(context) {
  let params = context.request.url.split(?)[1];

  let target = REDIRECTS[params];
  if (target) {
    return Response.redirect(target, 304);
  }
}

Lokalni vyvoj

Pokud mam lokalne npm a podari se mi nainstalovat posledni beta verzi wranglera v2, pak mohu lokalne celkem solidne vyvijet

// Instalace wranglera
npm install wrangler@beta

// spusteni dev serveru v adresari public
npx wrangler pages dev ./public

Zhodnoceni

  • [NE] proxy pro nenalezeny obsah, nekam jinam
  • [OK] automaticky redirect / na /index.html
  • [OK] automaticky redirect /nejaka-podstranka na /nejaka-podstranka/ a s tim i na index.html v danem adresari
  • [OK] vlastni domena
  • [OK] snadne a levne redirecty z neceho nekam (ano limit na pocet redirectu je 100)
  • [OK] rewrite pravidla (pouze 2 na aplikaci, vice je v placenych planech)
  • [OK] Custom error pages (Pouze v placenych planech)