Ρυθμίστε μια εφαρμογή Web Nuxt.js στο Ubuntu 18.04 LTS

Nuxt.js: Το Universal Framework

Το Nuxt.js είναι ένα πλαίσιο JavaScript που έχει σχεδιαστεί για τη γρήγορη δημιουργία καθολικών εφαρμογών Vue.js. Είναι πιο διάσημο για την ικανότητά του να δημιουργεί εφαρμογές Vue.js που μπορούν να αποδοθούν στον διακομιστή καθώς και στον πελάτη. Σε αυτό το σεμινάριο, θα ρυθμίσουμε μια εφαρμογή Nuxt.js που αποδίδεται από διακομιστή και θα την αναπτύξουμε στο Ubuntu 18.04 LTS.

Εγκατάσταση του Node.js

Αρχικά, θα πρέπει να βεβαιωθείτε ότι χρησιμοποιείτε το Ubuntu 18.04 LTS. Στη συνέχεια, θα χρειαστεί να εγκαταστήσετε το Node.js, εάν δεν είναι ήδη εγκατεστημένο. Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε το Node Version Manager, ή NVM, για να κάνουμε αυτή τη διαδικασία πολύ πιο εύκολη.

Εγκαταστήστε το NVM χρησιμοποιώντας τις ακόλουθες εντολές.

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

Εφαρμογή ικριώματος

Μόλις εγκαταστήσετε το Node.js, μπορούμε τώρα να προχωρήσουμε στη ρύθμιση των πακέτων που θα χρειαστούμε χρησιμοποιώντας το NPM. Θα χρησιμοποιήσουμε ένα εύχρηστο εργαλείο που ονομάζεται create-nuxt-app, ένα εργαλείο που δημιουργήθηκε από την κοινότητα που μπορεί εύκολα να δημιουργήσει εφαρμογές Nuxt.js.

Στον αρχικό σας κατάλογο, εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε τη δημιουργία της εφαρμογής.

npx create-nuxt-app <nameofproject>

Η κονσόλα θα σας ζητήσει πολλές σημαντικές επιλογές. Για χάρη αυτού του σεμιναρίου, θα ονομάσουμε το έργο μας " app". Θα χρησιμοποιήσουμε το Express ως προσαρμοσμένο πλαίσιο διακομιστή μας και θα εκτελέσουμε την εφαρμογή σε καθολική λειτουργία, η οποία διασφαλίζει ότι θα αποδώσουμε τον ιστότοπό μας στον διακομιστή. Όταν καθορίσετε όλα τα απαιτούμενα δικαιώματα, θα ξεκινήσει η διαδικασία εγκατάστασης και θα δημιουργηθούν όλα τα αρχεία διαμόρφωσης.

Αρχική Έναρξη

Μόλις ολοκληρωθεί η λήψη όλων, αλλάξτε τους καταλόγους στο φάκελο που μόλις δημιουργήσατε.

cd app

Τώρα μπορούμε να ξεκινήσουμε τον διακομιστή ανάπτυξης Nuxt.js.

npm run dev

Αυτή η εντολή θα δημιουργήσει τον ιστότοπο χρησιμοποιώντας το webpack, το οποίο είναι ένα πακέτο λειτουργιών, και θα εξυπηρετήσει τον ιστότοπο σε μια θύρα localhost, η οποία γενικά θα είναι θύρα 3000. Θα σας δώσει επίσης πρόσβαση σε λειτουργικές μονάδες επανάληψης φόρτωσης, οι οποίες θα καταργήσουν την ανάγκη επανεκκίνησης της εφαρμογής κάθε φορά που αλλάζετε ένα αρχείο. Εφόσον εκτελούμε την εφαρμογή σε καθολική λειτουργία, η εφαρμογή θα μεταγλωττιστεί τόσο στον πελάτη όσο και στον διακομιστή. Τώρα η εφαρμογή σας θα εκτελείται στη θύρα 3000.

Κτίριο για την παραγωγή

Η λειτουργία ανάπτυξης είναι αρκετά χρήσιμη όταν αναπτύσσετε ενεργά την εφαρμογή σας. Ωστόσο, όταν είστε έτοιμοι να κάνετε την αίτησή σας δημόσια, τα πρόσθετα όπως η επανάληψη φόρτωσης και τα εργαλεία προγραμματιστή γίνονται λιγότερο σημαντικά. Αυτός είναι ο λόγος που θα θελήσουμε να φτιάξουμε την εφαρμογή μας μία φορά, για ένα περιβάλλον παραγωγής. Ευτυχώς, το Nuxt.js περιλαμβάνει ένα εργαλείο που μπορούμε να χρησιμοποιήσουμε για να δημιουργήσουμε γρήγορα τις λειτουργικές μονάδες της εφαρμογής μας για παραγωγή. Εκτελέστε τα παρακάτω για να ξεκινήσετε τη διαδικασία δημιουργίας παραγωγής.

npm run build

Ουσιαστικά, αυτό που κάνουμε εδώ είναι ότι συγκεντρώνουμε όλες τις μονάδες webpack μας, με βελτιστοποιήσεις για παραγωγή.

Μόλις ολοκληρωθεί η κατασκευή, θα μπορείτε να εκτελέσετε τον ιστότοπο για παραγωγή.

npm start

Τώρα, αν πλοηγηθείτε στο http://yourip:3000, θα δείτε την εκκίνηση της οθόνης Nuxt.js, η οποία επιβεβαιώνει ότι εκτελείτε τη λειτουργία παραγωγής.

PM2: Διαχειριστείτε την αίτησή σας με ευκολία

Τώρα καταλαβαίνουμε τα βασικά της εκτέλεσης της εφαρμογής μας για παραγωγή. Όσον αφορά το περιβάλλον παραγωγής, θα προτιμούσαμε έναν καλό τρόπο για να διατηρήσουμε την εφαρμογή μας σε λειτουργία για πάντα, να κάνουμε αυτόματη επανεκκίνηση της εφαρμογής μας όταν είναι απαραίτητο και να παρακολουθούμε τους πόρους της εφαρμογής μας. Εκεί μπαίνει το Process Manager 2 (PM2). Το PM2 είναι ένας διαχειριστής διαδικασιών Node.js για εφαρμογές παραγωγής, ο οποίος περιλαμβάνει πολλά σημαντικά εργαλεία παραγωγής, όπως εξισορρόπηση φορτίου, προηγμένα αρχεία καταγραφής, σενάρια εκκίνησης και πολλά άλλα. Πρώτα, εγκαταστήστε το PM2.

npm install pm2 -g

Αυτό εγκαθιστά το PM2 παγκοσμίως, ώστε να μπορούμε να το χρησιμοποιούμε οπουδήποτε στον διακομιστή μας. Μόλις ολοκληρωθεί η λήψη του PM2, μπορούμε να ξεκινήσουμε την εφαρμογή μας.

pm2 start <appfolder>/server/index.js

Σημειώστε ότι ξεκινάμε το αρχείο διακομιστή που βρίσκεται μέσα στη ρίζα της εφαρμογής μας.

Εάν θέλετε να δείτε τους πόρους που καταναλώνει η εφαρμογή σας, μπορείτε να το κάνετε με την pm2 monitεντολή. Αυτό θα εμφανίσει μια διεπαφή παρόμοια με αυτή των ncurses, όπου μπορείτε να συλλέξετε με ακρίβεια δεδομένα σχετικά με τη χρήση RAM, CPU και δίσκου της εφαρμογής σας.

Μέχρι τώρα, η εφαρμογή σας θα εκτελείται ακριβώς όπως ήταν όταν την εκτελούσαμε με npm νωρίτερα, εκτός από το ότι τώρα έχουμε πολύ περισσότερο έλεγχο όσον αφορά τις βελτιστοποιήσεις παραγωγής.

Τώρα έχετε μια έκδοση εφαρμογής Nuxt.js που έχει αναπτυχθεί για παραγωγή με το Node.js και το Ubuntu 18.04. Εάν θέλετε να μάθετε περισσότερα για το Nuxt και όλες τις σε βάθος λειτουργίες του, μη διστάσετε να επισκεφθείτε την επίσημη τεκμηρίωσή του .