從零開始
更新：
??現(xiàn)已支持前端docker自動化部署桥狡，詳情請見前端docker自動化部署
??現(xiàn)已支持添加多個配置信息贯底，自動化部署時支持選擇配置信息運(yùn)行
??現(xiàn)已支修改服務(wù)器連接端口续搀，支持ssh私鑰及解密密碼連接（ps：不使用此方法時早龟，請注釋privateKey）
??現(xiàn)已更新模塊引用邏輯属提，遠(yuǎn)端備份時間格式改為 yyyy-MM-dd_HH:mm:ss
效果展示
1. 待部署工程本地完成打包構(gòu)建
2. 確定遠(yuǎn)端部署目錄及發(fā)布文件夾
3. 修改配置
4. 運(yùn)行自動化部署
5. 查看遠(yuǎn)端效果
6. 再次部署 原目錄已備份（開啟遠(yuǎn)端備份生效）
前言
前端項目部署時使套，nginx配置完成后，只需將打包后的文件上傳至服務(wù)器指定目錄下即可凰萨。
一般使用以下方式完成：
-
xshell等命令行工具上傳 -
ftp等可視化工具上傳 -
jenkins等自動化部署服務(wù)
對于簡單前端項目继控，頻繁部署時，xshell胖眷、ftp兩種方式較為繁瑣武通，而jenkins 等自動化部署服務(wù)需要提前安裝軟件、并熟悉配置流程珊搀。
因此希望借助本地 node 服務(wù)實現(xiàn)對前端打包后文件的上傳工作冶忱，既不需要服務(wù)器額外安裝程序，還可以幫助我們實現(xiàn)快速上傳部署境析，更能幫助我們深入了解 node 囚枪。
開始
1. 明確需求
進(jìn)行開發(fā)前需要首先明確需求，根據(jù)常見的前端部署流程總結(jié)為以下過程：
根據(jù)部署流程明確自動化部署的需求：
2. 開發(fā)前準(zhǔn)備
2.1 導(dǎo)入依賴模塊
由于需要實現(xiàn)文件壓縮劳淆、及連接遠(yuǎn)程服務(wù)器链沼、實現(xiàn)遠(yuǎn)程命令調(diào)用，因此至少需要以下模塊：
-
ssh模塊（可實現(xiàn)連接服務(wù)器憔儿、命令調(diào)用等常見操作） -
文件壓縮模塊（可實現(xiàn).zip等常見壓縮文件的本地打包） -
命令行選擇模塊（可實現(xiàn)對多配置項文件進(jìn)行選擇和使用）
查找資料忆植，最終選擇 node-ssh 、 archiver谒臼、inquirer 分別實現(xiàn)上述功能朝刊。
# 安裝依賴
npm i node-ssh --save
npm i archiver --save
npm i inquirer --save
2.2 如何實現(xiàn)規(guī)范
為實現(xiàn)需求中的 解耦合理 與 邏輯清晰/靈活 ，需要關(guān)注整體程序邏輯蜈缤，這里選擇 封裝 相關(guān)功能實現(xiàn)拾氓，并在 主程序 中自由調(diào)度（可靈活 調(diào)用/關(guān)閉/修改 相關(guān)功能），并對于當(dāng)前所執(zhí)行功能給與提示底哥，以保證功能實現(xiàn)的 完整性 和 異常提示 咙鞍。
因為 文件壓縮 、文件上傳 趾徽、 執(zhí)行遠(yuǎn)端命令 等存在異步過程续滋，因此需要明確功能完成的順序，即 應(yīng)在前置任務(wù)完成的回調(diào)中開啟當(dāng)前任務(wù)孵奶，為實現(xiàn)控制異步過程和代碼邏輯清晰疲酌，這里選擇使用 ES6 的 Promise 結(jié)合 ES7的語法糖 async awiat 實現(xiàn)邏輯流程控制。
到這里就完成了對程序功能構(gòu)建的梳理工作，下面進(jìn)入項目實現(xiàn)朗恳。
3. 功能實現(xiàn)
工程目錄預(yù)覽
這里先展示最終結(jié)果的工程目錄湿颅，以供參考：
- node_modules
- utils
- compressFile.js【壓縮本地文件】
- handleCommand.js【調(diào)用遠(yuǎn)端命令】
- handleTime.js【時間處理】
- helper.js【部署項目選擇提示】
- ssh.js【連接遠(yuǎn)端務(wù)器】
- uploadFile.js【上傳本地文件】
- app.js【主程序】
- config.js【配置文件】
- dist.zip【壓縮后的文件】（當(dāng)前版本不會自動刪除）
- package.json
- README.md【項目介紹】
3.1 壓縮本地文件
compressFile 接收 需要壓縮的目錄 和 打包生成文件，傳入后實現(xiàn)本地文件壓縮粥诫。
compressFile.js 參考代碼
// compressFile.js
const fs = require('fs')
const archiver = require('archiver')
function compressFile (targetDir, localFile) {
return new Promise((resolve, reject)=>{
console.log('1-正在壓縮文件...')
let output = fs.createWriteStream(localFile) // 創(chuàng)建文件寫入流
const archive = archiver('zip', {
zlib: { level: 9 } // 設(shè)置壓縮等級
})
output.on('close', () => {
resolve(
console.log('2-壓縮完成油航！共計 ' + (archive.pointer() / 1024 /1024).toFixed(3) + 'MB')
)
}).on('error', (err) => {
reject(console.error('壓縮失敗', err))
})
archive.pipe(output) // 管道存檔數(shù)據(jù)到文件
archive.directory(targetDir, 'dist') // 存儲目標(biāo)文件并重命名
archive.finalize() // 完成文件追加 確保寫入流完成
})
}
module.exports = compressFile
3.2 連接遠(yuǎn)端服務(wù)器
connectServe 接收遠(yuǎn)端ip、用戶名怀浆、密碼等信息谊囚，完成遠(yuǎn)端服務(wù)器連接，具體配置參考 config.js 揉稚。
ssh.js 參考代碼
// ssh.js
const node_ssh = require('node-ssh')
const ssh = new node_ssh()
function connectServe (sshInfo) {
return new Promise((resolve, reject) => {
ssh.connect({ ...sshInfo }).then(() => {
resolve(console.log('3-' + sshInfo.host + ' 連接成功'))
}).catch((err) => {
reject(console.error('3-' + sshInfo.host + ' 連接失敗', err))
})
})
}
module.exports = connectServe
3.3 遠(yuǎn)端執(zhí)行命令
runCommand 接收 需執(zhí)行的命令 和 執(zhí)行命令的遠(yuǎn)端路徑秒啦，這里將其單獨(dú)拆分，既方便 主程序 的單獨(dú)調(diào)用搀玖，也方便 文件上傳 等功能的模塊封裝余境，達(dá)到 解耦 的效果。
handleCommand.js 參考代碼
// handleCommand.js
// run linux shell(ssh對象灌诅、shell指令芳来、執(zhí)行路徑)
function runCommand (ssh, command, path) {
return new Promise((resolve, reject) => {
ssh.execCommand(command, {
cwd: path
}).then((res) => {
if (res.stderr) {
reject(console.error('命令執(zhí)行發(fā)生錯誤:' + res.stderr))
process.exit()
} else {
resolve(console.log(command + ' 執(zhí)行完成！'))
}
})
})
}
module.exports = runCommand
3.4 文件上傳
uploadFile 接收 系統(tǒng)配置參數(shù)猜拾、待上傳的本地文件 即舌，完成本地文件上傳至指定服務(wù)器目錄，這里還引入 handleCommand.js 挎袜、 handleTime.js 顽聂，根據(jù) openBackUp 是否開啟遠(yuǎn)端備份，完成對存在解壓后同名目錄的處理盯仪。具體配置參考 config.js 紊搪。
uploadFile.js 參考代碼
// uploadFile.js
const runCommand = require ('./handleCommand')
const getCurrentTime = require ('./handleTime')
// 文件上傳(ssh對象、配置信息全景、本地待上傳文件)
async function uploadFile (ssh, config, localFile) {
return new Promise((resolve, reject) => {
console.log('4-開始文件上傳')
handleSourceFile(ssh, config)
ssh.putFile(localFile, config.deployDir + config.targetFile).then(async () => {
resolve(console.log('5-文件上傳完成'))
}, (err) => {
reject(console.error('5-上傳失斠！', err))
})
})
}
// 處理源文件(ssh對象爸黄、配置信息)
async function handleSourceFile (ssh, config) {
if (config.openBackUp) {
console.log('已開啟遠(yuǎn)端備份!')
await runCommand(
ssh,
`
if [ -d ${config.releaseDir} ];
then mv ${config.releaseDir} ${config.releaseDir}_${getCurrentTime()}
fi
`,
config.deployDir)
} else {
console.log('提醒：未開啟遠(yuǎn)端備份!')
await runCommand(
ssh,
`
if [ -d ${config.releaseDir} ];
then mv ${config.releaseDir} /tmp/${config.releaseDir}_${getCurrentTime()}
fi
`,
config.deployDir)
}
}
module.exports = uploadFile
3.5 時間處理
getCurrentTime 獲取并返回當(dāng)前時間滞伟，遠(yuǎn)端遠(yuǎn)程備份時使用。
handleTime.js 參考代碼
// 獲取當(dāng)前時間
function getCurrentTime () {
const date = new Date
const yyyy = date.getFullYear()
const MM = coverEachUnit(date.getMonth() + 1)
const dd = coverEachUnit(date.getDate())
const HH = coverEachUnit(date.getHours())
const mm = coverEachUnit(date.getMinutes())
const ss = coverEachUnit(date.getSeconds())
return `${yyyy}-${MM}-${dd}_${HH}:${mm}:${ss}`
}
// 轉(zhuǎn)換時間中一位至兩位
function coverEachUnit (val) {
return val < 10 ? '0' + val : val
}
module.exports = getCurrentTime
3.6 主程序
當(dāng)所有功能模塊封裝完成后炕贵，其中 異步流程 均使用 Promise 處理梆奈，這時結(jié)合 async awiat 實現(xiàn)，既保證了功能實現(xiàn)的順序称开，也使得功能組合變得更加簡潔鉴裹、優(yōu)雅。
main 函數(shù)中通關(guān)功能組合實現(xiàn)自動化部署的流程，后續(xù)增加其他功能實現(xiàn)径荔，主程序 中引入、組合即可完成升級脆霎。
app.js 參考代碼
const config = require ('./config')
const helper = require ('./utils/helper')
const compressFile = require ('./utils/compressFile')
const sshServer = require ('./utils/ssh')
const uploadFile = require ('./utils/uploadFile')
const runCommand = require ('./utils/handleCommand')
// 主程序(可單獨(dú)執(zhí)行)
async function main () {
try {
console.log('請確保文件解壓后為dist目錄!!!')
const SELECT_CONFIG = (await helper(config)).value // 所選部署項目的配置信息
console.log('您選擇了部署 ' + SELECT_CONFIG.name)
const localFile = __dirname + '/' + SELECT_CONFIG.targetFile // 待上傳本地文件
SELECT_CONFIG.openCompress ? await compressFile(SELECT_CONFIG.targetDir, localFile) : '' //壓縮
await sshServer.connectServe(SELECT_CONFIG.ssh) // 連接
await uploadFile(sshServer.ssh, SELECT_CONFIG, localFile) // 上傳
await runCommand(sshServer.ssh, 'unzip ' + SELECT_CONFIG.targetFile, SELECT_CONFIG.deployDir) // 解壓
await runCommand(sshServer.ssh, 'mv dist ' + SELECT_CONFIG.releaseDir, SELECT_CONFIG.deployDir) // 修改文件名稱
await runCommand(sshServer.ssh, 'rm -f ' + SELECT_CONFIG.targetFile, SELECT_CONFIG.deployDir) // 刪除
} catch (err) {
console.log('部署過程出現(xiàn)錯誤总处！', err)
} finally {
process.exit()
}
}
// run main
main()
3.7 配置文件
為方便前端自動化部署，這里抽離關(guān)鍵信息睛蛛，生成配置文件鹦马。
用戶只需修改配置文件即可實現(xiàn) 自動化部署 。
config.js 參考代碼
/*
config.js
說明：
請確保解壓后的文件目錄為dist
ssh: 連接服務(wù)器用戶信息
targetDir: 需要壓縮的文件目錄（啟用本地壓縮后生效）
targetFile: 指定上傳文件名稱（config.js同級目錄）
openCompress: 關(guān)閉后忆肾，將跳過本地文件壓縮荸频，直接上傳同級目錄下指定文件
openBackUp: 開啟后，若遠(yuǎn)端存在相同目錄客冈，則會修改原始目錄名稱旭从，不會直接覆蓋
deployDir: 指定遠(yuǎn)端部署地址
releaseDir: 指定遠(yuǎn)端部署地址下的發(fā)布目錄名稱
更新：
??現(xiàn)已支持添加多個配置信息，自動化部署時支持選擇配置信息運(yùn)行
??現(xiàn)已支修改服務(wù)器連接端口场仲，支持ssh私鑰及解密密碼連接（ps：不使用此方法時和悦，請注釋privateKey）
??現(xiàn)已更新模塊引用邏輯，遠(yuǎn)端備份時間格式改為 `yyyy-MM-dd_HH:mm:ss`
*/
const config = [
{
name: '項目A-dev',
ssh: {
host: '192.168.0.110',
port: 22,
username: 'root',
password: 'root',
// privateKey: 'E:/id_rsa', // ssh私鑰(不使用此方法時請勿填寫渠缕， 注釋即可)
passphrase: '123456' // ssh私鑰對應(yīng)解密密碼(不存在設(shè)為''即可)
},
targetDir: 'E:/private/my-vue-cli/dist', // 目標(biāo)壓縮目錄(可使用相對地址)
targetFile: 'dist.zip', // 目標(biāo)文件
openCompress: true, // 是否開啟本地壓縮
openBackUp: true, // 是否開啟遠(yuǎn)端備份
deployDir: '/home/node_test' + '/', // 遠(yuǎn)端目錄
releaseDir: 'web' // 發(fā)布目錄
},
{
name: '項目A-prod',
ssh: {
host: '192.168.0.110',
port: 22,
username: 'root',
password: 'root',
privateKey: 'E:/id_rsa', // ssh私鑰(不使用此方法時請勿填寫鸽素， 注釋即可)
passphrase: '123456' // ssh私鑰對應(yīng)解密密碼(不存在設(shè)為''即可)
},
targetDir: 'E:/private/my-vue-cli/dist', // 目標(biāo)壓縮目錄(可使用相對地址)
targetFile: 'dist.zip', // 目標(biāo)文件
openCompress: true, // 是否開啟本地壓縮
openBackUp: true, // 是否開啟遠(yuǎn)端備份
deployDir: '/home/node_test' + '/', // 遠(yuǎn)端目錄
releaseDir: 'web2' // 發(fā)布目錄
}
]
module.exports = config
使用
拉取源碼、安裝依賴亦鳞、修改配置文件馍忽、運(yùn)行即可
npm install
npm run deploy
??該項目已開源至 github 歡迎下載使用 后續(xù)會完善更多功能 ??
源碼及項目說明
Tip： 喜歡的話別忘記 star 哦??，有疑問??歡迎提出 issues 燕差，積極交流遭笋。
