详解基于Vue+Koa的pm2配置


Posted in Javascript onOctober 24, 2017

目前使用的技术栈是:前端Vue、后端Koa、数据库Mongodb。

然而每当起服务的时候,都要 npm start 、 node ./server/app.js ,还要同时保持这两个窗口一直是开着的,很是麻烦。

而且因为我使用的是koa,也没有使用狼叔写的koa脚手架。是自己基于廖雪峰老师的 Koa框架 改的一个小型mvc。导致没有热更新。

为了简化这种没必要的操作及增加热更新,开始想怎么进行优化。于是选择了 pm2

配置pm2

先安装pm2: npm i pm2 、 npm i pm2 -g

因为是开源项目,为了让代码能再别人的电脑上跑起来,需要让pm2存在项目里。然后在全局安装,方便后期调试

再项目的根目录里创建logs目录

在当前的目录创建一个pm2.json的文件,内容如下:

{
 "apps": [{
  "name": "koler-server",
  "script": "./app.js",
  "error_file"   : "../logs/server-err.log",
  "out_file"    : "../logs/server-out.log",
  "merge_logs"   : true,
  "log_date_format" : "YYYY-MM-DD HH:mm Z",
  "cwd": "./server",
  "watch": [
   "app.js",
   "controllers"
  ],
  "watch_options": {
   "followSymlinks": false
  }
 },{
  "name": "koler-app",
  "script": "./build/dev-server.js",
  "error_file"   : "./logs/app-err.log",
  "out_file"    : "./logs/app-out.log",
  "merge_logs"   : true,
  "log_date_format" : "YYYY-MM-DD HH:mm Z",
  "cwd": "./",
  "ignore_watch" : [
   "node_modules"
  ],
  "watch_options": {
   "followSymlinks": false
  }
 }]
}

这里同时启动两个项目。

koler-server 是koa, koler-app 是前端vue。

我尝试了一下把

"error_file"   : "./logs/app-err.log",
"out_file"    : "./logs/app-out.log",
"merge_logs"   : true,
"log_date_format" : "YYYY-MM-DD HH:mm Z",

代码提升到json的根部,但是发现不起作用。看来pm2不支持这种。所以只能在每个服务里写了。

配置package.json

替换之前的 script 字段下的 dev ,然后再增加 stop 字段,替换后如下:

"scripts": {
 "dev": "pm2 start pm2.json && pm2 logs",
 "start": "npm run dev",
 "stop": "pm2 stop koler-app koler-server && pm2 delete koler-app koler-server",
 "build": "node build/build.js",
 "lint": "eslint --ext .js,.vue src"
},

pm2 start pm2.json && pm2 logs 是基于pm2.json文件配置启动,后面的 pm2 logs 是为了同时跟踪vue和koa的反馈日志。

输入 npm start 后。终端如下:

详解基于Vue+Koa的pm2配置 

我这里不知道为什么。每次 npm start 都会爆出来如下的错误:

1|koler-ap | 2017-10-23 19:45 +08:00:
1|koler-ap | ┌────────────────────────────────────────────────────────────┐
1|koler-ap | │         npm update check failed          │
1|koler-ap | │      Try running with sudo or get access       │
1|koler-ap | │      to the local update config store via      │
1|koler-ap | │ sudo chown -R $USER:$(id -gn $USER) C:\Users\158bl\.config │
1|koler-ap | └────────────────────────────────────────────────────────────┘

单独启动是没有任何问题的,但是项目还是能照常跑起来。可能是nodejs或者pm2的bug吧(因为不知道是哪里的bug,就不去github上提issue了)

启动后,你的屏幕会出现一个cmd窗口,不用关,过一会它会自行关闭的。每次修改代码触发pm2配置文件里 watch 规则时,就会自动弹出一个cmd窗口,也是过一会关闭。

因为其他项目使用者可能会在电脑上跑多个pm2实例,所以在 stop 字段里,我跟上了名字。防止出现把所有的实例全部暂定删除了。

测试

现在我们更改代码发现没有任何问题,pm2会帮助我们自动进行热更新。现在我们故意改错一段vue的代码试试:

详解基于Vue+Koa的pm2配置

详解基于Vue+Koa的pm2配置 

可以发现已经OK了。

这里说明一下为什么在pm2.json配置文件里的第二个实例 koler-app 没有watch,因为vue在开发环境下使用的是wenpack的watch,所以不需要加。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
Prototype RegExp对象 学习
Jul 19 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
js实现计算器功能
Aug 10 Javascript
Vue.js2.0中的变化小结
Oct 24 #Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 #Javascript
分享vue.js devtools遇到一系列问题
Oct 24 #Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 #Javascript
Vue基于NUXT的SSR详解
Oct 24 #Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 #Javascript
使用js获取伪元素的content实例
Oct 24 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python统计单词出现的次数
2018/04/04 Python
python开头的coding设置方法
2019/08/08 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
商业活动邀请函
2014/02/04 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
思想品德课教学反思
2016/02/24 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS