Asenna Nuxt.js-verkkosovellus Ubuntu 18.04 LTS:ään

Nuxt.js: The Universal Framework

Nuxt.js on JavaScript-kehys, joka on suunniteltu yleisten Vue.js-sovellusten nopeaan luomiseen. Se on tunnetuin kyvystään luoda Vue.js-sovelluksia, jotka voidaan renderöidä sekä palvelimella että asiakkaalla. Tässä opetusohjelmassa määritämme palvelimen tuottaman Nuxt.js-sovelluksen ja otamme sen käyttöön Ubuntu 18.04 LTS:ssä.

Node.js:n asentaminen

Ensin sinun on varmistettava, että käytät Ubuntu 18.04 LTS:ää. Sitten sinun on asennettava Node.js, jos sitä ei ole vielä asennettu. Tässä opetusohjelmassa käytämme Node Version Manageria eli NVM:ää tämän prosessin helpottamiseksi.

Asenna NVM käyttämällä seuraavia komentoja.

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

Rakennustelineet

Kun olet asentanut Node.js:n, voimme nyt jatkaa tarvitsemiemme pakettien määrittämistä NPM:n avulla. Käytämme kätevää pientä työkalua nimeltä create-nuxt-app, yhteisössä tehtyä työkalua, jolla voidaan helposti luoda Nuxt.js-sovelluksia.

Aloita sovelluksen luominen suorittamalla kotihakemistossasi seuraava komento.

npx create-nuxt-app <nameofproject>

Konsoli kehottaa sinua valitsemaan useita tärkeitä vaihtoehtoja. Tämän opetusohjelman vuoksi annamme projektillemme nimen " app". Käytämme Expressiä räätälöitynä palvelinkehyksenä ja käytämme sovellusta universaalissa tilassa, mikä varmistaa, että renderöimme verkkosivustomme palvelimella. Kun olet määrittänyt kaikki tarvittavat käyttöoikeudet, asennusprosessi alkaa ja kaikki asetustiedostot luodaan.

Alkukäynnistys

Kun kaikki on ladattu, vaihda hakemistot juuri luomaasi kansioon.

cd app

Nyt voimme käynnistää Nuxt.js-kehityspalvelimen.

npm run dev

Tämä komento rakentaa sivuston webpackilla, joka on moduuliniputtaja, ja palvelee sivustoa localhost-portissa, joka on yleensä portti 3000. Se antaa sinulle myös pääsyn hot-reloading-moduuleihin, mikä poistaa tarpeen käynnistää sovellus uudelleen aina, kun muutat tiedostoa. Koska käytämme sovellusta yleistilassa, sovellus käännetään sekä asiakkaalle että palvelimelle. Nyt sovelluksesi on käynnissä portissa 3000.

Rakennus tuotantoa varten

Kehitystila on varsin hyödyllinen, kun kehität sovellustasi aktiivisesti. Kuitenkin, kun olet valmis tekemään sovelluksesi julkiseksi, lisäosista, kuten hot-reloading ja kehittäjätyökalut, tulee vähemmän tärkeitä. Tästä syystä haluamme rakentaa sovelluksemme kerran tuotantoympäristöön. Onneksi Nuxt.js sisältää työkalun, jonka avulla voimme rakentaa nopeasti sovelluksemme tuotantomoduulit. Aloita tuotannon koontiprosessi suorittamalla seuraava.

npm run build

Pohjimmiltaan olemme tekemässä kaikkia webpack-moduulejamme tuotannon optimoinnilla.

Kun rakennus on valmis, voit käyttää sivustoa tuotantoa varten.

npm start

Jos nyt siirryt kohtaan http://yourip:3000, näet Nuxt.js-aloitusnäytön, joka vahvistaa, että käytät tuotantotilaa.

PM2: Hallitse sovellustasi helposti

Nyt ymmärrämme sovelluksemme tuotannon perusteet. Tuotantoympäristön kannalta suosimme hyvää tapaa pitää sovelluksemme käynnissä ikuisesti, käynnistää sovelluksemme automaattisesti uudelleen tarvittaessa ja valvoa sovelluksemme resursseja. Tässä tulee esiin Process Manager 2 (PM2). PM2 on Node.js-prosessinhallinta tuotantosovelluksille, joka sisältää monia tärkeitä tuotantotyökaluja, kuten kuormituksen tasapainotuksen, edistyneet lokit, käynnistysskriptit ja paljon muuta. Asenna ensin PM2.

npm install pm2 -g

Tämä asentaa PM2:n maailmanlaajuisesti, jotta voimme käyttää sitä missä tahansa palvelimellamme. Kun PM2 on ladannut, voimme käynnistää sovelluksemme.

pm2 start <appfolder>/server/index.js

Huomaa, että käynnistämme palvelintiedoston, joka sijaitsee sovelluksemme juuren sisällä.

Jos haluat tarkastella sovelluksesi kuluttamia resursseja, voit tehdä sen pm2 monitkomennolla. Tämä tuo esiin samanlaisen käyttöliittymän kuin ncurses, jossa voit kerätä tarkasti tietoja sovelluksesi RAM-muistista, suorittimesta ja levyn käytöstä.

Tähän mennessä sovelluksesi toimii täsmälleen samalla tavalla kuin silloin, kun suoritimme sen npm:llä aiemmin, paitsi nyt meillä on paljon enemmän hallintaa tuotannon optimointien suhteen.

Sinulla on nyt Nuxt.js-sovelluskoonnos, joka on otettu käyttöön tuotannossa Node.js:n ja Ubuntu 18.04:n kanssa. Jos haluat oppia lisää Nuxtista ja kaikista sen perusteellisista ominaisuuksista, vieraile heidän virallisessa dokumentaatiossaan .