Stel een Nuxt.js-webtoepassing in op Ubuntu 18.04 LTS

• Nuxt.js: het universele raamwerk
• Node.js installeren
• Steiger-applicatie
• Eerste start
• Bouwen voor productie
• PM2: beheer uw applicatie eenvoudig

Nuxt.js: het universele raamwerk

Nuxt.js is een JavaScript-framework dat is ontworpen om snel universele Vue.js-applicaties te maken. Het staat vooral bekend om zijn vermogen om Vue.js-apps te maken die zowel op de server als op de client kunnen worden weergegeven. In deze tutorial zullen we een server-gerenderde Nuxt.js-applicatie opzetten en deze implementeren op Ubuntu 18.04 LTS.

Node.js installeren

Eerst moet u ervoor zorgen dat u Ubuntu 18.04 LTS gebruikt. Vervolgens moet u Node.js installeren, als dit nog niet is geïnstalleerd. In deze tutorial maken we gebruik van de Node Version Manager of NVM om dit proces veel gemakkelijker te maken.

Installeer NVM met de volgende opdrachten.

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

Steiger-applicatie

Zodra u Node.js hebt geïnstalleerd, kunnen we nu doorgaan met het instellen van de pakketten die we nodig hebben met NPM. We zullen een handige kleine tool gebruiken create-nuxt-app, een door de community gemaakte tool die gemakkelijk Nuxt.js-applicaties kan maken.

Voer in uw homedirectory de volgende opdracht uit om de app-generatie te starten.

npx create-nuxt-app <nameofproject>

De console vraagt ​​u om een ​​aantal belangrijke opties. Omwille van deze tutorial zullen we ons project " app" noemen . We zullen Express gebruiken als ons aangepaste serverraamwerk en we zullen de applicatie in universele modus uitvoeren, wat ervoor zorgt dat we onze website op de server zullen weergeven. Wanneer u alle vereiste rechten heeft opgegeven, begint het installatieproces en worden alle configuratiebestanden gemaakt.

Eerste start

Zodra alles is gedownload, wijzigt u de mappen in de map die u zojuist hebt gemaakt.

cd app

Nu kunnen we de Nuxt.js-ontwikkelingsserver starten.

npm run dev

Deze opdracht bouwt de site met behulp van webpack, een modulebundelaar, en bedient de site op een localhost-poort, die over het algemeen een poort is 3000. Het geeft u ook toegang tot hot-reloading-modules, waardoor het niet meer nodig is om de applicatie opnieuw op te starten telkens wanneer u een bestand wijzigt. Omdat we de app in universele modus gebruiken, zal de app zowel op de client als op de server worden gecompileerd. Nu wordt uw applicatie op poort uitgevoerd 3000.

Bouwen voor productie

De ontwikkelmodus is erg handig voor wanneer u uw applicatie actief ontwikkelt. Wanneer u echter klaar bent om uw applicatie openbaar te maken, worden add-ons zoals hot-reloading en ontwikkelaarstools minder belangrijk. Daarom willen we onze applicatie één keer bouwen, voor een productieomgeving. Gelukkig bevat Nuxt.js een tool die we kunnen gebruiken om snel de modules van onze app te bouwen voor productie. Voer het volgende uit om het productieopbouwproces te starten.

npm run build

Wat we hier in wezen doen, is dat we al onze webpack-modules samenstellen met optimalisaties voor productie.

Zodra de build is voltooid, kunt u de site runnen voor productie.

npm start

Als u nu naar navigeert http://yourip:3000, ziet u het Nuxt.js-opstartscherm, dat bevestigt dat u in de productiemodus werkt.

PM2: beheer uw applicatie eenvoudig

Nu begrijpen we de basis van het uitvoeren van onze applicatie voor productie. In termen van een productieomgeving zouden we liever een goede manier hebben om onze applicatie voor altijd te laten werken, onze applicatie indien nodig automatisch opnieuw op te starten en de bronnen van onze applicatie te bewaken. Dat is waar Process Manager 2 (PM2) binnenkomt. PM2 is een Node.js-procesmanager voor productietoepassingen, die veel belangrijke productietools omvat, zoals load balancing, geavanceerde logs, opstartscripts en nog veel meer. Installeer eerst PM2.

npm install pm2 -g

Hiermee wordt PM2 wereldwijd geïnstalleerd, zodat we het overal op onze server kunnen gebruiken. Zodra PM2 klaar is met downloaden, kunnen we onze applicatie starten.

pm2 start <appfolder>/server/index.js

Merk op dat we het serverbestand starten dat zich in onze toepassingsroot bevindt.

Als u de bronnen wilt zien die uw toepassing gebruikt, kunt u dit doen met de pm2 monitopdracht. Hierdoor wordt een interface weergegeven die lijkt op die van ncurses, waar u precies gegevens kunt verzamelen over het RAM-, CPU- en schijfgebruik van uw toepassing.

Uw applicatie draait nu precies zoals het was toen we het eerder met npm uitvoerden, behalve dat we nu veel meer controle hebben als het gaat om productie-optimalisaties.

Je hebt nu een Nuxt.js-applicatie build die wordt ingezet voor productie met Node.js en Ubuntu 18.04. Als je meer wilt weten over Nuxt en alle diepgaande functies, bezoek dan hun officiële documentatie .