详解基于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实现的UBB编码函数
Mar 09 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
微信小程序实现录音功能
Nov 22 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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初学者头疼问题总结
2006/07/08 PHP
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
BBS(php & mysql)完整版(八)
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php实现的mongodb操作类
2015/05/28 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
python自动裁剪图像代码分享
2017/11/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
什么是事务?事务有哪些性质?
2012/03/11 面试题
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
精彩广告词大全
2014/03/19 职场文书
学生请假条
2014/04/11 职场文书
夏季药店促销方案
2014/08/22 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
六一儿童节致辞
2015/07/31 职场文书
外出培训学习心得体会
2016/01/18 职场文书