pm2 部署vue

1、为什么要使用pm2运行vue项目

为什么！！！我们一般是将打出来的DIST目录上传到服务器发布即可，为啥我会使用PM2来运行部署呢？

前提：vue2+mysql+express不使用中间服务器，即不要后端人员开发接口服务，而是项目中直接与mysql交互！怎么实现后期的教程会一步一步教你撸。一个人搞定前端、后端！当然你得会sql及后端的逻辑，如果不会，还是需要有人协助你搞。

原因其一：有个朋友他要开发一套简易版本的考勤管理系统，我用了两天时间将其开发出来，他的情况是：他不想购买服务器，只想部署在他的办公电脑上他自己使用！我也没有精力说服他去买个服务器！那怎么办呢？我本想着给他安装node.js、vscode、mysql，按照我开发过程中运行系统的方式让他运行，等我开发完成后，我才发现这样的操作体验就是一场灾难，他上班后每天就是开机，打开vscode点击run dev，然后去执行脚本运行node写的服务！这样的使用体验真的是一场灾难！

原因其二：npm run dev运行关闭终端后，WEB项目便无法打开，用户无法流畅的正常使用，增加了使用难度。

既然已经开发出来了，那怎么让他使用很舒服呢？这时就想到了进程守护的东西，一翻查找，看到了pm2这个东西，相当的好用！

来看看我的项目目录：

绿框就是服务端mysql相关的操作。红框就是我们WEB前端，使用VUE开发。

定义的相关接口，本质是读写数据库，见下方图文。

数据库查询：

整体完成开发并测试通过后，就是部署的问题。

2、安装PM2

全局安装：：

npm install pm2 -g
//或
yarn global add pm2

PM2相关命令，只熟悉查阅即可，与本次部署无关。直接到第3步。

启动

pm2 start app.js                //启动app.js应用
pm2 start app.js --name demo    //启动应用并设置name
pm2 start app.sh                //脚本启动

停止

pm2 stop all              //停止所有应用
pm2 stop [AppName]        //根据应用名停止指定应用
pm2 stop [ID]            //根据应用id停止指定应用

删除

pm2 delete all              //关闭并删除应用
pm2 delete [AppName]        //根据应用名关闭并删除应用
pm2 delete [ID]            //根据应用ID关闭并删除应用

创建开机自启动

pm2 startup

更新PM2

pm2 updatePM2
pm2 update

监听模式

pm2 start app.js --watch    //当文件发生变化，自动重启

静态服务器

pm2 serve ./dist 9090        //将目录dist作为静态服务器根目录，端口为9090

启用群集模式（自动负载均衡）

//max 表示PM2将自动检测可用CPU的数量并运行尽可能多的进程
//max可以自定义，如果是4核CPU，设置为2者占用2个
pm2 start app.js -i max

重新启动

pm2 restart app.js   //同时杀死并重启所有进程。短时间内服务不可用。生成环境推荐使用reload

0秒停机重新加载

pm2 reload app.js        //重新启动所有进程，始终保持至少一个进程在运行
pm2 gracefulReload all  //优雅地以群集模式重新加载所有应用程序

查看启动列表

pm2 list

查看每个应用程序占用情况

pm2 monit

显示应用程序所有信息

pm2 show [Name]      //根据name查看
pm2 show [ID]        //根据id查看

日志查看

pm2 logs            //查看所有应用日志
pm2 logs [Name]    //根据指定应用名查看应用日志
pm2 logs [ID]      //根据指定应用ID查看应用日志

保存当前应用列表

pm2 save

重启保存的应用列表

pm2 resurrect

清除保存的应用列表

pm2 cleardump

保存并恢复PM2进程

pm2 update

3、项目配置准备

在你的项目根目录创建一个名为：ecosystem.config.js的文件!

其内容为：

module.exports = {apps: [{name: "oaOffice",script: "./node_modules/@vue/cli-service/bin/vue-cli-service.js",args: "serve",instances: "1",autorestart: true,watch: true,max_memory_restart: "1G",env: {NODE_ENV: "production",},},],
};
name:服务名，你随便给。

script：项目脚手架脚本，因为我项目使用的是Vue_cli创建的，所以，我指向VUE的脚本。

args:你项目终端运行的命令参数，如果是npm run dev这里就是dev，如果是npm run serve这里就是serve，你自己根据实际填写。

注意：这里env参数里面我没有没给指定dist目录，默认为同级目录生成的dist静态页面。你可以自己指定。
env: {NODE_ENV: 'production',PM2_SERVE_PATH: '/path/to/your/dist',PM2_SERVE_PORT: 8080},env_production: {NODE_ENV: 'production',PM2_SERVE_PATH: '/path/to/your/dist',PM2_SERVE_PORT: 8080}

至此准备完毕。

当然你也可以参考如下更详细的配置，添加日志查看功能。

module.exports = {apps : [{name      : 'API',      //应用名script    : 'app.js',   //应用文件位置env: {PM2_SERVE_PATH: ".",    //静态服务路径PM2_SERVE_PORT: 8080,   //静态服务器访问端口NODE_ENV: 'development' //启动默认模式},env_production : {NODE_ENV: 'production'  //使用production模式 pm2 start ecosystem.config.js --env production},instances:"max",          //将应用程序分布在所有CPU核心上,可以是整数或负数watch:true,               //监听模式output: './out.log',      //指定日志标准输出文件及位置error: './error.log',     //错误输出日志文件及位置，pm2 install pm2-logrotate进行日志文件拆分merge_logs: true,         //集群情况下，可以合并日志log_type:"json",          //日志类型log_date_format: "DD-MM-YYYY",  //日志日期记录格式}],deploy : {production : {user : 'node',                      //ssh 用户host : '212.83.163.1',              //ssh 地址ref  : 'origin/master',             //GIT远程/分支repo : 'git@github.com:repo.git',   //git地址path : '/var/www/production',       //服务器文件路径post-deploy : 'npm install && pm2 reload ecosystem.config.js --env production'  //部署后的动作}}
};

4、pm2启动接口服务js及WEB项目！

打开终端cd到你的项目根目录，运行：