详解基于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 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
原生js实现弹幕效果
Nov 29 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实现支付宝即时到账功能
2016/12/21 PHP
php微信开发之谷歌测距
2018/06/14 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
js继承call()和apply()方法总结
2014/12/08 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python中update的基本使用方法详解
2019/07/17 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python实现猜数游戏
2020/03/27 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
服务明星事迹材料
2014/12/29 职场文书
2015年重阳节主持词
2015/07/04 职场文书