Когда я впервые начал использовать Vue, одним камнем преткновения было выяснить, как запустить сервер Node в том же проекте, что и приложение, написанное на Vue JS. Я поискал по всей сети, но ничего не нашел и в итоге нашел код в двух разных проектах. Это, конечно, нормально, но мне показалось, что это было немного неэстетично и неаккуратно. Итак, поиски продолжаются!

PM2 спешит на помощь!

PM2 - это инструмент управления процессами для запуска, остановки и мониторинга приложений Node JS. Вам необходимо установить его глобально, запустив $npm install pm2 -g. После установки просто введите $pm2 start myApp.js, чтобы запустить приложение Node. Вы должны проверить документацию, чтобы получить полный список того, как использовать pm2, но наиболее важными командами являются:

  • pm2 start
  • список pm2
  • pm2 остановка
  • pm2 перезапуск

Но как это мне помогает?

Небольшой пример сделает его намного понятнее, чем длинное и запутанное объяснение, поэтому давайте откроем командную строку и приступим. Начните с глобальной установки pm2, если вы еще этого не сделали, а затем:

$ vue init webpack-simple pm2-demo
$ cd pm2-demo
$ npm install
$ npm install — save express

Откройте проект в текстовом редакторе и создайте новый файл с именем index.js в корневом каталоге и создайте минимальный api в стиле Hello World:

var express = require(‘express’);
var app = express();
app.get(‘/api’, (req, res) => {
  res.json({message: ‘Welcome to the Server’});
});
app.listen(8081, ()=>{
  console.log(‘API listening on port 8081’);
});

Мы просто быстро проверим, нет ли опечаток или чего-то подобного. Почему бы не использовать pm2 для запуска приложения? В командной строке просто введите $pm2 start index.js. Если все в порядке, вы должны увидеть такую ​​таблицу:

Просто быстро проверьте API: $curl -GET http://localhost:8081/api.

И останови сервер $pm2 stop index.

Так как же это решить проблему?

Все, что нам нужно сделать, это отредактировать сценарии запуска в package.json. Прежде всего создайте новый скрипт для запуска сервера:

"server": "pm2 start index.js --watch --name server",

Флаг просмотра будет следить за вашим кодом на предмет любых изменений и перезапускать сервер всякий раз, когда вы сохраняете свой код - почти так же, как nodemon. Попробуйте, набрав $npm run server. Поиграйте с вызовом API с помощью curl или Postman и измените сообщение, возвращаемое API.

Флаг имени позволяет вам установить имя, которое будет отображаться в списке запущенных процессов. В противном случае по умолчанию используется имя файла. Это очень полезно, так как это может немного сбить с толку, если у вас есть 12 процессов, называемых index!

Во-вторых, добавьте скрипт для запуска сервера разработки webpack с помощью pm2:

"vue": "cross-env NODE_ENV=development pm2 start webpack-dev-server --name vue -- --open --hot",

Опять же, попробуйте в терминале, набрав$npm run vue. Через несколько секунд вы должны увидеть старый добрый логотип Vue в своем браузере.

И, наконец, чтобы связать все это вместе, вам просто нужно изменить сценарий разработки, чтобы запустить и api, и приложение Vue: "dev": "npm run server | npm run vue",.

Весь сценарий будет выглядеть так:

“scripts”: {
 “dev”: “npm run server | npm run vue”,
 “vue”: “cross-env NODE_ENV=development pm2 start webpack-dev-server — name vue — — open — hot”,
 “server”: “pm2 start index.js — watch — name server”,
 “build”: “cross-env NODE_ENV=production webpack — progress — hide-modules”
 },

Если у вас есть запущенные процессы, остановите использование pm2 pm2 stop all и запустите сценарий разработки $ npm run dev.

Наслаждайтесь!

Образец кода доступен на Github