Konfigurer en Nuxt.js-webapplikation på Ubuntu 18.04 LTS

Nuxt.js: The Universal Framework

Nuxt.js er en JavaScript-ramme designet til hurtigt at skabe universelle Vue.js-applikationer. Det er mest kendt for dets evne til at skabe Vue.js-apps, der kan gengives på serveren såvel som på klienten. I denne tutorial vil vi opsætte en server-renderet Nuxt.js-applikation og implementere den på Ubuntu 18.04 LTS.

Installerer Node.js

Først skal du sikre dig, at du kører Ubuntu 18.04 LTS. Derefter skal du installere Node.js, hvis det ikke allerede er installeret. I denne tutorial vil vi gøre brug af Node Version Manager eller NVM for at gøre denne proces meget nemmere.

Installer NVM ved hjælp af følgende kommandoer.

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

Stilladsapplikation

Når du har installeret Node.js, kan vi nu fortsætte med at opsætte de pakker, vi skal bruge ved hjælp af NPM. Vi vil bruge et praktisk lille værktøj kaldet create-nuxt-app, et community-lavet værktøj, som nemt kan oprette Nuxt.js-applikationer.

Kør følgende kommando i din hjemmemappe for at starte appgenereringen.

npx create-nuxt-app <nameofproject>

Konsollen vil bede dig om flere vigtige muligheder. Af hensyn til denne vejledning vil vi navngive vores projekt " app". Vi vil bruge Express som vores brugerdefinerede serverramme, og vi kører applikationen i universel tilstand, som sikrer, at vi renderer vores hjemmeside på serveren. Når du har angivet alle nødvendige tilladelser, begynder installationsprocessen, og alle konfigurationsfiler vil blive oprettet.

Indledende start

Når alt er downloadet, skal du ændre mapper til den mappe, du lige har oprettet.

cd app

Nu kan vi starte Nuxt.js udviklingsserveren.

npm run dev

Denne kommando vil bygge webstedet ved hjælp af webpack, som er en modulbundter, og betjene webstedet på en localhost-port, som generelt vil være port 3000. Det vil også give dig adgang til hot-genindlæsningsmoduler, som fjerner behovet for at genstarte programmet, hver gang du ændrer en fil. Da vi kører appen i universel tilstand, vil appen kompilere på både klienten og serveren. Nu vil din applikation køre på port 3000.

Bygning til produktion

Udviklingstilstand er ret nyttig, når du aktivt udvikler din applikation. Men når du er klar til at gøre din applikation offentlig, bliver tilføjelser såsom hot-genindlæsning og udviklerværktøjer mindre vigtige. Det er derfor, vi ønsker at bygge vores applikation én gang, til et produktionsmiljø. Heldigvis indeholder Nuxt.js et værktøj, som vi kan bruge til hurtigt at bygge vores apps moduler til produktion. Kør følgende for at starte produktionsopbygningsprocessen.

npm run build

Grundlæggende er det, vi gør her, at vi kompilerer alle vores webpack-moduler med optimeringer til produktion.

Når opbygningen er færdig, vil du være i stand til at køre webstedet til produktion.

npm start

Nu, hvis du navigerer til http://yourip:3000, vil du se Nuxt.js-startskærmen, som bekræfter, at du kører i produktionstilstand.

PM2: Administrer din applikation med lethed

Nu forstår vi det grundlæggende i at køre vores applikation til produktion. Med hensyn til et produktionsmiljø ville vi foretrække en god måde at holde vores applikation kørende for evigt, auto-genstarte vores applikation, når det er nødvendigt, og overvåge vores applikations ressourcer. Det er her, Process Manager 2 (PM2) kommer ind i billedet. PM2 er en Node.js-procesmanager til produktionsapplikationer, som omfatter mange vigtige produktionsværktøjer såsom belastningsbalancering, avancerede logfiler, opstartsscripts og meget mere. Først skal du installere PM2.

npm install pm2 -g

Dette installerer PM2 globalt, så vi kan bruge det hvor som helst på vores server. Når PM2 er færdig med at downloade, kan vi starte vores applikation.

pm2 start <appfolder>/server/index.js

Bemærk, at vi starter serverfilen, der er placeret inde i vores applikationsrod.

Hvis du gerne vil se de ressourcer, som din applikation bruger, kan du gøre det med pm2 monitkommandoen. Dette vil frembringe en grænseflade, der ligner den for ncurses, hvor du præcist kan indsamle data om din applikations RAM, CPU og diskbrug.

På nuværende tidspunkt vil din applikation køre præcis, som den var, da vi kørte den med npm tidligere, bortset fra at vi nu har meget mere kontrol, når det kommer til produktionsoptimeringer.

Du har nu en Nuxt.js-applikationsbuild, der er implementeret til produktion med Node.js og Ubuntu 18.04. Hvis du gerne vil lære mere om Nuxt og alle dets dybdegående funktioner, er du velkommen til at besøge deres officielle dokumentation .