Come installare Nuxt su Saplo (Vue con rendering SSR)

Nuxt è un framework costruito su Vue con rendering completo lato server, analogo a ciò che Next.js è per React. Tuttavia, l'SSR richiede un processo Node a lunga esecuzione mantenuto in memoria, non solo una directory con file statici, quindi un normale hosting condiviso non è in grado di gestirlo. Su Saplo, avvii Nuxt come servizio gestito con riavvio automatico e nginx indirizza il traffico del dominio su di esso.

Per chi è adatto Nuxt su Saplo

Prima di iniziare l'installazione, verifica se è la scelta giusta per il tuo progetto:

• sito aziendale costruito in Vue, che deve ottenere buoni risultati nei motori di ricerca - il rendering lato server offre un vantaggio che un classico SPA composto solo da una build statica non può dare,
• negozio headless collegato alla tua API - Nuxt renderizza le pagine dei prodotti lato server, il che aiuta con l'indicizzazione,
• applicazione fullstack - Nuxt ha le route server integrate (/server/api), quindi puoi scrivere un semplice backend nello stesso progetto,
• desideri distribuzioni con git push invece della configurazione manuale del processo Node - colleghi il repository una volta e Saplo costruisce e riavvia il servizio automaticamente.

Se il sito non necessita di SSR (solo nuxt generate completamente statico), uno stack statico dalla stessa directory sarà più leggero e più economico da mantenere.

Requisiti

Per configurare Nuxt su Saplo, hai bisogno di:

• Un Box nel piano L o superiore - SSR mantiene il processo Node costantemente in memoria e renderizza ogni richiesta da capo, quindi richiede più RAM rispetto a una normale pagina statica,
• un minimo di 512 MB di RAM libera e 3 GB di spazio su disco per il solo processo dell'applicazione,
• un dominio o sottodominio *.saploapp.pl incluso nel prezzo di ogni piano,
• un repository Git, se vuoi usare il deployment automatico (opzionale all'inizio, puoi anche caricare l'applicazione come archivio .zip tramite il Pannello).

Installazione passo dopo passo

1. Nel Pannello Saplo, vai su Catalogo delle applicazioni e seleziona Nuxt (categoria "Applicazioni").
2. Seleziona un Box del piano L o superiore e il nome dell'applicazione - da questo verrà creato il sottodominio predefinito.
3. Scegli la versione di Node.js per il build (18, 20 o 22, predefinito 22) e conferma l'installazione.
4. Il motore crea uno scheletro minimo di Nuxt 4 (in Nuxt 4 il codice dell'applicazione si è spostato nella directory app/), compila il progetto e avvia un processo a lunga esecuzione .output/server/index.mjs tramite supervisor sulla porta 3000, e Nginx fa da proxy al traffico dal dominio a quella porta.
5. Al termine dell'installazione, il dominio del passo 2 mostra la pagina iniziale di Nuxt funzionante - da questo momento puoi distribuire il tuo progetto su di essa.

Distribuzione del proprio codice tramite Git

1. Nei dettagli dell'applicazione, trova la sezione Git / CI-CD e clicca su "Connetti GitHub", conferma l'installazione dell'applicazione "Saplo Deploy" e indica il repository con il progetto Nuxt.
2. Nella directory principale del repository deve trovarsi il file saplo.yaml.
3. Effettua il commit e il push del file saplo.yaml sul branch di produzione (di default main).
4. Ogni successivo git push su questo branch avvia la build e il riavvio del servizio; puoi vedere lo stato nella scheda Deployment.
5. Dopo la build, Saplo verifica la presenza del file .output/server/index.mjs - se non è presente, il deploy termina con un errore invece di sostituire la versione funzionante con una non funzionante.

Esempio di file saplo.yaml minimo per 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 su Saplo vs. alternative

Domande frequenti

Posso generare una versione completamente statica invece di SSR? Sì, nuxt generate produce un output statico: in tal caso, nella directory dell'applicazione, scegli lo stack statico invece di Nuxt.

Di quanta RAM ha bisogno Nuxt in pratica? Il manifesto della ricetta indica un minimo di 512 MB, ma sotto traffico di produzione reale è meglio pianificare un Box L, in modo che il processo SSR abbia un margine per i picchi di carico.

Nuxt 3 funzionerà anche se lo scaffold genera Nuxt 4? Sì, l'installazione dal catalogo crea uno scheletro di partenza per Nuxt 4, ma puoi distribuire il tuo progetto su Nuxt 3 tramite git push senza alcuna modifica: la build e l'avvio del processo funzionano allo stesso modo.

Cosa succede se la build fallisce? La versione precedente funzionante dell'applicazione rimane al suo posto, Saplo non la sostituisce con una danneggiata.

Otterrò SSL e un mio Dominio? Sì, il certificato SSL è automatico e il Dominio o sottodominio *.saploapp.pl è incluso nel prezzo di ogni piano.

Su Saplo, puoi installare Nuxt da zero a un Dominio funzionante in pochi minuti, e ogni git push successivo riavvia il servizio con la nuova versione senza il tuo intervento. Se il progetto non necessita di SSR, nella stessa directory ti aspetta uno stack statico più leggero e più economico da mantenere.