pm2部署vue的實(shí)現(xiàn)步驟

更新時(shí)間：2024年11月21日 09:51:19 作者：zhaocarbon

本文主要介紹了使用PM2運(yùn)行Vue項(xiàng)目的具體步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1、為什么要使用pm2運(yùn)行vue項(xiàng)目

為什么?。?！我們一般是將打出來(lái)的DIST目錄上傳到服務(wù)器發(fā)布即可，為啥我會(huì)使用PM2來(lái)運(yùn)行部署呢？

前提：vue2+mysql+express不使用中間服務(wù)器，即不要后端人員開(kāi)發(fā)接口服務(wù)，而是項(xiàng)目中直接與mysql交互！怎么實(shí)現(xiàn)后期的教程會(huì)一步一步教你擼。一個(gè)人搞定前端、后端！當(dāng)然你得會(huì)sql及后端的邏輯，如果不會(huì)，還是需要有人協(xié)助你搞。

原因其一：有個(gè)朋友他要開(kāi)發(fā)一套簡(jiǎn)易版本的考勤管理系統(tǒng)，我用了兩天時(shí)間將其開(kāi)發(fā)出來(lái)，他的情況是：他不想購(gòu)買(mǎi)服務(wù)器，只想部署在他的辦公電腦上他自己使用！我也沒(méi)有精力說(shuō)服他去買(mǎi)個(gè)服務(wù)器！那怎么辦呢？我本想著給他安裝node.js、vscode、mysql，按照我開(kāi)發(fā)過(guò)程中運(yùn)行系統(tǒng)的方式讓他運(yùn)行，等我開(kāi)發(fā)完成后，我才發(fā)現(xiàn)這樣的操作體驗(yàn)就是一場(chǎng)災(zāi)難，他上班后每天就是開(kāi)機(jī)，打開(kāi)vscode點(diǎn)擊run dev，然后去執(zhí)行腳本運(yùn)行node寫(xiě)的服務(wù)！這樣的使用體驗(yàn)真的是一場(chǎng)災(zāi)難！

原因其二：npm run dev運(yùn)行關(guān)閉終端后，WEB項(xiàng)目便無(wú)法打開(kāi)，用戶(hù)無(wú)法流暢的正常使用，增加了使用難度。

既然已經(jīng)開(kāi)發(fā)出來(lái)了，那怎么讓他使用很舒服呢？這時(shí)就想到了進(jìn)程守護(hù)的東西，一翻查找，看到了pm2這個(gè)東西，相當(dāng)?shù)暮糜茫?/p>

來(lái)看看我的項(xiàng)目目錄：

綠框就是服務(wù)端mysql相關(guān)的操作。紅框就是我們WEB前端，使用VUE開(kāi)發(fā)。

定義的相關(guān)接口，本質(zhì)是讀寫(xiě)數(shù)據(jù)庫(kù)，見(jiàn)下方圖文。

數(shù)據(jù)庫(kù)查詢(xún)：

整體完成開(kāi)發(fā)并測(cè)試通過(guò)后，就是部署的問(wèn)題。

2、安裝PM2及相關(guān)依賴(lài)

全局安裝：一定是全局安裝哦?。?！

npm install pm2 -g
npm install express -g
npm install express-generator -g

PM2相關(guān)命令，只熟悉查閱即可，與本次部署無(wú)關(guān)。直接到第3步。

啟動(dòng)

pm2 start app.js                //啟動(dòng)app.js應(yīng)用
pm2 start app.js --name demo    //啟動(dòng)應(yīng)用并設(shè)置name
pm2 start app.sh                //腳本啟動(dòng)

停止

pm2 stop all              //停止所有應(yīng)用
pm2 stop [AppName]        //根據(jù)應(yīng)用名停止指定應(yīng)用
pm2 stop [ID]            //根據(jù)應(yīng)用id停止指定應(yīng)用

刪除

pm2 delete all              //關(guān)閉并刪除應(yīng)用
pm2 delete [AppName]        //根據(jù)應(yīng)用名關(guān)閉并刪除應(yīng)用
pm2 delete [ID]            //根據(jù)應(yīng)用ID關(guān)閉并刪除應(yīng)用

創(chuàng)建開(kāi)機(jī)自啟動(dòng)[windows系統(tǒng)不支持，需要額外安裝其他組件]

非windows系統(tǒng)：
pm2 startup

windows系統(tǒng)：安裝pm2-windows-service或pm2-windows-startup，我選擇安裝后者
> npm install pm2-windows-startup -g
> pm2 save
> pm2-startup install
這樣pm2 將在啟動(dòng)時(shí)恢復(fù)已保存的進(jìn)程

更新PM2

pm2 updatePM2
pm2 update

監(jiān)聽(tīng)模式

pm2 start app.js --watch    //當(dāng)文件發(fā)生變化，自動(dòng)重啟

靜態(tài)服務(wù)器

pm2 serve ./dist 9090        //將目錄dist作為靜態(tài)服務(wù)器根目錄，端口為9090

啟用群集模式（自動(dòng)負(fù)載均衡）

//max 表示PM2將自動(dòng)檢測(cè)可用CPU的數(shù)量并運(yùn)行盡可能多的進(jìn)程
//max可以自定義，如果是4核CPU，設(shè)置為2者占用2個(gè)
pm2 start app.js -i max

重新啟動(dòng)

pm2 restart app.js   //同時(shí)殺死并重啟所有進(jìn)程。短時(shí)間內(nèi)服務(wù)不可用。生成環(huán)境推薦使用reload

0秒停機(jī)重新加載

pm2 reload app.js        //重新啟動(dòng)所有進(jìn)程，始終保持至少一個(gè)進(jìn)程在運(yùn)行
pm2 gracefulReload all  //優(yōu)雅地以群集模式重新加載所有應(yīng)用程序

查看啟動(dòng)列表

pm2 list

查看每個(gè)應(yīng)用程序占用情況

pm2 monit

顯示應(yīng)用程序所有信息

pm2 show [Name]      //根據(jù)name查看
pm2 show [ID]        //根據(jù)id查看

日志查看

pm2 logs            //查看所有應(yīng)用日志
pm2 logs [Name]    //根據(jù)指定應(yīng)用名查看應(yīng)用日志
pm2 logs [ID]      //根據(jù)指定應(yīng)用ID查看應(yīng)用日志

保存當(dāng)前應(yīng)用列表

pm2 save

重啟保存的應(yīng)用列表

pm2 resurrect

清除保存的應(yīng)用列表

pm2 cleardump

保存并恢復(fù)PM2進(jìn)程

pm2 update

3、項(xiàng)目配置準(zhǔn)備

在你的項(xiàng)目根目錄創(chuàng)建一個(gè)名為：ecosystem.config.js的文件!

其內(nèi)容為：

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:服務(wù)名，你隨便給。

script：項(xiàng)目腳手架腳本，因?yàn)槲翼?xiàng)目使用的是Vue_cli創(chuàng)建的，所以，我指向VUE的腳本。

args:你項(xiàng)目終端運(yùn)行的命令參數(shù)，如果是npm run dev這里就是dev，如果是npm run serve這里就是serve，你自己根據(jù)實(shí)際填寫(xiě) 。

注意：這里env參數(shù)里面我沒(méi)有沒(méi)給指定dist目錄，默認(rèn)為同級(jí)目錄生成的dist靜態(tài)頁(yè)面。你可以自己指定。

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
    }

至此準(zhǔn)備完畢。

當(dāng)然你也可以參考如下更詳細(xì)的配置，添加日志查看功能。

module.exports = {
    apps : [{
        name      : 'API',      //應(yīng)用名
        script    : 'app.js',   //應(yīng)用文件位置
        env: {
            PM2_SERVE_PATH: ".",    //靜態(tài)服務(wù)路徑
            PM2_SERVE_PORT: 8080,   //靜態(tài)服務(wù)器訪問(wèn)端口
            NODE_ENV: 'development' //啟動(dòng)默認(rèn)模式
        },
        env_production : {
            NODE_ENV: 'production'  //使用production模式 pm2 start ecosystem.config.js --env production
        },
        instances:"max",          //將應(yīng)用程序分布在所有CPU核心上,可以是整數(shù)或負(fù)數(shù)
        watch:true,               //監(jiān)聽(tīng)模式
        output: './out.log',      //指定日志標(biāo)準(zhǔn)輸出文件及位置
        error: './error.log',     //錯(cuò)誤輸出日志文件及位置，pm2 install pm2-logrotate進(jìn)行日志文件拆分
        merge_logs: true,         //集群情況下，可以合并日志
        log_type:"json",          //日志類(lèi)型
        log_date_format: "DD-MM-YYYY",  //日志日期記錄格式
    }],
    deploy : {
        production : {
            user : 'node',                      //ssh 用戶(hù)
            host : '212.83.163.1',              //ssh 地址
            ref  : 'origin/master',             //GIT遠(yuǎn)程/分支
            repo : 'git@github.com:repo.git',   //git地址
            path : '/var/www/production',       //服務(wù)器文件路徑
            post-deploy : 'npm install && pm2 reload ecosystem.config.js --env production'  //部署后的動(dòng)作
        }
    }
};