Configurare unapplicazione Web Nuxt.js su Ubuntu 18.04 LTS

• Nuxt.js: Universal Framework
• Installazione di Node.js
• Applicazione dell'impalcatura
• Inizio iniziale
• Costruire per la produzione
• PM2: gestisci la tua applicazione con facilità

Nuxt.js: Universal Framework

Nuxt.js è un framework JavaScript progettato per creare rapidamente applicazioni universali Vue.js. È noto soprattutto per la sua capacità di creare app Vue.js che possono essere renderizzate sia sul server che sul client. In questo tutorial, configureremo un'applicazione Nuxt.js renderizzata dal server e la distribuiremo su Ubuntu 18.04 LTS.

Installazione di Node.js

Innanzitutto, dovrai assicurarti di eseguire Ubuntu 18.04 LTS. Quindi, dovrai installare Node.js, se non è già installato. In questo tutorial, faremo uso di Node Version Manager, o NVM, per rendere questo processo molto più semplice.

Installa NVM usando i seguenti comandi.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

Applicazione dell'impalcatura

Una volta installato Node.js, ora possiamo procedere alla configurazione dei pacchetti di cui avremo bisogno utilizzando NPM. Useremo un piccolo strumento utile chiamato create-nuxt-app, uno strumento creato dalla comunità che può facilmente creare applicazioni Nuxt.js.

Nella tua home directory, esegui il comando seguente per iniziare la generazione dell'app.

npx create-nuxt-app <nameofproject>

La console richiederà diverse opzioni importanti. Per il bene di questo tutorial, chiameremo il nostro progetto " app". Useremo Express come nostro framework server personalizzato e eseguiremo l'applicazione in modalità universale, il che ci assicura che eseguiremo il rendering del nostro sito Web sul server. Dopo aver specificato tutte le autorizzazioni necessarie, inizierà il processo di installazione e verranno creati tutti i file di configurazione.

Inizio iniziale

Una volta scaricato tutto, cambia le directory nella cartella che hai appena creato.

cd app

Ora possiamo avviare il server di sviluppo Nuxt.js.

npm run dev

Questo comando costruirà il sito usando webpack, che è un bundle di moduli, e servirà il sito su una porta localhost, che sarà generalmente porta 3000. Ti darà anche accesso ai moduli di ricarica rapida, che rimuoveranno la necessità di riavviare l'applicazione ogni volta che modifichi un file. Poiché stiamo eseguendo l'app in modalità universale, l'app verrà compilata sia sul client che sul server. Ora l'applicazione sarà in esecuzione sulla porta 3000.

Costruire per la produzione

La modalità di sviluppo è molto utile quando si sviluppa attivamente l'applicazione. Tuttavia, quando si è pronti a rendere pubblica l'applicazione, i componenti aggiuntivi come hot-ricaricamento e strumenti per sviluppatori diventano meno importanti. Questo è il motivo per cui vorremmo creare la nostra applicazione una volta, per un ambiente di produzione. Per fortuna, Nuxt.js include uno strumento che possiamo usare per creare rapidamente i moduli della nostra app per la produzione. Eseguire quanto segue per iniziare il processo di generazione della produzione.

npm run build

In sostanza, quello che stiamo facendo qui è che stiamo compilando tutti i nostri moduli webpack, con ottimizzazioni per la produzione.

Una volta completata la compilazione, sarai in grado di eseguire il sito per la produzione.

npm start

Ora, se http://yourip:3000navighi verso , vedrai la schermata iniziale Nuxt.js, che conferma che sei in esecuzione in modalità di produzione.

PM2: gestisci la tua applicazione con facilità

Ora capiamo le basi dell'esecuzione della nostra applicazione per la produzione. In termini di ambiente di produzione, preferiremmo un buon modo per mantenere la nostra applicazione in esecuzione per sempre, riavviare automaticamente la nostra applicazione quando necessario e monitorare le risorse della nostra applicazione. È qui che entra in gioco Process Manager 2 (PM2). PM2 è un gestore di processi Node.js per applicazioni di produzione, che include molti importanti strumenti di produzione come bilanciamento del carico, registri avanzati, script di avvio e molto altro. Innanzitutto, installa PM2.

npm install pm2 -g

Questo installa PM2 a livello globale in modo che possiamo usarlo ovunque sul nostro server. Una volta terminato il download di PM2, possiamo avviare la nostra applicazione.

pm2 start <appfolder>/server/index.js

Nota che stiamo avviando il file del server che si trova all'interno della nostra radice dell'applicazione.

Se desideri visualizzare le risorse utilizzate dall'applicazione, puoi farlo con il pm2 monitcomando. Questo farà apparire un'interfaccia simile a quella di ncurses, dove puoi raccogliere con precisione dati sulla RAM della tua applicazione, CPU e utilizzo del disco.

Ormai, la tua applicazione funzionerà esattamente com'era quando l'abbiamo eseguita con npm in precedenza, tranne ora che abbiamo un controllo molto maggiore quando si tratta di ottimizzazioni della produzione.

Ora hai una build dell'applicazione Nuxt.js che viene distribuita per la produzione con Node.js e Ubuntu 18.04. Se desideri saperne di più su Nuxt e su tutte le sue funzionalità di approfondimento, non esitare a visitare la loro documentazione ufficiale .