Wdrażanie na Vercel: zero konfiguracji i adresy podglądu
Łączenie repozytorium GitHub z Vercel, konfigurowanie zmiennych środowiskowych i używanie wdrożeń podglądowych.
Wdrażanie na Vercel: zero konfiguracji i adresy podglądu to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Dlaczego Vercel?
Vercel to platforma stworzona przez zespół Next.js. Oferuje wdrażanie bez konfiguracji: wystarczy połączyć repozytorium GitHub, a Vercel automatycznie wykryje framework, zbuduje aplikację i wdroży ją po każdym wypchnięciu zmian.
Łączenie repozytorium
Zaimportuj repozytorium GitHub/GitLab/Bitbucket z panelu Vercel. Vercel wykrywa framework (Next.js, Vite, CRA) i automatycznie konfiguruje ustawienia kompilacji.
Ustawienia projektu
Vercel automatycznie wykrywa: framework, polecenie kompilacji (npm run build), folder wynikowy (.next, dist) oraz polecenie instalacji (npm install). W razie potrzeby zastąp te wartości w ustawieniach projektu.
Zmienne środowiskowe
Dodaj zmienne środowiskowe w panelu Vercel w sekcji Project Settings → Environment Variables. Ustaw różne wartości dla środowisk Production, Preview i Development.
# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com (Preview)
# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;Wdrożenia podglądowe
Każde wypchnięcie gałęzi git i każdy pull request otrzymują unikalny adres URL podglądu (np. myapp-git-feature-xyz.vercel.app). Udostępnij go do weryfikacji przed scaleniem — nie jest potrzebne ręczne środowisko stagingowe.
Własne domeny
Dodaj własną domenę w panelu Vercel. Skieruj DNS (rekord A lub CNAME) na adresy IP Vercel, a Vercel automatycznie zajmie się uzyskaniem certyfikatu SSL.
Konfiguracja vercel.json
Dostosuj szczegółowo sposób wdrażania: przekierowania, nagłówki, przepisywanie adresów URL i wybór regionu.
// vercel.json
{
"redirects": [
{ "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
],
"headers": [
{
"source": "/api/(.*)",
"headers": [{ "key": "Cache-Control", "value": "no-store" }]
}
],
"regions": ["iad1"] // deploy edge functions to US East
}Vercel CLI
Użyj Vercel CLI do wdrażania z terminala, pobierania lokalnie zmiennych środowiskowych i zarządzania projektami.
# Install:
npm install -g vercel
# Link project and deploy:
vercel
# Pull env variables for local dev:
vercel env pull .env.local
# Deploy to production:
vercel --prodFunkcje serverless
Pliki w api/ (Pages Router) lub app/api/*/route.ts (App Router) są automatycznie wdrażane w Vercel jako funkcje serverless w środowisku edge lub Node.js.
Hooki wdrożeniowe
Utwórz hooki wdrożeniowe (adresy URL webhooków), aby uruchamiać wdrożenia z zewnętrznych usług — jest to przydatne w przypadku zmian treści w CMS, które powinny powodować ponowne wdrożenie witryny.
# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy
# In Sanity Studio:
// Call this URL on document publishWdrażanie monorepo
W monorepo Nx lub Turborepo ustaw katalog główny Vercel na folder konkretnej aplikacji i skonfiguruj polecenie kompilacji tak, aby korzystało z narzędzia do uruchamiania zadań monorepo.
# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.nextSzybkie sprawdzenie
Czym jest wdrożenie podglądowe Vercel?
Podsumowanie
Połącz repozytorium Git z Vercel, aby wdrażać aplikacje bez konfiguracji. Każda gałąź otrzymuje adres URL podglądu. Zarządzaj zmiennymi środowiskowymi osobno dla każdego środowiska w panelu, używaj vercel.json do konfiguracji przekierowań i nagłówków, a Vercel CLI do wdrażania z terminala i pobierania zmiennych środowiskowych.
Ucz się React dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 88
- Lekcje
- 324
Często zadawane pytania
Czy lekcja „Wdrażanie na Vercel: zero konfiguracji i adresy podglądu” jest bezpłatna?
Tak — pełny tekst „Wdrażanie na Vercel: zero konfiguracji i adresy podglądu” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wdrażanie na Vercel: zero konfiguracji i adresy podglądu”?
Łączenie repozytorium GitHub z Vercel, konfigurowanie zmiennych środowiskowych i używanie wdrożeń podglądowych. Ćwiczysz React 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ąć React Academy?
Nie wymagamy żadnego doświadczenia. React 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 1 z 4.
Ile czasu zajmuje lekcja „Wdrażanie na Vercel: zero konfiguracji i adresy podglądu”?
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 React Academy?
Tak. Każda lekcja React 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
- Wdrażanie na Vercel: zero konfiguracji i adresy podglądu
- Hosting React SPA w AWS S3 i CloudFront
- Konteneryzacja aplikacji React/Next.js
- CI/CD React z GitHub Actions