PProfessNet Academy
Vercel — deploy frontendów/03core9 min

Preview deployments i workflow z Pull Requestami

Każda zmiana ma swój adres

Preview deployment to pełne, działające wdrożenie Twojej gałęzi pod unikalnym URL — zanim cokolwiek trafi na produkcję. To jedna z najmocniejszych cech Vercela: recenzent klika link i widzi działającą zmianę, a nie tylko diff.

Jak to działa z PR

  1. Tworzysz gałąź i pushujesz ją na GitHub.
  2. Otwierasz Pull Request do main.
  3. Vercel automatycznie buduje Preview i dodaje komentarz w PR z linkiem.
  4. Każdy nowy commit w PR generuje świeży preview pod tym samym wpisem.
  5. Po merge do main Vercel buduje Production.
git switch -c feature/raporty-mfa
# ...zmiany...
git push -u origin feature/raporty-mfa
# Otwórz PR -> Vercel sam podlinkuje preview w komentarzu

Co daje preview w code review

KorzyśćDlaczego ważne
Wizualna weryfikacjaRecenzent widzi UI, nie tylko kod
Testy manualneKlikasz funkcję na żywo przed merge
Pokaz dla product owneraAkceptacja zmiany przed produkcją
IzolacjaPreview nie rusza danych produkcyjnych (przy osobnym env)

Wskazówka: Wklejaj link do preview do wątku PR-a i opisz, co konkretnie warto przeklikać ("sprawdź widżet MFA na dashboardzie"). Skraca to czas review i podnosi jego jakość.

Zmienne środowiskowe a preview

Vercel pozwala przypisać zmienne osobno do środowisk: Production, Preview, Development. Dzięki temu preview może wskazywać na testowy backend, a nie na produkcyjny.

NEXT_PUBLIC_API_URL  (Production) = https://api.zeus.example.com
NEXT_PUBLIC_API_URL  (Preview)    = https://api-staging.zeus.example.com

Komentarze i Vercel Toolbar

Na podglądzie pojawia się pasek Vercel Toolbar umożliwiający zostawianie komentarzy bezpośrednio na elemencie strony. Uwagi wracają do PR — recenzent może wskazać "ten przycisk jest za mały" klikając w niego, bez pisania osobnego komentarza w kodzie.

Workflow ProfessNet w skrócie

  1. Gałąź feature/... → push.
  2. PR do main → Vercel buduje preview.
  3. CI (GitHub Actions) uruchamia testy i lint.
  4. Recenzent przegląda kod i klika preview.
  5. Zielony CI + approve → merge.
  6. Vercel deployuje produkcję z main.

Podsumowanie

Preview deployments zamieniają review w doświadczenie wizualne: każdy PR ma działający URL z osobnym środowiskiem. To łączy Gita, GitHub Actions i Vercel w jeden płynny obieg — recenzent ocenia zmianę, zanim dotknie produkcji.