Vendosni një aplikacion ueb Nuxt.js në Ubuntu 18.04 LTS

Nuxt.js: Korniza Universale

Nuxt.js është një kornizë JavaScript e krijuar për krijimin e shpejtë të aplikacioneve universale Vue.js. Është më e famshmja për aftësinë e saj për të krijuar aplikacione Vue.js që mund të jepen në server si dhe në klient. Në këtë tutorial, ne do të konfigurojmë një aplikacion Nuxt.js të dhënë nga serveri dhe do ta vendosim atë në Ubuntu 18.04 LTS.

Instalimi i Node.js

Së pari, do t'ju duhet të siguroheni që po ekzekutoni Ubuntu 18.04 LTS. Pastaj, do t'ju duhet të instaloni Node.js, nëse nuk është instaluar tashmë. Në këtë tutorial, ne do të përdorim Menaxherin e Versionit të Node, ose NVM, për ta bërë këtë proces shumë më të lehtë.

Instaloni NVM duke përdorur komandat e mëposhtme.

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

Aplikimi i Skeles

Pasi të keni instaluar Node.js, tani mund të vazhdojmë me konfigurimin e paketave që do të na duhen duke përdorur NPM. Ne do të përdorim një mjet të vogël të dobishëm të quajtur create-nuxt-app, një mjet i krijuar nga komuniteti i cili mund të krijojë lehtësisht aplikacione Nuxt.js.

Në direktorinë tuaj kryesore, ekzekutoni komandën e mëposhtme për të filluar gjenerimin e aplikacionit.

npx create-nuxt-app <nameofproject>

Konsola do t'ju kërkojë disa opsione të rëndësishme. Për hir të këtij tutoriali, ne do ta emërtojmë projektin tonë " app". Ne do të përdorim Express si kornizën tonë të personalizuar të serverit dhe do ta ekzekutojmë aplikacionin në modalitetin universal, i cili siguron që ne do të japim faqen tonë të internetit në server. Kur të keni specifikuar të gjitha lejet e kërkuara, do të fillojë procesi i instalimit dhe do të krijohen të gjithë skedarët e konfigurimit.

Fillimi fillestar

Pasi të jetë shkarkuar gjithçka, ndryshoni drejtoritë në dosjen që sapo keni krijuar.

cd app

Tani mund të nisim serverin e zhvillimit Nuxt.js.

npm run dev

Kjo komandë do të ndërtojë sitin duke përdorur uebpack, i cili është një grup modulesh, dhe do ta shërbejë sitin në një port lokal host, i cili në përgjithësi do të jetë port 3000. Ai gjithashtu do t'ju japë akses në modulet e ringarkimit të nxehtë, të cilat do të heqin nevojën për të rifilluar aplikacionin sa herë që ndryshoni një skedar. Meqenëse po e ekzekutojmë aplikacionin në modalitetin universal, aplikacioni do të kompilohet si në klient ashtu edhe në server. Tani aplikacioni juaj do të funksionojë në port 3000.

Ndërtesa për Prodhim

Modaliteti i zhvillimit është mjaft i dobishëm kur jeni duke zhvilluar në mënyrë aktive aplikacionin tuaj. Sidoqoftë, kur jeni gati ta bëni aplikacionin tuaj publik, shtesat si rifreskimi i nxehtë dhe mjetet e zhvilluesit bëhen më pak të rëndësishme. Kjo është arsyeja pse ne do të dëshirojmë të ndërtojmë aplikacionin tonë një herë, për një mjedis prodhimi. Fatmirësisht, Nuxt.js përfshin një mjet që mund ta përdorim për të ndërtuar shpejt modulet e aplikacionit tonë për prodhim. Kryeni sa vijon për të filluar procesin e ndërtimit të prodhimit.

npm run build

Në thelb, ajo që ne po bëjmë këtu është që po përpilojmë të gjitha modulet tona të paketës së internetit, me optimizime për prodhim.

Pasi të përfundojë ndërtimi, do të jeni në gjendje të drejtoni sitin për prodhim.

npm start

Tani, nëse lundroni te http://yourip:3000, do të shihni ekranin spërkatës të Nuxt.js, i cili konfirmon se jeni duke punuar në modalitetin e prodhimit.

PM2: Menaxhoni aplikacionin tuaj me lehtësi

Tani ne kuptojmë bazat e ekzekutimit të aplikacionit tonë për prodhim. Për sa i përket një mjedisi prodhimi, ne do të preferonim një mënyrë të mirë për ta mbajtur aplikacionin tonë të funksionojë përgjithmonë, për të rifilluar automatikisht aplikacionin tonë kur është e nevojshme dhe për të monitoruar burimet e aplikacionit tonë. Këtu hyn Process Manager 2 (PM2). PM2 është një menaxher procesi Node.js për aplikacionet e prodhimit, i cili përfshin shumë mjete të rëndësishme të prodhimit, si balancimi i ngarkesës, regjistrat e avancuar, skriptet e fillimit dhe shumë më tepër. Së pari, instaloni PM2.

npm install pm2 -g

Kjo instalon PM2 globalisht, kështu që ne mund ta përdorim atë kudo në serverin tonë. Pasi të ketë përfunduar shkarkimi i PM2, ne mund të nisim aplikacionin tonë.

pm2 start <appfolder>/server/index.js

Vini re se ne po fillojmë skedarin e serverit që ndodhet brenda rrënjës së aplikacionit tonë.

Nëse dëshironi të shikoni burimet që po konsumon aplikacioni juaj, mund ta bëni këtë me pm2 monitkomandën. Kjo do të sjellë një ndërfaqe të ngjashme me atë të ncurses, ku mund të mblidhni saktësisht të dhëna për përdorimin e RAM-it, CPU-së dhe diskut të aplikacionit tuaj.

Deri tani, aplikacioni juaj do të funksionojë saktësisht siç ishte kur e ekzekutuam me npm më herët, përveç se tani kemi shumë më tepër kontroll kur bëhet fjalë për optimizimet e prodhimit.

Tani keni një ndërtim të aplikacionit Nuxt.js që është vendosur për prodhim me Node.js dhe Ubuntu 18.04. Nëse dëshironi të mësoni më shumë rreth Nuxt, dhe të gjitha veçoritë e tij të thella, mos ngurroni të vizitoni dokumentacionin e tyre zyrtar .