Blog / Poradniki

Jak postawić Nuxt na Saplo (Vue z renderowaniem SSR)

Nuxt to dla Vue to, czym Next.js jest dla Reacta - pełne renderowanie po stronie serwera, które wymaga długo działającego procesu Node w tle, nie tylko katalogu ze statycznymi plikami. Na Saplo Nuxt uruchamiasz jako usługę zarządzaną z automatycznym restartem, z wdrożeniem prosto z repozytorium Git.

Grzegorz Kalmus· ·52 wyświetleń

Nuxt to framework budowany na Vue z pełnym renderowaniem po stronie serwera - analogicznie do tego, czym Next.js jest dla Reacta. SSR wymaga jednak długo działającego procesu Node trzymanego w pamięci, nie samego katalogu ze statycznymi plikami, więc zwykły hosting współdzielony sobie z tym nie radzi. Na Saplo Nuxt uruchamiasz jako usługę zarządzaną z automatycznym restartem, a nginx kieruje na nią ruch z domeny.

Dla kogo jest Nuxt na Saplo

Zanim zaczniesz instalację, sprawdź, czy to dobry wybór dla Twojego projektu:

  • strona firmowa budowana w Vue, która ma dobrze wypadać w wynikach wyszukiwania - renderowanie po stronie serwera daje przewagę, której nie da klasyczny SPA złożony z samego statycznego builda,
  • sklep headless podpięty pod własne API - Nuxt renderuje strony produktowe po stronie serwera, co pomaga w indeksacji,
  • aplikacja fullstack - Nuxt ma wbudowane server routes (/server/api), więc prosty backend piszesz w tym samym projekcie,
  • chcesz wdrożeń z git push zamiast ręcznej konfiguracji procesu Node - podpinasz repozytorium raz, a Saplo buduje i restartuje usługę automatycznie.

Jeśli strona nie potrzebuje SSR (samo nuxt generate w pełni statyczny), lżejszy i tańszy w utrzymaniu będzie stack static z tego samego katalogu.

Wymagania

Żeby postawić Nuxt na Saplo, potrzebujesz:

  • Boxa w planie L lub wyższym - SSR trzyma proces Node stale w pamięci i renderuje każde żądanie na nowo, więc potrzebuje więcej zapasu RAM niż zwykła strona statyczna,
  • minimum 512 MB wolnego RAM i 3 GB miejsca na dysku pod sam proces aplikacji,
  • domeny albo subdomeny *.saploapp.pl w cenie każdego planu,
  • repozytorium Git, jeśli chcesz korzystać z automatycznego wdrażania (opcjonalne na start, aplikację możesz też wgrać archiwum .zip przez panel).

Instalacja krok po kroku

  1. W panelu Saplo wejdź w Katalog aplikacji i wybierz Nuxt (kategoria "Aplikacje").
  2. Wskaż Box w planie L lub wyższym oraz nazwę aplikacji - z niej powstaje domyślna subdomena.
  3. Wybierz wersję Node.js do builda (18, 20 albo 22, domyślnie 22) i zatwierdź instalację.
  4. Silnik tworzy minimalny szkielet Nuxt 4 (w Nuxt 4 kod aplikacji przeniósł się do katalogu app/), buduje projekt i uruchamia długo działający proces .output/server/index.mjs przez supervisora na porcie 3000, a nginx proxy'uje ruch z domeny na ten port.
  5. Po zakończeniu instalacji domena z kroku 2 pokazuje działającą stronę startową Nuxt - od tego momentu wdrażasz na nią własny projekt.

Wdrożenie własnego kodu przez Git

  1. W szczegółach aplikacji znajdź sekcję Git / CI-CD i kliknij "Połącz GitHub", potwierdź instalację aplikacji "Saplo Deploy" i wskaż repozytorium z projektem Nuxt.
  2. W katalogu głównym repozytorium musi leżeć plik saplo.yaml.
  3. Zacommituj i wypchnij plik saplo.yaml na gałąź produkcyjną (domyślnie main).
  4. Każdy kolejny git push na tę gałąź uruchamia build i restart usługi, status widzisz w zakładce Deploymenty.
  5. Saplo weryfikuje po buildzie obecność pliku .output/server/index.mjs - jeśli go nie ma, deploy kończy się błędem zamiast podmiany działającej wersji na zepsutą.

Przykład minimalnego pliku saplo.yaml dla Nuxt:

name: moj-projekt
stack: nuxt
runtime:
  node: "22"
build:
  install: npm ci
  command: npm run build
start:
  command: node .output/server/index.mjs
  port: 3000

Nuxt na Saplo kontra alternatywy

Vercel dla Nuxt Własny VPS Nuxt na Saplo
Model rozliczenia zużycie funkcji i transferu, rośnie z ruchem stały koszt serwera, konfiguracja ręczna stały koszt Boxa
Wdrożenia z Gita tak, natywnie trzeba złożyć samemu (CI/CD) tak, git push na gałąź produkcyjną
Uruchomienie procesu SSR w pełni zarządzane pm2 albo systemd ręcznie usługa zarządzana z auto-restartem
Migracja istniejącego projektu punkt wyjścia budowa środowiska od zera dopisujesz saplo.yaml, reszta bez zmian

Najczęstsze pytania

Czy mogę wygenerować w pełni statyczną wersję zamiast SSR? Tak, nuxt generate daje statyczny output - wtedy w katalogu aplikacji wybierz stack static zamiast Nuxt.

Ile RAM potrzebuje Nuxt w praktyce? Manifest przepisu podaje minimum 512 MB, ale pod realnym ruchem produkcyjnym lepiej zaplanować Box L, żeby proces SSR miał zapas na skoki obciążenia.

Czy Nuxt 3 też zadziała, skoro scaffold generuje Nuxt 4? Tak, instalacja z katalogu stawia startowy szkielet Nuxt 4, ale własny projekt na Nuxt 3 wdrożysz przez git push bez żadnych zmian - build i uruchomienie procesu działają tak samo.

Co się stanie, jeśli build się nie powiedzie? Poprzednia działająca wersja aplikacji zostaje na miejscu, Saplo nie podmienia jej na zepsutą.

Czy dostanę SSL i własną domenę? Tak, certyfikat SSL jest automatyczny, a domenę albo subdomenę *.saploapp.pl masz w cenie każdego planu.

Nuxt na Saplo stawiasz od zera do działającej domeny w kilka minut, a każdy kolejny git push restartuje usługę z nową wersją bez Twojego udziału. Jeśli projekt nie potrzebuje SSR, w tym samym katalogu poczekuje lżejszy i tańszy w utrzymaniu stack static.

#git-deploy #javascript #nuxt #poradnik #vue

Powiązane wpisy