详解基于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中Math对象使用说明
Jan 16 Javascript
js实现简单模态窗口,背景灰显
Nov 14 Javascript
JS 常用校验函数
Mar 26 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 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生成RSS文件类实例
2014/12/05 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python实现决策树分类
2018/08/30 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python笔记之观察者模式
2019/11/20 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
PHP面试题附答案
2015/11/28 面试题
应届生自荐书
2014/06/23 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书