Когда я впервые начал использовать 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