详解基于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字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 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 文件缓存的性能测试
2010/04/25 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
营业员演讲稿
2013/12/30 职场文书
经销商会议欢迎词
2014/01/11 职场文书
北京奥运会口号
2014/06/21 职场文书
运动会演讲稿300字
2014/08/25 职场文书
大一新生检讨书
2014/10/29 职场文书
升学宴学生致辞
2015/09/29 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
Java 死锁解决方案
2022/05/11 Java/Android