Configureu una aplicació web Nuxt.js a Ubuntu 18.04 LTS

Nuxt.js: el marc universal

Nuxt.js és un marc de JavaScript dissenyat per crear ràpidament aplicacions universals Vue.js. És més conegut per la seva capacitat de crear aplicacions Vue.js que es poden representar al servidor i al client. En aquest tutorial, configurarem una aplicació Nuxt.js renderitzada al servidor i la implementarem a Ubuntu 18.04 LTS.

Instal·lant Node.js

En primer lloc, haureu d'assegurar-vos que esteu executant Ubuntu 18.04 LTS. Aleshores, haureu d'instal·lar Node.js, si encara no està instal·lat. En aquest tutorial, farem ús del Node Version Manager, o NVM, per facilitar molt aquest procés.

Instal·leu NVM mitjançant les ordres següents.

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

Aplicació de bastida

Un cop hàgiu instal·lat Node.js, ara podem procedir a configurar els paquets que necessitarem mitjançant NPM. Farem servir una petita eina pràctica anomenada create-nuxt-app, una eina creada per la comunitat que pot crear fàcilment aplicacions Nuxt.js.

Al vostre directori d'inici, executeu l'ordre següent per començar la generació de l'aplicació.

npx create-nuxt-app <nameofproject>

La consola us demanarà diverses opcions importants. Pel bé d'aquest tutorial, anomenarem el nostre projecte " app". Utilitzarem Express com a marc de servidor personalitzat i executarem l'aplicació en mode universal, la qual cosa garanteix que renderitzarem el nostre lloc web al servidor. Quan hàgiu especificat tots els permisos necessaris, començarà el procés d'instal·lació i es crearan tots els fitxers de configuració.

Inici Inicial

Un cop s'hagi descarregat tot, canvieu els directoris a la carpeta que acabeu de crear.

cd app

Ara podem iniciar el servidor de desenvolupament Nuxt.js.

npm run dev

Aquesta ordre crearà el lloc utilitzant webpack, que és un paquet de mòduls, i servirà el lloc en un port localhost, que generalment serà port 3000. També us donarà accés als mòduls de recàrrega en calent, que eliminaran la necessitat de reiniciar l'aplicació cada vegada que canvieu un fitxer. Com que estem executant l'aplicació en mode universal, l'aplicació es compilarà tant al client com al servidor. Ara la vostra aplicació s'executarà al port 3000.

Edifici per a la producció

El mode de desenvolupament és força útil quan esteu desenvolupant activament la vostra aplicació. Tanmateix, quan esteu preparat per fer pública la vostra aplicació, els complements com ara la recàrrega en calent i les eines per a desenvolupadors són menys importants. És per això que volem construir la nostra aplicació una vegada, per a un entorn de producció. Afortunadament, Nuxt.js inclou una eina que podem utilitzar per crear ràpidament els mòduls de la nostra aplicació per a la producció. Executeu el següent per començar el procés de creació de producció.

npm run build

Bàsicament, el que estem fent aquí és compilar tots els nostres mòduls webpack, amb optimitzacions per a la producció.

Un cop finalitzada la compilació, podreu executar el lloc per a la producció.

npm start

Ara, si navegueu a http://yourip:3000, veureu la pantalla de presentació de Nuxt.js, que confirma que esteu executant en mode de producció.

PM2: Gestioneu la vostra aplicació amb facilitat

Ara entenem els conceptes bàsics per executar la nostra aplicació per a producció. Pel que fa a un entorn de producció, preferirem una bona manera de mantenir la nostra aplicació en funcionament per sempre, reiniciar-la automàticament quan sigui necessari i supervisar els recursos de la nostra aplicació. Aquí és on entra en joc Process Manager 2 (PM2). PM2 és un gestor de processos Node.js per a aplicacions de producció, que inclou moltes eines de producció importants com ara l'equilibri de càrrega, registres avançats, scripts d'inici i molt més. Primer, instal·leu PM2.

npm install pm2 -g

Això instal·la PM2 globalment perquè puguem utilitzar-lo a qualsevol lloc del nostre servidor. Un cop finalitzada la descàrrega de PM2, podem iniciar la nostra aplicació.

pm2 start <appfolder>/server/index.js

Tingueu en compte que estem iniciant el fitxer del servidor que es troba a l'arrel de la nostra aplicació.

Si voleu veure els recursos que consumeix la vostra aplicació, podeu fer-ho amb l' pm2 monitordre. Això mostrarà una interfície similar a la de ncurses, on podeu recopilar dades amb precisió sobre la memòria RAM, la CPU i l'ús del disc de la vostra aplicació.

A hores d'ara, la vostra aplicació s'executarà exactament com estava quan la vam executar amb npm anteriorment, excepte que ara tenim molt més control quan es tracta d'optimitzacions de producció.

Ara teniu una compilació d'aplicació Nuxt.js que es desplega per a la producció amb Node.js i Ubuntu 18.04. Si voleu obtenir més informació sobre Nuxt i totes les seves funcions en profunditat, no dubteu a visitar la seva documentació oficial .