Come ospitare un’applicazione Next.js su Plesk: Guida passo-passo

In questo articolo voglio trattare un argomento che si discosta un po’ dalle tematiche che solitamente affronto, che di solito sono meno tecniche e più semplici, legate a soprattutto a WordPress, automazione e gestione dei contenuti.

In passato mi sono trovato in difficoltà cercando una soluzione per ospitare un’applicazione Next.js su un server con Plesk.

Ho pensato che sarebbe stato utile creare una guida per archiviare la soluzione e poterla riprendere all’occorrenza come nota personale e, già che ci sono, per togliere le castagne dal fuoco a chi, si trova nella stessa situazione.

In particolare, l’obiettivo di questo articolo è fare chiarezza su una procedura che potrebbe sembrare complicata, ma che, con le giuste informazioni, risulta relativamente semplice.

Il pannello di controllo Plesk

Tra i pannelli di controllo più utilizzati per l’hosting web, Plesk è uno dei miei preferiti. Plesk mi ha sempre permesso di gestire facilmente i miei siti web e alcune delle mie applicazioni in Node.js.

Tuttavia, quando mi sono trovato a dover ospitare una applicazione Next.js su un server basato su Plesk, ho incontrato alcune difficoltà che voglio condividere.

Procedura per ospitare un’applicazione Next.js su Plesk

Prima di procedere, assicurati di avere i seguenti prerequisiti:

• Server con Plesk Control Panel già configurato.
• Node.js e Git Extension già installati e configurati nel pannello Plesk. Git è di solito preinstallato, Node.js potrebbe non esserci ma l’attivazione dal pannello estensioni di Plesk è molto intuitiva. Se incontri difficoltà qui la guida ufficiale di Plesk per abilitare Node.js.
• Dominio configurato con Git in Plesk: sebbene questa parte non sia obbligatoria, è molto comodo usare un repository Git per il deploy, piuttosto che fare l’upload manuale dei file. Se non sai come fare puoi caricare via ftp (o file manager) l’intera cartella di Next.js. Se non sai come caricare i tuoi file, ecco una guida veloce.

Carica Next.js sul server

Come accennato puoi configurare Git come repository locale o prelevare il contenuto direttamente de un eventuale repository online (ad esempio Github). Se non ha familiarità con Git semplicemente carica la tua cartella contenente l’applicazione Next.js nella root del tuo sito.

Una volta che i tuoi file sono stati caricati correttamente sul server, dovrai accedere alla sezione “Node.js” del tuo dominio.

Build dell’applicazione

Adesso dovrai eseguire il comando per costruire il progetto. Questo è un passaggio fondamentale per preparare la tua applicazione per l’esecuzione in modalità produzione.
Vai su Run Node.js commands all’interno del gestore di Node,js, posizionati nel campo testuale e dalle opzioni proposte che appariranno seleziona “build”. Esegui.

Questo comando costruisce il progetto e prepara i file per la produzione. Al termine della costruzione, puoi passare al passo successivo.

Configurazione del gestore Node.js

1. Document Root: Devi impostare il percorso della cartella che conterrà i file statici del progetto una volta che è stato costruito. All’interno di questa cartella, troverai i file CSS, le immagini e altri asset. Generalmente il percorso è /httpdocs/.next/static, ma potrebbe variare a seconda della configurazione del tuo progetto.
2. Application Mode: Plesk esegue sempre le applicazioni Node.js in modalità sviluppo (development mode) di default. Questo va bene per lo sviluppo, ma in produzione è preferibile eseguire l’applicazione in modalità produzione (production mode). Ti spiegherò come fare questo nel prossimo passo.
3. Application Startup File: Qui dovrai specificare il file principale per avviare la tua applicazione Next.js, che si trova generalmente in /node_modules/.bin/next.

Avvio dell’applicazione

Dopo che la compilazione dei dettagli per la tua applicazione è stata completata correttamente, puoi avviare l’applicazione. O se hai eseguito delle modifiche riavviala. Adesso prova a visitare il tuo sito nel browser: l’applicazione dovrebbe essere in esecuzione. Ma potresti vedere qualche errore (ad esempio: Error: Cannot find module), non preoccuparti, adesso ci occupiamo di risolvere l’errore.

Risoluzione del problema della modalità di sviluppo

Uno dei problemi più comuni che incontrerai durante questa configurazione è che l’applicazione si avvia in modalità sviluppo (development mode), nonostante tu abbia eseguito la build del progetto.

Per risolvere questo, dovrai fare una piccola modifica al file di avvio dell’applicazione.

Il file da modificare è:

node_modules/.bin/next

Dovrai accedere a questo file e fare la seguente modifica:

//cerca la riga che definisce il comando di avvio
defaultCommand = "dev";
// sostituiscila con questa
defaultCommand = "start";

Ci sono diversi modi per editare il file, puoi accedere via SSH dal tuo terminale locale, o se vuoi semplificarti la vita puoi anche utilizzare direttamente SSH Terminal (direttamente nel Dev Tools del tuo sito) che trovi in Plesk. Non usare il file manager.

Una volta salvata questa modifica, la tua applicazione Next.js dovrebbe partire correttamente in modalità produzione.

Test finale

Riavvia l’applicazione e prova a ricaricare il sito nel browser. Se tutto è stato configurato correttamente, la tua applicazione Next.js dovrebbe ora essere in esecuzione in modalità produzione, pronta per gestire il traffico reale.

Conclusioni

Spero che questa guida ti aiuti ad evitare di rimanere bloccato come è accaduto a me, risparmiandoti ore di tentativi e frustrazione. L’hosting di un’applicazione Next.js su Plesk può sembrare complesso all’inizio, ma seguendo questi passaggi dovresti riuscire a configurarlo senza problemi.

Se hai domande o suggerimenti, non esitare a lasciare un commento. Se vuoi suggerire un altro tema per i prossimi articoli compila questo form.

Buona fortuna con il tuo progetto Next.js!