Cloudflare pages használata

Létrehozva: 2024. október 2. - 22:05
#cloudflare #github
This post thumbnail

A Cloudflare Pages egy ingyenes és könnyen használható statikus weboldal hosting szolgáltatás, amely kihasználja a Cloudflare globális tartalomszolgáltató hálózatát (CDN), aminek segítségével az oldal tartalma közel kerül a felhasználókhoz. Ez azt jelenti, hogy a weboldal gyorsabban töltődik be függetlenül attól, hogy a látogatók melyik földrajzi helyről érik el azt.

Előfeltételek

  • GitHub fiók (a projektnek a GitHub-on kell lennie)
  • Egy statikus oldal készítve, például HTML/CSS, vagy egy modern webfejlesztési keretrendszerrel (React, Vue, Svelte stb.)

1. Lépés: Regisztrálás a Cloudflare oldalára

  1. Látogasd meg a Cloudflare weboldalát és regisztrálj egy fiókot, ha még nincs.
  2. A bejelentkezést követően navigálj a Cloudflare Pages oldalra a vezérlőpulton keresztül, vagy közvetlenül a Cloudflare Pages URL-en.

2. Lépés: Új projekt létrehozása

  1. A Cloudflare Pages felületén kattints az "Create a project" gombra.

  2. Itt a rendszer bekéri, hogy csatlakozz a GitHub fiókodhoz. Ezt azért kéri, mert a Cloudflare Pages közvetlenül a GitHub repóból fogja deploy-olni a weboldalt.

    • Válaszd ki a megfelelő GitHub fiókot, és engedélyezd a Cloudflare számára a szükséges hozzáféréseket.

  3. A csatlakozás után kiválaszthatod azt a GitHub repository-t, amely tartalmazza a weboldal forráskódját.

    • Keresd meg a repót a listában, majd kattints a Begin setup gombra.

3. Lépés: Konfigurálás

  1. Miután kiválasztottad a GitHub repository-t, a Cloudflare Pages felajánlja, hogy beállítsd a projekt konfigurációit. Az alapvető beállítások közé tartozik a branch kiválasztása (általában main), valamint a build-elési beállítások.

  2. Ha a projekt statikus, mint például egy egyszerű HTML/CSS oldal, nincs szükség build parancsokra. Azonban, ha valamilyen keretrendszert használ (React, Vue, Svelte stb.), akkor a megfelelő build és output parancsokat kell megadni:

    • Build Command: Például egy React projektnél: npm run build vagy yarn build.
    • Build Output Directory: Általában a dist vagy build mappa, ahová a build folyamat az összegyúrt fájlokat helyezi.

  3. Ha minden helyesen van beállítva, kattints a Save and Deploy gombra.

4. Lépés: A weboldal telepítése

A Cloudflare automatikusan elindítja a build folyamatot és deploy-olja az oldalt. Ez magában foglalja:

  • A forráskód letöltését a GitHub repóból.
  • Az esetleges build parancsok lefuttatását (ha megadtad).
  • Az oldal deploy-olását a Cloudflare CDN-en.

A build folyamat eltarthat néhány percig. Miután elkészült, a Cloudflare Pages felületén megjelenik az oldal URL-je, ami azonnal meg is látogatható.

5. Lépés: Egyéni domain beállítása (opcionális)

  1. Lépj a Custom Domains fülre a Cloudflare Pages felületén.
  2. Add meg az egyéni domaint, amelyet használni szeretnél, majd kövesd a DNS-beállításokra vonatkozó útmutatást.
  3. Miután a DNS helyesen be van állítva, a Cloudflare Pages automatikusan alkalmazza az SSL tanúsítványokat, így a weboldal HTTPS kapcsolaton keresztül lesz elérhető.

6. Lépés: Automatikus telepítés (CI/CD)

A Cloudflare Pages automatikusan frissíti és újra deploy-olja az oldaladat minden egyes GitHub commit után. Ha például új változtatásokat push-olsz a GitHub repository-ba, a Cloudflare Pages újrabuildeli és újra deploy-olja a weboldalt.