作為前端leader，如何搭建屬於我們公司自己的流水線自動化部署系統(node+express)

背景：自動化部署系統主要可以集成到公司內部的管理系統中去，比如公司有多個項目，移動端H5，大屏網站，門戶網站等...每次發佈或者迭代都需要前端同事打包然後在交給運維或者後端同事放到伺服器上進行部署

，如果有一個項目多個同事合作完成 還要走git合併流程，所以我們的目標就是不讓前端進行打包，開發完成代碼後 直接提交就行，通過點擊管理後臺的某個按鈕觸發某個平臺的前端項目自動更新，同時也不需要

在交付給運維或者後端，攜帶型與流程管理，實現自動化部署(這裡只說自己實現的,當然你們也可以去接入騰訊或阿裡的自動化流水部署系統，但是某些環境下只能使用自己的如何去實現)

 這裡做一個簡單的版本和實現代碼，可以自己擴展回滾本版，本版記錄等，發佈人員落實在責任人等...

1.創建一個乾凈的express項目，寫一個空介面吧下麵代碼放進去，調用就執行

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()) {
        // 如果是文件夾，則遞歸調用deleteDir函數
        deleteDir(curPath);
      } else {
        // 如果是文件，則刪除文件
        fs.unlinkSync(curPath);
      }
    });
    // 刪除文件夾
    fs.rmdirSync(url);
  } else {
    console.log("給定的路徑不存在!");
  }
};
deleteDir('/www/wwwroot/menghangl/public/test/dist');

// 3.執行打包命令
const command = 'npm run build';
// 打包展示的進度
let schedule = 0; 
// 打包成功回調
let build = exec(command, (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error打包失敗: ${error}`);
    return;
  }
  schedule = 0;
  console.log('打包成功，打包結束在這裡結束介面請求，或者斷開長連接')
});

// 4打包進度實時顯示 並輸出打包步驟
build.stdout.on('data', function(data) {
 if(schedule!==100){
     console.log(`Program output 【${schedule}%】`,data)
     schedule += 20;
 } else {
     console.log(data)
 }
});

2.服務端通過git獲取最新倉庫內容

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.優化與部署流程建議

上面兩部分就是核心代碼

1.首先先要自己部署一個node服務到伺服器

2.寫一個介面吧第一步驟放進去 在打包成功的地方結束請求，也可以用長連接，通過開啟和關閉開實現

並且實時顯示打包進度和狀態

3.如果要使用git，自動同步代碼，就先拉取等待拉取完成回調後，在執行打包邏輯代碼

4.註意打包的時候會占用較多的cpu與記憶體，所以建議一個一個任務去執行，避開流量高峰期

5.解決這個的方法還有一個，就是在本地打包成功後直接git提交代碼包括打包後的文件，伺服器直接拉取最新代碼即可

6.另外由於打包是在服務端進行，所以有時候我們開發功能添加了新的npm庫 需要更新 node_modules包，建議先執行cnpm i 在去執行npm run build

7.最後可能node_modules會變的比較大 非常占用伺服器硬碟空間 所以建議每次打包完成後刪除 node_modules 包

這樣就可以 用列表選擇的方式在後臺管理系統進行配置 動態傳入不同的項目地址，遠程倉庫地址，執行命令等，通過後臺管理系統像表單一樣填寫然後執行打包完成！