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

来源:https://www.cnblogs.com/Allen-project/p/18010035
-Advertisement-
Play Games

背景:自動化部署系統主要可以集成到公司內部的管理系統中去,比如公司有多個項目,移動端H5,大屏網站,門戶網站等...每次發佈或者迭代都需要前端同事打包然後在交給運維或者後端同事放到伺服器上進行部署 ,如果有一個項目多個同事合作完成 還要走git合併流程,所以我們的目標就是不讓前端進行打包,開發完成代 ...


背景:自動化部署系統主要可以集成到公司內部的管理系統中去,比如公司有多個項目,移動端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 包

 

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近做了幾個 WPF + MudBlazor 的小東西,每次從頭搭建環境比較繁瑣,然鵝搭建過程還沒啥技術含量,索性就直接做了個模板,方便以後使用。 1. 介紹 一個用來創建 .NET 8 + WPF + MudBlazor 的項目模板 適用於 VS2022 用法:vs插件市場下載 or 自己通過 G ...
  • 準備 今天學習的Demo是Data Binding中的Linq: 創建一個空白解決方案,然後添加現有項目,選擇Linq,解決方案如下所示: 查看這個Demo的效果: 開始學習這個Demo xaml部分 查看MainWindow.xaml: <Window x:Class="Linq.MainWind ...
  • 我一直有個夢想,就是自己開發App,運行在自己的手機上。但是選什麼語言呢?C#,Java或者其它? 我想,既然我已經用華為的手機,擁有鴻蒙系統,為什麼不嘗試一下鴻蒙開發呢?說乾就乾,找到官網,一步一步操作。首先是裝好開發環境: 按照官方的文檔操作是不難的,但還是遇到一些小問題,node.js的安裝路 ...
  • 摘要: 在開發iOS應用程式時,一個重要的任務是確保應用在不同的屏幕和設備上呈現出良好的用戶體驗。為了實現這一目標,iOS提供了尺寸類別、Auto Layout和Size Classes等強大的工具和技術。 尺寸類別是描述設備屏幕尺寸的屬性,它可以幫助開發者瞭解當前界面所在的設備環境。明確的設備尺寸... ...
  • 全新研發flutter3+dart3+photo_view跨多端仿微信App界面聊天Flutter3-Chat。 flutter3-chat基於最新跨全平臺技術flutter3+dart3+material-design+shared_preferences+easy_refresh構建的仿微信AP ...
  • 一、擴展函數 擴展函數可以方便地給現有類增加屬性和方法而不改動類地代碼。 二、原理 fun String.addTo(s: String): String{ return this + s } 反編譯: @Metadata( mv = {1, 6, 0}, k = 2, d1 = {"\u0000\ ...
  • 響應式設計旨在編寫一套代碼,在不同設備上都能有良好的表現。響應式設計有兩種思路:桌面端優先和移動端優先,它們的區別是先實現一種佈局,再使用媒體查詢設置斷點,實現不同屏幕尺寸下的佈局,逐漸過渡到另一端。即由大到小和由小到大的區別。 ...
  • 當有多條衝突的CSS規則指向同一元素,則瀏覽器會計算特異性選擇更具體的規則。如果特異性相同,則按照代碼順序,靠後的規則覆蓋前面的規則。 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...