0Pricing
Frontend Academy · Lekcja

Wdrażanie na Vercel, Netlify i Cloudflare Pages

Połączy Pan/Pani repozytorium z każdą platformą, skonfiguruje polecenia budowania i katalogi wyjściowe oraz pozna wdrożenia podglądowe dla gałęzi.

Wdrażanie na Vercel, Netlify i Cloudflare Pages to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Nowoczesna trójka platform hostingu frontendu

Vercel, Netlify i Cloudflare Pages to wiodące platformy do wdrażania aplikacji frontendowych. Wszystkie oferują: wdrożenia oparte na Git, gałęzie podglądowe, własne domeny, brzegowy CDN oraz funkcje serverless. Należy wybrać jedną z nich i konsekwentnie jej używać.

Vercel — stworzony dla Next.js

Vercel został stworzony przez zespół Next.js. Oferuje najlepszą w swojej klasie integrację z Next.js: bezkonfiguracyjną funkcję Image Optimization, ISR, Edge Functions oraz Speed Insights. Obsługuje także Vite, Nuxt, Astro i większość statycznych frameworków.

Wdrażanie w Vercel

Należy połączyć repozytorium GitHub/GitLab/Bitbucket. Vercel automatycznie wykryje framework, uruchomi build i wdroży aplikację.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Konfiguracja vercel.json

Można nadpisać wartości domyślne, takie jak polecenia kompilacji, przekierowania, nagłówki i reguły przepisywania.

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — pionier

Netlify zapoczątkował nowoczesne wdrożenia statycznych aplikacji. Oferuje rozbudowaną obsługę formularzy, system tożsamości i analitykę. Netlify Functions i Edge Functions umożliwiają korzystanie z funkcji serverless. Zapewnia świetne wsparcie dla Vite, Hugo i Eleventy.

Wdrażanie w Netlify

Należy połączyć repozytorium albo przeciągnąć i upuścić folder z gotową aplikacją. Konfigurację można przeprowadzić w panelu lub za pomocą netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Lokalne tworzenie aplikacji z funkcjami serverless.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Aplikacje są wdrażane do globalnej brzegowej sieci Cloudflare. Pages Functions zapewnia funkcje serverless działające w środowisku Workers. Darmowy plan jest hojny. Cloudflare Pages doskonale sprawdza się w przypadku Astro, Hono i Remix.

Wdrażanie w Cloudflare Pages

Należy połączyć repozytorium za pomocą panelu Cloudflare. Można też użyć wrangler CLI.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml dla Pages

Cloudflare Pages używa pliku wrangler.toml do konfiguracji Workers/Functions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Wdrożenia podglądowe

Wszystkie trzy platformy tworzą unikalny adres URL dla każdej gałęzi PR. Osoby przeglądające kod mogą kliknąć ten adres i przetestować zmiany w izolacji. Obecnie jest to standardowy sposób pracy zespołu.

Zmienne środowiskowe

Wszystkie trzy platformy oferują zmienne dla poszczególnych środowisk (production, preview, development), konfigurowane w panelu lub za pomocą CLI. Zmienne frontendu muszą mieć odpowiedni prefiks (Vite: VITE_, Next: NEXT_PUBLIC_), aby mogły zostać dołączone do aplikacji działającej w przeglądarce.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Własne domeny i SSL

Wszystkie trzy platformy automatycznie obsługują certyfikaty SSL (Let's Encrypt). Wystarczy wskazać ich docelowy adres w rekordzie DNS A/CNAME — platforma wystawi i odnowi certyfikaty. Własne domeny są bezpłatne we wszystkich płatnych planach.

Jak wybrać spośród tych trzech

Vercel: najlepszy dla Next.js, dopracowane środowisko programistyczne, nieco wyższa cena. Netlify: najlepszy w obsłudze formularzy i tożsamości, dojrzały ekosystem wtyczek. Cloudflare Pages: najlepsza wydajność na brzegu sieci, najniższy koszt przy dużej skali, świetna integracja z Workers. Wszystkie trzy platformy są doskonałe.

Szybkie sprawdzenie

Jaki jest standardowy sposób utworzenia wdrażalnego podglądowego adresu URL dla pull requesta w Vercel, Netlify lub Cloudflare Pages?

Podsumowanie: hosting frontendu

Vercel: najlepsza integracja z Next.js. Netlify: formularze, tożsamość i wtyczki. Cloudflare Pages: wydajność na brzegu sieci, najniższy koszt. Wszystkie trzy platformy oferują automatyczne wdrożenia oparte na Git, adresy URL podglądu dla każdego PR, zmienne środowiskowe dla poszczególnych środowisk, automatyczny SSL i własne domeny. Konfigurację przeprowadza się w panelu lub za pomocą pliku konfiguracyjnego danej platformy (vercel.json, netlify.toml, wrangler.toml).

Często zadawane pytania

Czy lekcja „Wdrażanie na Vercel, Netlify i Cloudflare Pages” jest bezpłatna?

Tak — pełny tekst „Wdrażanie na Vercel, Netlify i Cloudflare Pages” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wdrażanie na Vercel, Netlify i Cloudflare Pages”?

Połączy Pan/Pani repozytorium z każdą platformą, skonfiguruje polecenia budowania i katalogi wyjściowe oraz pozna wdrożenia podglądowe dla gałęzi. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wdrażanie na Vercel, Netlify i Cloudflare Pages”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. GitHub Actions dla frontendu: lint, test i build
  2. Wdrażanie na Vercel, Netlify i Cloudflare Pages
  3. Zmienne środowiskowe w CI
  4. Automatyczne kontrole Lighthouse
← Powrót do Frontend Academy