Skonfiguruj aplikację internetową Nuxt.js na Ubuntu 18.04 LTS

• Nuxt.js: Universal Framework
• Instalowanie Node.js
• Aplikacja rusztowania
• Początkowy start
• Budynek do produkcji
• PM2: Zarządzaj swoją aplikacją z łatwością

Nuxt.js: Universal Framework

Nuxt.js to framework JavaScript zaprojektowany do szybkiego tworzenia uniwersalnych aplikacji Vue.js. Najbardziej znany jest ze zdolności tworzenia aplikacji Vue.js, które mogą być renderowane zarówno na serwerze, jak i na kliencie. W tym samouczku będziemy konfigurować renderowaną przez serwer aplikację Nuxt.js i wdrażać ją na Ubuntu 18.04 LTS.

Instalowanie Node.js

Po pierwsze, musisz upewnić się, że korzystasz z Ubuntu 18.04 LTS. Następnie musisz zainstalować Node.js, jeśli nie jest jeszcze zainstalowany. W tym samouczku wykorzystamy Node Version Manager lub NVM, aby znacznie ułatwić ten proces.

Zainstaluj NVM za pomocą następujących poleceń.

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

Aplikacja rusztowania

Po zainstalowaniu Node.js możemy teraz przystąpić do konfigurowania pakietów, które będą nam potrzebne przy użyciu NPM. Będziemy korzystać z małego poręcznego narzędzia o nazwie create-nuxt-appCommunity, które może łatwo tworzyć aplikacje Nuxt.js.

W katalogu głównym uruchom następujące polecenie, aby rozpocząć generowanie aplikacji.

npx create-nuxt-app <nameofproject>

Konsola wyświetli monit o kilka ważnych opcji. Na potrzeby tego samouczka nazwiemy nasz projekt „ app”. Będziemy używać Express jako naszej niestandardowej struktury serwera i będziemy uruchamiać aplikację w trybie uniwersalnym, co gwarantuje, że będziemy renderować naszą stronę internetową na serwerze. Po określeniu wszystkich wymaganych uprawnień rozpocznie się proces instalacji i zostaną utworzone wszystkie pliki konfiguracyjne.

Początkowy start

Po pobraniu wszystkiego zmień katalogi na właśnie utworzony folder.

cd app

Teraz możemy uruchomić serwer programistyczny Nuxt.js.

npm run dev

To polecenie zbuduje witrynę przy użyciu pakietu WWW, który jest pakietem modułów, i będzie obsługiwać witrynę na porcie hosta lokalnego, którym zwykle będzie port 3000. Zapewni to również dostęp do modułów ponownego ładowania na gorąco, co usunie potrzebę ponownego uruchamiania aplikacji za każdym razem, gdy zmienisz plik. Ponieważ uruchamiamy aplikację w trybie uniwersalnym, aplikacja będzie się kompilować zarówno na kliencie, jak i na serwerze. Teraz twoja aplikacja będzie działać na porcie 3000.

Budynek do produkcji

Tryb programowania jest bardzo przydatny, gdy aktywnie rozwijasz swoją aplikację. Jednak gdy będziesz gotowy upublicznić swoją aplikację, dodatki takie jak ponowne ładowanie na gorąco i narzędzia programistyczne stają się mniej ważne. Dlatego będziemy chcieli raz zbudować naszą aplikację dla środowiska produkcyjnego. Na szczęście Nuxt.js zawiera narzędzie, którego możemy użyć do szybkiego zbudowania modułów naszej aplikacji do produkcji. Uruchom następujące polecenie, aby rozpocząć proces kompilacji produkcyjnej.

npm run build

Zasadniczo kompilujemy wszystkie nasze moduły webpack z optymalizacjami do produkcji.

Po zakończeniu kompilacji będziesz mógł uruchomić witrynę w celu produkcji.

npm start

Teraz, jeśli http://yourip:3000przejdziesz do, zobaczysz ekran powitalny Nuxt.js, który potwierdza, że ​​pracujesz w trybie produkcyjnym.

PM2: Zarządzaj swoją aplikacją z łatwością

Teraz rozumiemy podstawy działania naszej aplikacji do produkcji. Jeśli chodzi o środowisko produkcyjne, wolelibyśmy dobry sposób na ciągłe działanie naszej aplikacji, automatyczne ponowne uruchamianie aplikacji w razie potrzeby i monitorowanie jej zasobów. Właśnie tam pojawia się Process Manager 2 (PM2). PM2 to menedżer procesów Node.js dla aplikacji produkcyjnych, który zawiera wiele ważnych narzędzi produkcyjnych, takich jak równoważenie obciążenia, zaawansowane dzienniki, skrypty startowe i wiele innych. Najpierw zainstaluj PM2.

npm install pm2 -g

To instaluje PM2 globalnie, dzięki czemu możemy go używać w dowolnym miejscu na naszym serwerze. Po zakończeniu pobierania PM2 możemy uruchomić naszą aplikację.

pm2 start <appfolder>/server/index.js

Zauważ, że uruchamiamy plik serwera, który znajduje się w katalogu głównym naszej aplikacji.

Jeśli chcesz wyświetlić zasoby, które zużywa Twoja aplikacja, możesz to zrobić za pomocą pm2 monitpolecenia. Spowoduje to wyświetlenie interfejsu podobnego do interfejsu ncurses, w którym możesz precyzyjnie zbierać dane o pamięci RAM, procesorze i użyciu aplikacji.

Do tej pory twoja aplikacja będzie działała dokładnie tak, jak wtedy, gdy wcześniej ją uruchomiliśmy z npm, z tym wyjątkiem, że mamy znacznie większą kontrolę, jeśli chodzi o optymalizacje produkcji.

Masz teraz kompilację aplikacji Nuxt.js, która jest wdrażana do produkcji przy użyciu Node.js i Ubuntu 18.04. Jeśli chcesz dowiedzieć się więcej o Nuxt i wszystkich jego szczegółowych funkcjach, odwiedź ich oficjalną dokumentację .