Nastavte webovú aplikáciu Nuxt.js na Ubuntu 18.04 LTS

Nuxt.js: Univerzálny rámec

Nuxt.js je JavaScript framework určený na rýchle vytváranie univerzálnych Vue.js aplikácií. Je najznámejší svojou schopnosťou vytvárať aplikácie Vue.js, ktoré je možné vykresliť na serveri aj na klientovi. V tomto návode nastavíme serverom vykreslenú aplikáciu Nuxt.js a nasadíme ju na Ubuntu 18.04 LTS.

Inštalácia Node.js

Najprv sa budete musieť uistiť, že používate Ubuntu 18.04 LTS. Potom budete musieť nainštalovať Node.js, ak ešte nie je nainštalovaný. V tomto návode použijeme Správcu verzií uzla alebo NVM, aby sme tento proces výrazne zjednodušili.

Nainštalujte NVM pomocou nasledujúcich príkazov.

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

Aplikácia lešenia

Po nainštalovaní Node.js môžeme pristúpiť k nastaveniu balíkov, ktoré budeme potrebovať pomocou NPM. Budeme používať malý šikovný nástroj s názvom create-nuxt-app, nástroj vytvorený komunitou, ktorý dokáže jednoducho vytvárať aplikácie Nuxt.js.

Vo svojom domovskom adresári spustite nasledujúci príkaz a spustite generovanie aplikácie.

npx create-nuxt-app <nameofproject>

Konzola vás vyzve na niekoľko dôležitých možností. V záujme tohto tutoriálu pomenujeme náš projekt " app". Ako vlastný serverový framework použijeme Express a aplikáciu spustíme v univerzálnom režime, čo zaisťuje, že našu webstránku vykreslíme na serveri. Po zadaní všetkých požadovaných povolení sa spustí proces inštalácie a vytvoria sa všetky konfiguračné súbory.

Počiatočný štart

Keď sa všetko stiahne, zmeňte adresáre do priečinka, ktorý ste práve vytvorili.

cd app

Teraz môžeme spustiť vývojový server Nuxt.js.

npm run dev

Tento príkaz vytvorí stránku pomocou webpacku, čo je balík modulov, a obsluhuje stránku na porte localhost, ktorým bude vo všeobecnosti port 3000. Poskytne vám tiež prístup k modulom rýchleho opätovného načítania, čím sa odstráni potreba reštartovať aplikáciu pri každej zmene súboru. Keďže aplikáciu spúšťame v univerzálnom režime, aplikácia sa skompiluje na klientovi aj na serveri. Teraz bude vaša aplikácia bežať na porte 3000.

Budova na výrobu

Vývojový režim je celkom užitočný, keď aktívne vyvíjate svoju aplikáciu. Keď ste však pripravení zverejniť svoju aplikáciu, doplnky, ako napríklad rýchle opätovné načítanie a vývojárske nástroje, sa stanú menej dôležitými. To je dôvod, prečo budeme chcieť vytvoriť našu aplikáciu raz, pre produkčné prostredie. Našťastie Nuxt.js obsahuje nástroj, ktorý môžeme použiť na rýchle zostavenie modulov našej aplikácie na výrobu. Ak chcete spustiť proces zostavovania produkcie, spustite nasledujúce.

npm run build

V podstate tu robíme, že kompilujeme všetky naše moduly webpack s optimalizáciami pre produkciu.

Po dokončení zostavovania budete môcť spustiť stránku na výrobu.

npm start

Ak teraz prejdete na http://yourip:3000, uvidíte úvodnú obrazovku Nuxt.js, ktorá potvrdzuje, že používate produkčný režim.

PM2: Spravujte svoju aplikáciu jednoducho

Teraz rozumieme základom spustenia našej aplikácie pre produkciu. Z hľadiska produkčného prostredia by sme uprednostnili dobrý spôsob, ako udržať našu aplikáciu v prevádzke navždy, v prípade potreby automaticky reštartovať našu aplikáciu a monitorovať zdroje našej aplikácie. Tu prichádza na scénu Process Manager 2 (PM2). PM2 je správca procesov Node.js pre produkčné aplikácie, ktorý zahŕňa mnoho dôležitých produkčných nástrojov, ako je vyrovnávanie záťaže, pokročilé protokoly, spúšťacie skripty a mnoho ďalšieho. Najprv nainštalujte PM2.

npm install pm2 -g

Toto nainštaluje PM2 globálne, takže ho môžeme použiť kdekoľvek na našom serveri. Po dokončení sťahovania PM2 môžeme spustiť našu aplikáciu.

pm2 start <appfolder>/server/index.js

Všimnite si, že spúšťame súbor servera, ktorý sa nachádza v koreňovom adresári našej aplikácie.

Ak chcete zobraziť zdroje, ktoré vaša aplikácia spotrebováva, môžete tak urobiť pomocou pm2 monitpríkazu. Tým sa otvorí rozhranie podobné ncurses, kde môžete presne zhromažďovať údaje o RAM, CPU a disku vašej aplikácie.

Teraz bude vaša aplikácia bežať presne tak, ako keď sme ju spustili predtým s npm, až na to, že teraz máme oveľa väčšiu kontrolu, pokiaľ ide o optimalizáciu výroby.

Teraz máte zostavu aplikácie Nuxt.js, ktorá je nasadená na produkciu s Node.js a Ubuntu 18.04. Ak by ste sa chceli dozvedieť viac o Nuxte a všetkých jeho podrobných funkciách, pokojne navštívte ich oficiálnu dokumentáciu .