详解基于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 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue中英文切换实例代码
Jan 21 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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/02/08 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
VUE 使用中踩过的坑
2018/02/08 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python打开音乐文件的实例方法
2020/07/21 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
就业自荐信
2013/12/04 职场文书
学年末自我鉴定
2014/01/21 职场文书
学生会主席演讲稿
2014/04/25 职场文书
师德承诺书2015
2015/04/28 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
Mysql Show Profile
2021/04/05 MySQL
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js