Konfigurera en Nuxt.js-webbapplikation på Ubuntu 18.04 LTS

Nuxt.js: The Universal Framework

Nuxt.js är ett JavaScript-ramverk utformat för att snabbt skapa universella Vue.js-applikationer. Det är mest känt för sin förmåga att skapa Vue.js-appar som kan renderas på servern såväl som på klienten. I den här handledningen kommer vi att ställa in en server-renderad Nuxt.js-applikation och distribuera den på Ubuntu 18.04 LTS.

Installerar Node.js

Först måste du se till att du kör Ubuntu 18.04 LTS. Sedan måste du installera Node.js, om det inte redan är installerat. I den här handledningen kommer vi att använda Node Version Manager, eller NVM, för att göra denna process mycket enklare.

Installera NVM med följande kommandon.

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

Ansökan om ställning

När du har installerat Node.js kan vi nu fortsätta med att ställa in de paket vi behöver med hjälp av NPM. Vi kommer att använda ett praktiskt litet verktyg som heter create-nuxt-app, ett community-gjort verktyg som enkelt kan skapa Nuxt.js-applikationer.

Kör följande kommando i din hemkatalog för att starta appgenereringen.

npx create-nuxt-app <nameofproject>

Konsolen kommer att fråga dig om flera viktiga alternativ. För den här handledningens skull kommer vi att döpa vårt projekt till " app". Vi kommer att använda Express som vårt anpassade serverramverk, och vi kommer att köra applikationen i universellt läge, vilket säkerställer att vi kommer att rendera vår webbplats på servern. När du har angett alla nödvändiga behörigheter börjar installationsprocessen och alla konfigurationsfiler skapas.

Första start

När allt har laddats ner, ändra kataloger till mappen som du just skapade.

cd app

Nu kan vi starta utvecklingsservern Nuxt.js.

npm run dev

Det här kommandot kommer att bygga webbplatsen med hjälp av webpack, som är en modulbuntare, och servera webbplatsen på en localhost-port, som vanligtvis kommer att vara port 3000. Det kommer också att ge dig tillgång till moduler som laddas om, vilket tar bort behovet av att starta om programmet varje gång du ändrar en fil. Eftersom vi kör appen i universellt läge kommer appen att kompilera på både klienten och servern. Nu kommer din applikation att köras på port 3000.

Byggnad för produktion

Utvecklingsläge är ganska användbart när du aktivt utvecklar din applikation. Men när du är redo att göra din applikation offentlig blir tillägg som hot-reloading och utvecklarverktyg mindre viktiga. Det är därför vi kommer att vilja bygga vår applikation en gång, för en produktionsmiljö. Tack och lov innehåller Nuxt.js ett verktyg som vi kan använda för att snabbt bygga våra appmoduler för produktion. Kör följande för att påbörja produktionsprocessen.

npm run build

Vad vi gör här är att vi kompilerar alla våra webpack-moduler med optimeringar för produktion.

När bygget är klart kommer du att kunna köra webbplatsen för produktion.

npm start

Om du nu navigerar till http://yourip:3000kommer du att se startskärmen Nuxt.js, som bekräftar att du kör i produktionsläge.

PM2: Hantera din applikation med lätthet

Nu förstår vi grunderna för att köra vår applikation för produktion. När det gäller en produktionsmiljö skulle vi föredra ett bra sätt att hålla vår applikation igång för alltid, starta om vår applikation automatiskt vid behov och övervaka vår applikations resurser. Det är där Process Manager 2 (PM2) kommer in. PM2 är en Node.js processhanterare för produktionsapplikationer, som inkluderar många viktiga produktionsverktyg som lastbalansering, avancerade loggar, startskript och mycket mer. Installera först PM2.

npm install pm2 -g

Detta installerar PM2 globalt så att vi kan använda det var som helst på vår server. När PM2 har laddats ner kan vi starta vår applikation.

pm2 start <appfolder>/server/index.js

Observera att vi startar serverfilen som finns inuti vår programrot.

Om du vill se de resurser som din applikation förbrukar kan du göra det med pm2 monitkommandot. Detta kommer att ta fram ett gränssnitt som liknar det för ncurses, där du exakt kan samla in data om din applikations RAM-, CPU- och diskanvändning.

Vid det här laget kommer din applikation att köras exakt som den var när vi körde den med npm tidigare, förutom nu har vi mycket mer kontroll när det kommer till produktionsoptimeringar.

Du har nu ett Nuxt.js-applikationsbygge som distribueras för produktion med Node.js och Ubuntu 18.04. Om du vill lära dig mer om Nuxt och alla dess djupgående funktioner, besök gärna deras officiella dokumentation .