Găzduiește O Aplicație Web Statică Pe Cloudflare Pages: Ghid 2026

Găzduirea pe Cloudflare Pages permite echipelor de frontend să lanseze cod care este rapid, sigur și lipsit de administrare de server. Folosind Cloudflare Pages , dezvoltatorii obțin o platformă edge-native de înaltă performanță pentru a implementa aplicații web statice, aplicații single-page (SPA) și framework-uri cu randare pe server (SSR). Prin conectarea directă la repository-ul tău Git, Cloudflare automatizează pipeline-urile de build, generează implementări de previzualizare și găzduiește resursele la nivel global. Acest ghid explică cum să conectezi Git, să configurezi setările de build, să configurezi domenii personalizate și să configurezi redirecționările.

Pe scurt (TL;DR)

• Implementează aplicații frontend edge-native; Cloudflare Pages servește resursele la nivel global din rețeaua Cloudflare, asigurând timpi de încărcare sub o secundă.
• Automatizează integrarea Git; conectează repository-ul pentru a declanșa build-uri automate și a genera URL-uri de previzualizare pentru fiecare commit.
• Configurează setările de build ale framework-ului; setează directoarele de ieșire și comenzile pentru React, Vue, Next.js, Hugo sau Astro.
• Aplică reguli de redirecționare și antet folosind fișiere text simple _redirects și _headers în folderul tău public.
• Mapează domenii personalizate cu certificate SSL gratuite, reînnoite automat, gestionate de Cloudflare.

Ce este Cloudflare Pages?

Cloudflare Pages este o platformă de găzduire serverless pentru dezvoltatorii frontend, similară cu Netlify sau Vercel, construită direct pe infrastructura globală a Cloudflare.

În loc să găzduiască fișierele pe un singur server cloud, Cloudflare Pages distribuie HTML-ul, CSS-ul, JavaScript-ul și imaginile tale pe locații edge din întreaga lume. Când un utilizator solicită site-ul tău, resursele sunt servite din cea mai apropiată locație, reducând latența de rețea. Pentru proiectele care necesită logică pe server, Pages se integrează cu Cloudflare Workers pentru a rula funcții de backend. Pentru a compara Pages cu alte servicii de edge compute, citește ghidul nostru despre Cloudflare Pages vs Workers .

Cerințe preliminare

Înainte de a începe, asigură-te că ai pregătite următoarele:

• Un repository Git pe GitHub sau GitLab care conține proiectul tău (sau fișierele compilate, gata pentru o încărcare directă).
• Un framework care produce resurse statice — React (Vite), Vue, Astro, SvelteKit, Hugo sau HTML simplu. Framework-urile randate pe server funcționează și ele, prin Pages Functions.
• Un build local funcțional. Rulează comanda ta de build (de exemplu npm run build) și confirmă că folderul de ieșire este generat fără erori înainte de a conecta orice.
• Un cont Cloudflare gratuit. Nu este necesar niciun card de credit pentru nivelul gratuit.
• Node.js instalat local (recomandat) astfel încât să poți reproduce build-urile și să folosești instrumentul de linie de comandă Wrangler.

O verificare rapidă îți economisește ore de depanare mai târziu: dacă site-ul tău nu se compilează curat pe propria mașină, nu se va compila nici pe runner-ele Cloudflare. Rezolvă mai întâi erorile locale.

Pasul 1: Conectarea repository-ului tău Git

Pentru a începe, autentifică-te în Cloudflare Dashboard, navighează la Compute > Pages și fă clic pe Create a project.

Selectează Connect to Git pentru a-ți conecta contul GitHub sau GitLab. Alege repository-ul care conține aplicația ta web statică. Această integrare este valoroasă deoarece stabilește un pipeline de integrare continuă (CI): de fiecare dată când faci push de cod în branch-ul tău de producție, Cloudflare compilează și implementează actualizările automat. Pentru alte commit-uri, Cloudflare generează „URL-uri de previzualizare” unice, astfel încât să poți testa modificările înainte de îmbinare.

Pasul 2: Configurarea setărilor de build

Cloudflare Pages acceptă generatoare de site-uri statice și framework-uri frontend populare. În timpul asistentului de configurare, configurează următoarele setări în funcție de stack-ul tău:

• Comandă de build: Scriptul de build definit în package.json (cum ar fi npm run build sau hugo --minify).
• Director de ieșire al build-ului: Folderul care conține fișierele statice compilate (cum ar fi dist, build sau public).
• Variabile de mediu: Dacă scriptul tău de build necesită chei API sau variabile de configurare, definește-le aici.

Cloudflare detectează automat multe framework-uri, dar confirmarea presetării evită un prim build eșuat. Combinațiile comune sunt:

Fixează versiunea de Node. O cauză frecventă a situației „funcționează local, eșuează pe Cloudflare” este o nepotrivire între versiunea de Node pe care runner-ul de build o folosește implicit și cea pe care o așteaptă proiectul tău. Declar-o explicit, fie ca variabilă de mediu în dashboard:

1NODE_VERSION = 20

Fie prin adăugarea unui fișier .node-version în rădăcina repository-ului:

120

Pasul 3: Configurarea redirecționărilor și a antetelor

Pentru aplicații single-page (precum React Router) sau migrări de URL-uri vechi, trebuie să configurezi reguli de rutare și redirecționare. Pages gestionează acest lucru prin fișiere text simple plasate în directorul tău de ieșire.

Redirecționări (_redirects)

Creează un fișier numit _redirects în folderul tău public. Pentru ca o aplicație SPA React să gestioneze curat rutarea pe partea de client, adaugă regula de rezervă:

1/*  /index.html  200

Aceasta forțează toate cererile să se rezolve la index.html, permițând router-ului JavaScript să gestioneze calea.

Ordinea contează. Cloudflare evaluează regulile de sus în jos și se oprește la prima potrivire, deci redirecționările specifice trebuie să se afle deasupra rezervei generice:

1# Permanent redirect for a moved page
2/old-pricing   /pricing            301
3
4# Redirect an entire section, preserving the sub-path
5/blog/*        /articles/:splat    301
6
7# SPA fallback (must come last)
8/*             /index.html         200

Substituentul :splat transportă porțiunea potrivită a căii până la destinație. Planul gratuit permite până la 2.000 de reguli de redirecționare statică per proiect; peste această limită, mută logica într-o Pages Function sau în Bulk Redirects.

Antete personalizate (_headers)

Creează un fișier numit _headers pentru a aplica reguli de securitate, Referrer-Policy sau controale de cache personalizate:

1/*
2  X-Frame-Options: DENY
3  X-Content-Type-Options: nosniff
4  Referrer-Policy: strict-origin-when-cross-origin

Același fișier este locul potrivit pentru a ajusta memorarea în cache. Resursele imutabile, cu amprentă (fingerprint), pot fi păstrate în cache timp de un an, în timp ce HTML-ul rămâne proaspăt, astfel încât utilizatorii primesc întotdeauna cel mai nou build:

1/assets/*
2  Cache-Control: public, max-age=31536000, immutable

Pentru a vedea cum se compară aceste reguli cu rutarea tradițională de backend, citește construirea unui API serverless cu Cloudflare Workers .

Pasul 4: Maparea domeniilor personalizate

După implementare, Cloudflare oferă un subdomeniu implicit (de ex. your-project.pages.dev).

Pentru a mapa domeniul tău personalizat, navighează la fila Custom Domains din proiectul tău Pages și introdu domeniul tău (de ex. yourcompany.com). Dacă DNS-ul tău este gestionat de Cloudflare, platforma configurează înregistrările CNAME și provizionează instant un certificat SSL gratuit, cu reînnoire automată. Dacă ai nevoie de ajutor pentru gestionarea mapării domeniilor, a DNS-ului sau a securității serverului, consultă pagina audit de securitate a site-ului web .

Pasul 5: Implementarea cu Wrangler CLI (încărcare directă)

Integrarea Git se potrivește majorității echipelor, dar poți implementa și direct de pe mașina ta sau dintr-un pipeline existent folosind Wrangler, instrumentul de linie de comandă al Cloudflare. Acest lucru este util atunci când build-ul tău rulează deja în GitHub Actions sau GitLab CI și dorești doar să încarci rezultatul finalizat.

Instalează Wrangler și autentifică-te:

1npm install -g wrangler
2wrangler login

Compilează local, apoi trimite directorul de ieșire către un proiect denumit:

1npm run build
2wrangler pages deploy ./dist --project-name=my-web-app

Prima rulare creează proiectul dacă acesta nu există deja. În CI, înlocuiește wrangler login interactiv cu un token API cu domeniu limitat furnizat printr-o variabilă de mediu, astfel încât să nu fie necesar niciun pas de browser:

1# .github/workflows/deploy.yml (excerpt)
2- name: Deploy to Cloudflare Pages
3  run: npx wrangler pages deploy ./dist --project-name=my-web-app
4  env:
5    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
6    CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

Încărcarea directă omite propriul pas de build al Cloudflare, ceea ce ocolește problemele de mediu de build și îți oferă control complet asupra toolchain-ului.

Capcane frecvente și depanare

Câteva probleme reprezintă majoritatea eșecurilor de implementare la prima încercare:

• Erori 404 la reîmprospătarea unei rute SPA. O rută pe partea de client, cum ar fi /dashboard, returnează „Nothing is here yet” deoarece nu există niciun fișier corespunzător pe disc. Soluția este rezerva /* /index.html 200 din _redirects și confirmarea că acel fișier ajunge în rezultatul build-ului, nu în folderul tău sursă.
• _redirects sau _headers par să fie ignorate. Aceste fișiere trebuie să se afle în directorul de ieșire publicat, nu doar în repository. Cu Vite, Astro sau SvelteKit, plasează-le în folderul public/ (sau static/) astfel încât build-ul să le copieze neatinse.
• Build-ul reușește local, dar eșuează pe Cloudflare. Aceasta este aproape întotdeauna o nepotrivire a versiunii de Node sau o variabilă lipsă la momentul build-ului. Fixează versiunea de Node și redeclară orice variabile pe care le citește build-ul — acestea sunt separate de binding-urile de runtime.
• „Too many files” sau o implementare supradimensionată. O singură implementare este limitată la 20.000 de fișiere, cu o limită de 25 MiB per fișier. Media de dimensiuni mari aparține în R2 sau într-un serviciu de imagini, nu în pachetul static.
• Resurse învechite după o lansare. Fișierele cu hash, cum ar fi app.4f2c.js, pot fi memorate agresiv în cache, dar index.html nu ar trebui. Păstrează HTML-ul pe un cache scurt și lasă resursele cu amprentă să rămână imutabile, așa cum s-a arătat mai devreme.

Considerații privind testarea și producția

Cloudflare construiește o implementare de previzualizare pentru fiecare branch care nu este de producție și pentru fiecare pull request, fiecare pe propriul URL (de exemplu abc123.my-web-app.pages.dev). Deoarece previzualizările rulează pe aceeași rețea edge ca și site-ul tău live, ele reprezintă un loc de încredere pentru a revizui modificările înainte de îmbinare.

Pentru lansări reale, câteva controale fac diferența dintre o simplă găzduire și un flux de lucru fiabil:

• Reveniri (Rollbacks). Fiecare implementare este păstrată, astfel încât o lansare defectuoasă poate fi anulată prin promovarea unui build anterior înapoi în producție din dashboard în câteva secunde, fără recompilare.
• Separarea mediilor. Setează variabile diferite pentru producție și previzualizare, astfel încât build-urile de previzualizare să indice către API-uri de staging, nu către date live.
• Analitice și Core Web Vitals. Activează Cloudflare Web Analytics — orientat spre confidențialitate și fără cookie-uri — pentru a urmări LCP, CLS și traficul utilizatorilor reali fără a încărca un script terț.
• Control al accesului pentru previzualizări. URL-urile de previzualizare sunt publice în mod implicit. Dacă un branch expune lucru nelansat, plasează-l în spatele Cloudflare Access astfel încât doar echipa ta să îl poată deschide.

Punerea acestora în aplicare din timp menține implementările predictibile pe măsură ce proiectul crește și mai mulți oameni fac push la el.

Concluzii cheie

• Cloudflare Pages găzduiește aplicații web statice pe rețeaua edge globală a Cloudflare, optimizând vitezele de încărcare.
• Automatizează implementările conectând GitHub sau GitLab pentru a compila codul la fiecare commit.
• Definește comenzile de build și directoarele de ieșire care se potrivesc framework-ului tău (Astro, Next.js, Hugo, React).
• Configurează redirecționările și antetele de securitate folosind fișiere text simple _redirects și _headers în directorul tău de ieșire.
• Mapează domenii personalizate cu certificate SSL gratuite, reînnoite automat, gestionate direct de Cloudflare.

Optimizează-ți infrastructura web

Implementarea de frontend-uri rapide și sigure necesită alegerea arhitecturii de găzduire potrivite și a regulilor de memorare în cache. Mecanik este specializat în servicii de dezvoltare web și oferă servicii de audit SEO tehnic de specialitate. Construim platforme personalizate React, Next.js și Astro optimizate pentru Core Web Vitals și implementate pe Cloudflare. Contactează-ne astăzi pentru a discuta despre următorul tău build.

Întrebări frecvente (FAQ)

Ce este găzduirea Cloudflare Pages? Este o platformă de găzduire frontend serverless care compilează și servește aplicații web statice, SPA-uri React și rezultate de generatoare de site-uri statice (precum Astro sau Hugo) la nivel global pe CDN-ul Cloudflare.

Cloudflare Pages acceptă randarea pe server (SSR)? Da. Pages acceptă framework-uri SSR (precum Next.js, Astro, SvelteKit) prin convertirea automată a logicii de server în Cloudflare Workers serverless în timpul procesului de build.

Cum configurez redirecționările pe Cloudflare Pages? Creezi un fișier text simplu numit _redirects în directorul de ieșire al build-ului și scrii reguli de redirecționare, definind calea sursă, calea destinație și codul de stare HTTP.

Este Cloudflare Pages gratuit? Da. Cloudflare Pages oferă un nivel gratuit generos care include implementări nelimitate, lățime de bandă nelimitată și domenii personalizate, făcându-l foarte rentabil pentru găzduirea statică.

Cum configurez un domeniu personalizat pe Pages? Navighează la fila Custom Domains din dashboard-ul proiectului tău Pages, introdu numele domeniului tău, iar Cloudflare va configura înregistrările DNS și va emite un certificat SSL gratuit.