详解基于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 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
js实现图片360度旋转
Jan 22 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 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
php回调函数处理数组操作示例
2020/04/13 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python实战教程之自动扫雷
2018/07/13 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python删除n行后的其他行方法
2019/01/28 Python
常用的10个Python实用小技巧
2020/08/10 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
装修设计师求职信
2014/02/26 职场文书
转让协议书范本
2014/09/13 职场文书
行政经理岗位职责
2015/04/15 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书