Налаштуйте веб-додаток Nuxt.js на Ubuntu 18.04 LTS

Nuxt.js: Універсальний фреймворк

Nuxt.js — це фреймворк JavaScript, призначений для швидкого створення універсальних програм Vue.js. Він найвідоміший своєю здатністю створювати програми Vue.js, які можна відтворювати як на сервері, так і на клієнті. У цьому підручнику ми будемо налаштовувати серверну програму Nuxt.js і розгортати її в Ubuntu 18.04 LTS.

Встановлення Node.js

По-перше, вам потрібно буде переконатися, що ви використовуєте Ubuntu 18.04 LTS. Потім вам потрібно буде встановити Node.js, якщо він ще не встановлений. У цьому підручнику ми будемо використовувати диспетчер версій вузлів або 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, який є пакетом модулів, і обслуговуватиме сайт через порт локального хосту, який зазвичай буде port 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, де ви зможете точно збирати дані про оперативну пам’ять, центральний процесор і використання диска вашою програмою.

На даний момент ваша програма буде працювати саме так, як це було, коли ми запускали її з npm раніше, за винятком того, що тепер ми маємо набагато більше контролю, коли справа доходить до оптимізації виробництва.

Тепер у вас є збірка програми Nuxt.js, яка розгорнута для виробництва разом із Node.js та Ubuntu 18.04. Якщо ви хочете дізнатися більше про Nuxt і всі його докладні функції, не соромтеся відвідати їх офіційну документацію .