Wie du Nuxt auf Saplo einrichtest (Vue mit SSR-Rendering)

Nuxt ist ein auf Vue basierendes Framework mit vollem serverseitigem Rendering, ähnlich dem, was Next.js für React ist. SSR erfordert jedoch einen langlebigen Node-Prozess, der im Speicher gehalten wird, nicht nur ein Verzeichnis mit statischen Dateien, sodass ein gewöhnliches Shared Hosting damit nicht zurechtkommt. Auf Saplo kannst du Nuxt als verwalteten Dienst mit automatischem Neustart ausführen, und nginx leitet den Traffic von deiner Domain darauf um.

Für wen ist Nuxt auf Saplo geeignet?

Bevor du mit der Installation beginnst, prüfe, ob dies die richtige Wahl für dein Projekt ist:

• Unternehmenswebsite, die mit Vue erstellt wird und in Suchmaschinenergebnissen gut abschneiden soll - Serverseitiges Rendering bietet einen Vorteil, den eine klassische SPA aus einem rein statischen Build nicht bieten kann.
• Headless Shop, der an eine eigene API angebunden ist - Nuxt rendert Produktseiten serverseitig, was bei der Indexierung hilft.
• Fullstack-Anwendung - Nuxt hat eingebaute Server-Routes (/server/api), sodass du ein einfaches Backend im selben Projekt schreiben kannst.
• Du möchtest Bereitstellungen mit git push anstelle einer manuellen Konfiguration des Node-Prozesses - Du bindest das Repository einmal an, und Saplo erstellt und startet den Dienst automatisch neu.

Wenn die Website kein SSR benötigt (rein statisches nuxt generate), ist ein statischer Stack aus demselben Katalog leichter und günstiger im Unterhalt.

Anforderungen

Um Nuxt auf Saplo zu betreiben, benötigst du:

• Eine Box im Tarif L oder höher - SSR hält den Node-Prozess ständig im Speicher und rendert jede Anfrage neu, daher benötigt es mehr RAM als eine gewöhnliche statische Seite.
• Mindestens 512 MB freien RAM und 3 GB Speicherplatz für den Anwendungsprozess selbst.
• Eine Domain oder Subdomain *.saploapp.pl, im Preis jedes Tarifs enthalten.
• Ein Git-Repository, wenn du die automatische Bereitstellung nutzen möchtest (optional für den Anfang, du kannst die Anwendung auch als .zip-Archiv über das Panel hochladen).

Schritt-für-Schritt-Anleitung zur Installation

1. Gehe im Saplo-Panel zum App-Katalog und wähle Nuxt (Kategorie "Anwendungen").
2. Wähle eine Box im Plan L oder höher und gib den Namen der Anwendung an - daraus wird die Standard-Subdomain generiert.
3. Wähle die Node.js-Version für den Build (18, 20 oder 22, standardmäßig 22) und bestätige die Installation.
4. Die Engine erstellt ein minimales Nuxt 4-Gerüst (in Nuxt 4 wurde der Anwendungscode in das Verzeichnis app/ verschoben), erstellt das Projekt und startet den lang laufenden Prozess .output/server/index.mjs über den Supervisor auf Port 3000, während Nginx den Traffic von der Domain auf diesen Port proxyed.
5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 die aktive Nuxt-Startseite an - ab diesem Moment kannst du dein eigenes Projekt darauf deployen.

Bereitstellung deines eigenen Codes via Git

1. Gehe in den App-Details zum Bereich Git / CI-CD und klicke auf „GitHub verbinden“. Bestätige die Installation der „Saplo Deploy“-App und wähle das Repository mit dem Nuxt-Projekt aus.
2. Die Datei saplo.yaml muss im Stammverzeichnis des Repositorys liegen.
3. Committe und pushe die Datei saplo.yaml auf den Produktionszweig (standardmäßig main).
4. Jeder weitere git push auf diesen Zweig startet einen Build und den Neustart des Dienstes. Den Status siehst du unter dem Tab Deployments.
5. Saplo prüft nach dem Build das Vorhandensein der Datei .output/server/index.mjs. Falls sie fehlt, wird der Deploy mit einem Fehler beendet, anstatt die funktionierende Version durch eine fehlerhafte zu ersetzen.

Beispiel für eine minimale saplo.yaml-Datei für Nuxt:

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

Nuxt auf Saplo vs. Alternativen

Häufig gestellte Fragen

Kann ich eine vollständig statische Version anstelle von SSR generieren? Ja, nuxt generate liefert einen statischen Output - wähle dann im App-Katalog den statischen Stack anstelle von Nuxt.

Wie viel RAM benötigt Nuxt in der Praxis? Das Rezept-Manifest gibt ein Minimum von 512 MB an, aber unter realem Produktionsverkehr ist es besser, eine Box L einzuplanen, damit der SSR-Prozess Reserven für Lastspitzen hat. Eine Box L kostet 139 € pro Jahr.

Funktioniert Nuxt 3 auch, wenn das Scaffold Nuxt 4 generiert? Ja, die Installation aus dem Katalog erstellt ein Start-Template für Nuxt 4, aber dein eigenes Projekt auf Nuxt 3 kannst du mit git push ohne Änderungen bereitstellen - Build und Prozessstart funktionieren gleich.

Was passiert, wenn der Build fehlschlägt? Die zuvor funktionierende Version der Anwendung bleibt erhalten, Saplo ersetzt sie nicht durch eine defekte.

Bekomme ich SSL und eine eigene Domain? Ja, das SSL-Zertifikat ist automatisch, und eine Domain oder Subdomain *.saploapp.pl ist im Preis jedes Plans enthalten.

Nuxt auf Saplo richtest du in wenigen Minuten von Grund auf bis zu einer funktionierenden Domain ein, und jedes weitere git push startet den Dienst mit der neuen Version ohne dein Zutun neu. Wenn das Projekt kein SSR benötigt, wartet im selben Verzeichnis ein leichterer und günstigerer statischer Stack.