Настройка веб-приложения Nuxt.js в Ubuntu 18.04 LTS

• Nuxt.js: универсальная платформа
• Установка Node.js
• Применение лесов
• Начальный старт
• Здание для производства
• PM2: Управляйте своим приложением с легкостью

Nuxt.js: универсальная платформа

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

Эта команда создаст сайт с помощью веб-пакета, который является модулем компоновки, и будет обслуживать сайт через локальный порт, который обычно является портом 3000. Это также даст вам доступ к горячим перезагрузкам модулей, что избавит от необходимости перезапускать приложение каждый раз, когда вы меняете файл. Поскольку мы запускаем приложение в универсальном режиме, оно будет компилироваться как на клиенте, так и на сервере. Теперь ваше приложение будет работать по порту 3000.

Здание для производства

Режим разработки весьма полезен, когда вы активно разрабатываете свое приложение. Однако, когда вы будете готовы сделать ваше приложение общедоступным, такие дополнения, как «горячая перезагрузка» и инструменты разработчика, станут менее важными. Вот почему мы хотим создать наше приложение один раз, для производственной среды. К счастью, Nuxt.js включает в себя инструмент, который мы можем использовать для быстрой сборки модулей нашего приложения для производства. Выполните следующее, чтобы начать процесс сборки продукта.

npm run build

По сути, здесь мы собираем все наши модули веб-пакетов с оптимизацией для производства.

После завершения сборки вы сможете запустить сайт для производства.

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 и его всесторонних функциях, не стесняйтесь посетить их официальную документацию .