pm2部署vue的实现步骤

 更新时间:2024年11月21日 09:51:19   作者:zhaocarbon  
本文主要介绍了使用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
npm install express -g
npm install express-generator -g

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关闭并删除应用

创建开机自启动[windows系统不支持,需要额外安装其他组件]

非windows系统:
pm2 startup

windows系统:安装pm2-windows-service或pm2-windows-startup,我选择安装后者
> npm install pm2-windows-startup -g
> pm2 save
> pm2-startup install
这样pm2 将在启动时恢复已保存的进程

更新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到你的项目根目录,运行:

pm2 start ecosystem.config.js

 在终端运行pm2 ls可以看到这个服务已经正常启动!

运行后端服务,同样cd到服务的js文件,运行pm2 start app.js

 可以看到两个服务均正常运行!此时你关闭所有终端,浏览器中你的服务完全正常打开。而不像之前npm run dev关闭后,项目无法运行打开了。

后面再配合pm2的开机自启动功能,用户则不再每天去运行项目中的脚本亦可正常使用此服务系统。 

5、开机所有服务自启动

如果你想要使用pm2来管理你的Node.js应用,并使其在系统启动时自动运行,你可以按照以下步骤操作:

使用pm2的保存功能:

pm2 save

这会将当前运行的进程列表保存到pm2的启动文件中。

设置pm2开机自启。pm2提供了一个脚本来处理这个问题:

pm2 startup

执行这个命令后,pm2会生成一个适用于你的系统的启动脚本,并告诉你如何启用它。

sudo systemctl enable pm2-root

执行这个命令来启用pm2开机自启。

最后,重启你的系统以确保一切正常:

sudo reboot

重启后,pm2应该会自动启动,并且你的应用也应该在后台运行。

请确保你的用户有足够的权限来运行这些命令,如果需要,可以使用sudo。如果你的应用有任何特殊的配置需求,比如环境变量,确保它们在pm2启动的环境中可用。

到此这篇关于pm2部署vue的实现步骤的文章就介绍到这了,更多相关pm2部署vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue.js中created()与activated()的个人使用解读

    vue.js中created()与activated()的个人使用解读

    这篇文章主要介绍了vue.js中created()与activated()的个人使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue中使用方法、计算属性或观察者的方法实例详解

    Vue中使用方法、计算属性或观察者的方法实例详解

    这篇文章主要介绍了Vue中如何使用方法、计算属性或观察者的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • nuxt框架中路由鉴权之Koa和Session的用法

    nuxt框架中路由鉴权之Koa和Session的用法

    后台管理页面需要有登录系统,所以考虑做一下路由鉴权,这篇文章主要介绍了nuxt框架中路由鉴权之Koa和Session的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue3之getCurrentInstance与ts结合使用的方式

    Vue3之getCurrentInstance与ts结合使用的方式

    这篇文章主要介绍了Vue3之getCurrentInstance与ts结合使用的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 一文彻底搞懂Vue中scoped和/deep/原理

    一文彻底搞懂Vue中scoped和/deep/原理

    在Vue中,有两种常用的CSS选择器,用于修改组件样式:scoped 和 /deep/(或 ::v-deep),它们都是为了实现样式的作用域,本文小编就来分别给大家介绍一下这两种选择器的原理,需要的朋友可以参考下
    2023-08-08
  • vue3插件json2ts的具体使用

    vue3插件json2ts的具体使用

    本文主要介绍了vue3插件json2ts的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue使用antd组件a-form-model实现数据连续添加功能

    Vue使用antd组件a-form-model实现数据连续添加功能

    这篇文章主要介绍了Vue使用antd组件a-form-model实现数据连续添加功能,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue2.0 elementUI制作面包屑导航栏

    vue2.0 elementUI制作面包屑导航栏

    本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程,对此有兴趣的朋友可以学习下。
    2018-02-02
  • 优雅地使用loading(推荐)

    优雅地使用loading(推荐)

    这篇文章主要介绍了在Vue和React中如何优雅地使用loading,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue轻量级框架无法获取到vue对象解决方法

    vue轻量级框架无法获取到vue对象解决方法

    这篇文章主要介绍了vue轻量级框架无法获取到vue对象解决方法相关知识点,有需要的读者们跟着学习下。
    2019-05-05

最新评论