详解基于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
Feb 25 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
JavaScript实现原型封装轮播图
Dec 27 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php时间函数用法分析
2016/05/28 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
js读取cookie方法总结
2014/10/31 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
Vue中图片Src使用变量的方法
2019/10/30 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Windows下python3.7安装教程
2018/07/31 Python
python实现两张图片的像素融合
2019/02/23 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
Python包argparse模块常用方法
2021/06/04 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS