Blog / Poradniki

Jak postawić Vue na Saplo (lekka aplikacja frontend)

Vue 3 zbudowany przez Vite stawiasz na Saplo tak samo jak każdą inną aplikację z katalogu, a wynikowy katalog `dist` trafia prosto pod nginx, bez procesu Node trzymanego w pamięci. Poniżej krok po kroku, łącznie z wdrożeniem własnego kodu przez `git push` i routingiem Vue Router w trybie history.

Grzegorz Kalmus· ·34 wyświetleń

Vue 3 to obok Reacta druga najpopularniejsza biblioteka do budowy interfejsów, i tak samo jak React nie jest sam w sobie hostingiem. Zbudowany projekt (najczęściej przez Vite) to statyczne pliki HTML, CSS i JS, które wymagają serwera z poprawnym fallbackiem tras dla Vue Router w trybie history - bez tego odświeżenie podstrony kończy się błędem 404. Na Saplo Vue stawiasz identycznie jak każdą inną aplikację z katalogu: silnik buduje projekt, wystawia gotowy katalog dist pod nginx i sam konfiguruje fallback tras.

Dla kogo jest Vue na Saplo

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

  • budujesz panel administracyjny - Saplo serwuje gotowy build jako pliki statyczne, bez własnego procesu Node w tle,
  • frontend ma się łączyć z własnym API - stawiasz SPA obok backendu (Django, Node, Docker) na tym samym Boxie albo osobno,
  • aplikacja jednostronicowa z Vue Router w trybie history - fallback wszystkich tras na index.html jest skonfigurowany automatycznie, nie musisz nic dopisywać w nginx,
  • chcesz wdrożeń z git push zamiast ręcznego przesyłania plików przez FTP - podpinasz repozytorium raz, każdy push na gałąź produkcyjną buduje i wdraża nową wersję sam.

Jeśli projekt potrzebuje renderowania po stronie serwera i lepszego SEO, sprawdź w katalogu aplikacji stack Nuxt zamiast czystego Vue.

Wymagania

Żeby postawić Vue na Saplo, potrzebujesz:

  • Boxa w dowolnym planie, nawet S wystarczy - zbudowany SPA to garść statycznych plików, bez procesu trzymanego w pamięci po buildzie,
  • minimum 256 MB wolnego RAM na sam proces builda oraz 2 GB miejsca na dysku,
  • domeny albo subdomeny *.saploapp.pl w cenie każdego planu,
  • repozytorium Git, jeśli chcesz automatycznych wdrożeń (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 Vue.js (kategoria "Aplikacje").
  2. Wskaż Box oraz nazwę aplikacji - z niej powstaje domyślna subdomena <nazwa>.saploapp.pl.
  3. Wybierz wersję Node.js do builda (18, 20 albo 22, domyślnie 20) i zatwierdź instalację.
  4. Silnik scaffolduje szkielet Vue przez Vite (odpowiednik npm create vite -- --template vue), instaluje zależności i buduje projekt, a zawartość katalogu dist trafia bezpośrednio do katalogu aplikacji, serwowanego przez nginx.
  5. Po zakończeniu instalacji domena z kroku 2 pokazuje startowy szkielet Vite + Vue - od tego momentu wdrażasz na nią własny kod.

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 Vue.
  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łąź buduje projekt i podmienia zawartość katalogu dist na Boxie, status widzisz w zakładce Deploymenty.
  5. Jeśli build się nie powiedzie, poprzednia działająca wersja zostaje na miejscu - Saplo nie podmienia jej na zepsutą.

Przykład minimalnego pliku saplo.yaml dla Vue:

name: moj-projekt
stack: vue
build:
  install: npm ci
  command: npm run build
  output: dist

Vue na Saplo kontra alternatywy

Hosting współdzielony bez wsparcia SPA Firebase Hosting Vue na Saplo
Fallback tras dla Vue Router trzeba ręcznie skonfigurować przekierowania wbudowane skonfigurowane automatycznie
Wdrożenie ręczne wgrywanie plików git push albo CLI git push na gałąź produkcyjną
Rozliczenie stały koszt hostingu zużycie transferu, rośnie z ruchem stały koszt Boxa
Backend obok frontendu zwykle brak osobna usługa (funkcje) ten sam Box, inna aplikacja z tego samego katalogu

Najczęstsze pytania

Czy Vue Router w trybie history działa bez dodatkowej konfiguracji? Tak, fallback wszystkich ścieżek na index.html jest aktywny od razu po instalacji, więc odświeżenie dowolnej podstrony nie kończy się błędem 404.

Czy mogę mieć kilka aplikacji Vue na jednym Boxie? Tak, katalog aplikacji pozwala postawić wiele modułów obok siebie, każdy z własną subdomeną albo domeną.

Potrzebuję SSR i lepszego SEO - co wybrać? Stack Nuxt z tego samego katalogu - to Vue z pełnym renderowaniem po stronie serwera.

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

Jak zmienić katalog wyjściowy builda, jeśli nie używam domyślnego dist? Ustaw pole build.output w saplo.yaml na właściwą ścieżkę.

Vue na Saplo stawiasz od zera do działającej domeny w kilka minut, a routing Vue Router działa bez ręcznej konfiguracji. Jeśli projekt urośnie do potrzeby SSR, migracja do Nuxt w tym samym katalogu nie wymaga zmiany hostingu.

#git-deploy #javascript #poradnik #spa #vue

Powiązane wpisy