背景：自動化部署系統(tǒng)主要可以集成到公司內(nèi)部的管理系統(tǒng)中去，比如公司有多個項目，移動端H5，大屏網(wǎng)站，門戶網(wǎng)站等...每次發(fā)布或者迭代都需要前端同事打包然后在交給運維或者后端同事放到服務器上進行部署
，如果有一個項目多個同事合作完成 還要走git合并流程，所以我們的目標就是不讓前端進行打包，開發(fā)完成代碼后 直接提交就行，通過點擊管理后臺的某個按鈕觸發(fā)某個平臺的前端項目自動更新，同時也不需要
在交付給運維或者后端，便攜式與流程管理，實現(xiàn)自動化部署(這里只說自己實現(xiàn)的,當然你們也可以去接入騰訊或阿里的自動化流水部署系統(tǒng)，但是某些環(huán)境下只能使用自己的如何去實現(xiàn))
?這里做一個簡單的版本和實現(xiàn)代碼，可以自己擴展回滾本版，本版記錄等，發(fā)布人員落實在責任人等...
1.創(chuàng)建一個干凈的express項目，寫一個空接口吧下面代碼放進去，調(diào)用就執(zhí)行
const shell = require('shelljs'); var fs = require('fs'); var path = require('path'); const { exec } = require('node:child_process'); // 1.切換到服務器中儲存的項目地址目錄 const project_path = '/www/wwwroot/menghangl/public/test'; shell.cd(project_path); // 2.刪除打包的舊前端dist文件 function deleteDir(url) { if (fs.existsSync(url)) { fs.readdirSync(url).forEach(function(file, index) { var curPath = path.join(url, file); if (fs.statSync(curPath).isDirectory()) { // 如果是文件夾，則遞歸調(diào)用deleteDir函數(shù) deleteDir(curPath); } else { // 如果是文件，則刪除文件 fs.unlinkSync(curPath); } }); // 刪除文件夾 fs.rmdirSync(url); } else { console.log("給定的路徑不存在!"); } }; deleteDir('/www/wwwroot/menghangl/public/test/dist'); // 3.執(zhí)行打包命令 const command = 'npm run build'; // 打包展示的進度 let schedule = 0; // 打包成功回調(diào) let build = exec(command, (error, stdout, stderr) => { if (error) { console.error(`exec error打包失敗: ${error}`); return; } schedule = 0; console.log('打包成功，打包結(jié)束在這里結(jié)束接口請求，或者斷開長連接') }); // 4打包進度實時顯示 并輸出打包步驟 build.stdout.on('data', function(data) { if(schedule!==100){ console.log(`Program output 【${schedule}%】`,data) schedule += 20; } else { console.log(data) } });
?文章來源地址http://www.zghlxwxcb.cn/news/detail-825098.html
2.服務端通過git獲取最新倉庫內(nèi)容
const shell = require('shelljs'); var fs = require('fs'); var path = require('path'); const { exec } = require('node:child_process'); //判定git命令是否可用 if (!shell.which('git')) { //向命令行打印git命令不可用的提示信息 shell.echo('Sorry, this script requires git'); //退出當前進程 shell.exit(1); } else { console.log('可以使用')
// 切換到要拉取的文件夾目錄 shell.cd('/www/wwwroot/menghangl/public/test_git');
// 遠程倉庫的git命令與地址 const command = 'git clone https://gitee.com/martins_coachman/blog-vue3-b.git'; let build = exec(command, (error, stdout, stderr) => { if (error) { console.error(`拉取失敗: ${error}`); return; } console.log('拉取成功') }); }
?
3.優(yōu)化與部署流程建議
上面兩部分就是核心代碼
1.首先先要自己部署一個node服務到服務器
2.寫一個接口吧第一步驟放進去 在打包成功的地方結(jié)束請求，也可以用長連接，通過開啟和關閉開實現(xiàn)
并且實時顯示打包進度和狀態(tài)
3.如果要使用git，自動同步代碼，就先拉取等待拉取完成回調(diào)后，在執(zhí)行打包邏輯代碼
4.注意打包的時候會占用較多的cpu與內(nèi)存，所以建議一個一個任務去執(zhí)行，避開流量高峰期
5.解決這個的方法還有一個，就是在本地打包成功后直接git提交代碼包括打包后的文件，服務器直接拉取最新代碼即可
6.另外由于打包是在服務端進行，所以有時候我們開發(fā)功能添加了新的npm庫 需要更新 node_modules包，建議先執(zhí)行cnpm i 在去執(zhí)行npm run build
7.最后可能node_modules會變的比較大 非常占用服務器硬盤空間 所以建議每次打包完成后刪除 node_modules 包
?
這樣就可以 用列表選擇的方式在后臺管理系統(tǒng)進行配置 動態(tài)傳入不同的項目地址，遠程倉庫地址，執(zhí)行命令等，通過后臺管理系統(tǒng)像表單一樣填寫然后執(zhí)行打包完成！文章來源：http://www.zghlxwxcb.cn/news/detail-825098.html
?
到了這里，關于作為前端leader，如何搭建屬于我們公司自己的流水線自動化部署系統(tǒng)(node+express)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
