pm2部署vue的實現(xiàn)步驟
1、為什么要使用pm2運行vue項目
為什么！??！我們一般是將打出來的DIST目錄上傳到服務(wù)器發(fā)布即可，為啥我會使用PM2來運行部署呢？
前提：vue2+mysql+express不使用中間服務(wù)器，即不要后端人員開發(fā)接口服務(wù)，而是項目中直接與mysql交互！怎么實現(xiàn)后期的教程會一步一步教你擼。一個人搞定前端、后端！當然你得會sql及后端的邏輯，如果不會，還是需要有人協(xié)助你搞。
原因其一：有個朋友他要開發(fā)一套簡易版本的考勤管理系統(tǒng)，我用了兩天時間將其開發(fā)出來，他的情況是：他不想購買服務(wù)器，只想部署在他的辦公電腦上他自己使用！我也沒有精力說服他去買個服務(wù)器！那怎么辦呢？我本想著給他安裝node.js、vscode、mysql，按照我開發(fā)過程中運行系統(tǒng)的方式讓他運行，等我開發(fā)完成后，我才發(fā)現(xiàn)這樣的操作體驗就是一場災(zāi)難，他上班后每天就是開機，打開vscode點擊run dev，然后去執(zhí)行腳本運行node寫的服務(wù)！這樣的使用體驗真的是一場災(zāi)難！
原因其二：npm run dev運行關(guān)閉終端后，WEB項目便無法打開，用戶無法流暢的正常使用，增加了使用難度。
既然已經(jīng)開發(fā)出來了，那怎么讓他使用很舒服呢？這時就想到了進程守護的東西，一翻查找，看到了pm2這個東西，相當?shù)暮糜茫?/p>
來看看我的項目目錄：
綠框就是服務(wù)端mysql相關(guān)的操作。紅框就是我們WEB前端，使用VUE開發(fā)。
定義的相關(guān)接口，本質(zhì)是讀寫數(shù)據(jù)庫，見下方圖文。
數(shù)據(jù)庫查詢：
整體完成開發(fā)并測試通過后，就是部署的問題。
2、安裝PM2及相關(guān)依賴
全局安裝：一定是全局安裝哦?。。?/p>
npm install pm2 -g npm install express -g npm install express-generator -g
PM2相關(guān)命令，只熟悉查閱即可，與本次部署無關(guān)。直接到第3步。
啟動
pm2 start app.js //啟動app.js應(yīng)用 pm2 start app.js --name demo //啟動應(yīng)用并設(shè)置name pm2 start app.sh //腳本啟動
停止
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)建開機自啟動[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 將在啟動時恢復(fù)已保存的進程
更新PM2
pm2 updatePM2 pm2 update
監(jiān)聽模式
pm2 start app.js --watch //當文件發(fā)生變化，自動重啟
靜態(tài)服務(wù)器
pm2 serve ./dist 9090 //將目錄dist作為靜態(tài)服務(wù)器根目錄，端口為9090
啟用群集模式（自動負載均衡）
//max 表示PM2將自動檢測可用CPU的數(shù)量并運行盡可能多的進程 //max可以自定義，如果是4核CPU，設(shè)置為2者占用2個 pm2 start app.js -i max
重新啟動
pm2 restart app.js //同時殺死并重啟所有進程。短時間內(nèi)服務(wù)不可用。生成環(huán)境推薦使用reload
0秒停機重新加載
pm2 reload app.js //重新啟動所有進程，始終保持至少一個進程在運行 pm2 gracefulReload all //優(yōu)雅地以群集模式重新加載所有應(yīng)用程序
查看啟動列表
pm2 list
查看每個應(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)用日志
保存當前應(yīng)用列表
pm2 save
重啟保存的應(yīng)用列表
pm2 resurrect
清除保存的應(yīng)用列表
pm2 cleardump
保存并恢復(fù)PM2進程
pm2 update
3、項目配置準備
在你的項目根目錄創(chuàng)建一個名為：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：項目腳手架腳本，因為我項目使用的是Vue_cli創(chuàng)建的，所以，我指向VUE的腳本。
args:你項目終端運行的命令參數(shù)，如果是npm run dev這里就是dev，如果是npm run serve這里就是serve，你自己根據(jù)實際填寫 。
注意：這里env參數(shù)里面我沒有沒給指定dist目錄，默認為同級目錄生成的dist靜態(tài)頁面。你可以自己指定。
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', //應(yīng)用名
script : 'app.js', //應(yīng)用文件位置
env: {
PM2_SERVE_PATH: ".", //靜態(tài)服務(wù)路徑
PM2_SERVE_PORT: 8080, //靜態(tài)服務(wù)器訪問端口
NODE_ENV: 'development' //啟動默認模式
},
env_production : {
NODE_ENV: 'production' //使用production模式 pm2 start ecosystem.config.js --env production
},
instances:"max", //將應(yīng)用程序分布在所有CPU核心上,可以是整數(shù)或負數(shù)
watch:true, //監(jiān)聽模式
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', //服務(wù)器文件路徑
post-deploy : 'npm install && pm2 reload ecosystem.config.js --env production' //部署后的動作
}
}
};4、pm2啟動接口服務(wù)js及WEB項目！
打開終端cd到你的項目根目錄，運行：
pm2 start ecosystem.config.js
在終端運行pm2 ls可以看到這個服務(wù)已經(jīng)正常啟動！
運行后端服務(wù)，同樣cd到服務(wù)的js文件，運行pm2 start app.js
可以看到兩個服務(wù)均正常運行！此時你關(guān)閉所有終端，瀏覽器中你的服務(wù)完全正常打開。而不像之前npm run dev關(guān)閉后，項目無法運行打開了。
后面再配合pm2的開機自啟動功能，用戶則不再每天去運行項目中的腳本亦可正常使用此服務(wù)系統(tǒng)。
5、開機所有服務(wù)自啟動
如果你想要使用pm2來管理你的Node.js應(yīng)用，并使其在系統(tǒng)啟動時自動運行，你可以按照以下步驟操作：
使用pm2的保存功能：
pm2 save
這會將當前運行的進程列表保存到pm2的啟動文件中。
設(shè)置pm2開機自啟。pm2提供了一個腳本來處理這個問題：
pm2 startup
執(zhí)行這個命令后，pm2會生成一個適用于你的系統(tǒng)的啟動腳本，并告訴你如何啟用它。
sudo systemctl enable pm2-root
執(zhí)行這個命令來啟用pm2開機自啟。
最后，重啟你的系統(tǒng)以確保一切正常：
sudo reboot
重啟后，pm2應(yīng)該會自動啟動，并且你的應(yīng)用也應(yīng)該在后臺運行。
請確保你的用戶有足夠的權(quán)限來運行這些命令，如果需要，可以使用sudo。如果你的應(yīng)用有任何特殊的配置需求，比如環(huán)境變量，確保它們在pm2啟動的環(huán)境中可用。
到此這篇關(guān)于pm2部署vue的實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)pm2部署vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中引用swiper輪播插件的方法,在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里。具體實例代碼大家跟隨腳本之家小編一起看看吧2018-08-08
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue3.0?axios跨域請求代理服務(wù)器配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3?實現(xiàn)一個自定義toast?小彈窗,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
vue-cli 引入jQuery，Bootstrap，popper的方法
這篇文章主要介紹了vue-cli 引入jQuery，Bootstrap，popper的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實現(xiàn)步驟
本文檔將介紹如何通過點擊父列表（表格）中的數(shù)據(jù)行來獲取到子列表（表格）的數(shù)據(jù),代碼示例是基于Vue框架實現(xiàn)的一個組件,包含了父列表和子列表,通過點擊父列表的數(shù)據(jù)行來動態(tài)獲取子列表的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue是一款流行的前端開發(fā)框架,它的響應(yīng)式數(shù)據(jù)綁定和組件化特性使得它成為了可視化界面設(shè)計的一個理想選擇,本文將介紹如何使用Vue實現(xiàn)可視化界面設(shè)計,并且演示一個基于Vue的可視化界面設(shè)計案例,需要的朋友可以參考下2023-12-12
vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項目實戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02
vue+axios+mock.js環(huán)境搭建的方法步驟
本篇文章主要介紹了vue+axios+mock.js環(huán)境搭建的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue 項目中使用websocket的實例代碼，通過實例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01