Node+GitLab實現小程序CI系統

爲何要實現自動部署

小程序開發迭代裏，有如下幾個個頭痛的問題，

• 如何準確並快速的的把小程序上傳去後臺，並讓測試人員進行測試？
• 測試同事找開發要二維碼，效率較低
• 本地生成的二維碼會出現攜帶本地代碼、未及時拉取分支其餘改動等問題
• 小程序的體驗發佈太依賴開發者，一般只有開發者熟悉微信開發者工具一系列的上傳流程，而每次發佈的是有頁可能由於忘記合併分支，忘記開啓構建命令致使一些列不可知的錯誤，從而致使影響開發進度、發佈流程不可控等一系列問題。

針對這些問題咱們須要一套能夠隨時從Git上拉取最新代碼選取分支和tag並自動打包構建不一樣環境上傳至小程序後臺的系統來解決以上問題。

如何實現？

開發者工具提供了命令行與 HTTP 服務兩種接口供外部調用，開發者能夠經過命令行或 HTTP 請求指示工具進行登陸、預覽、上傳等操做。
傳送門： "developers.weixin.qq.com/miniprogram…"

方案

經過命令行與 HTTP 服務能夠想到一下幾種思路

• 經過老牌持續集成工具Jenkins配置shell腳本調用命令行上傳部署
• 經過配置GitLab CI在項目內添加.yml編寫CI文件調用命令行上傳部署
• 經過Node調用Http服務配合Gitlab-Api+shell命令爲前端提供調用接口，前端調用接口實現自動編譯上傳部署

本文將針對第三種思路詳細闡述實現一個自動化部署系統的步驟和實現過程當中的思考。

爲何我不用第一種和第二種？一是由於搞這種現成的配置式的東西弄出來沒什麼成就感,用第三個思路寫順即可以練練Node，二是由於雖然思路有了，但配置還沒玩明白，等我研究明白了再單獨寫吧。emmmm.....

須要用到的知識點（知識點不會的童鞋先去補課）

• NodeJS
• Gulp
• Git命令
• GitLab-Api或Github-Api（本文所有使用gitlab-api）
• Vue+Scss+layui+Html實現前端頁面功能

傳統流程

你正在認真coding，和某個bug激烈戰鬥，已經有了頭緒正準備一鼓作氣幹掉它。忽然被別人打斷並告訴你須要爲他提供一個測試環境的二維碼...
爲了這個二維碼你作了如下事情

忙活完以後你將分支切換回來，不斷回想剛纔的思路，腦子裏一萬個那啥狂奔，但若是直接反手丟給他一個發佈系統連接地址，那麼他只要按照如下步驟點點點就能夠輕易的搞定這件事而不用來冒着被砍的風險來找你：

 

1. 輸入git地址和小程序開發工具端口地址（配置一次便可）
2. 選擇須要發佈的對應分支
3. 選擇構建環境打包
4. 上傳至小程序後臺
5. 登陸小程序後臺設置體驗版獲取二維碼
6. 搞定收工，全程無需發佈人員操做任何代碼相關，只要會點下一步，有發佈權限便可

開發過程

流程圖

 

 

後端功能實現

• 環境依賴
• 實現上傳小程序後臺接口；
• 實現拉取git項目到本地的接口；
• 實現獲取gitlab項目信息，分支及tag的接口；
• 實現切換分支及tag接口
• 實現項目編譯打包的接口；
• 實現拉起開發者工具的接口；

環境依賴

在後端功能的實現上用瞭如下框架和模塊

• express （node框架）
• request（網絡請求模塊）
• fs （文件處理模塊）
• log4js （輸出log日誌）
• process（子進程模塊，用來在node中執行shell命令）

1. 拉起開發者工具的接口

mac系統上開發者工具會默認的安裝路徑是/Applications/wechatwebdevtools.app， 經過process模塊執行shell命令open /Applications/wechatwebdevtools.app便可打開開發者工具。

 

 

2. 實現上傳小程序後臺接口

上傳接口是這個系統的核心，雖然很簡單但要實現這個接口仍是須要你對小程序工具的http調用有必定了解，接下來詳細說一下如何完成此功能：
上文說到小程序開發者工具提供了命令行與 HTTP 服務兩種接口供外部調用，開發者能夠經過命令行或 HTTP 請求指示工具進行登陸、預覽、上傳等操做。

第一步（開啓http服務）
打開你的開發者工具 設置——>安全設置——>服務端口，由於調用開發者工具提供的http服務必定要拼接本地的端口號，因此後續全部的操做都是要基於開發者工具開啓且服務端口開啓的狀態下進行操做的，默認狀況下服務端口是關閉的，http 服務在工具啓動後自動開啓，HTTP 服務端口號在用戶目錄下記錄，可經過檢查用戶目錄、檢查用戶目錄下是否有端口文件及嘗試鏈接來判斷工具是否安裝。

第二步（如何拿到開發者工具端口號）
在確保你的開發者工具服務端口開啓的狀況下，咱們能夠嘗試經過node的fs模塊去讀取儲存的文件信息讀取端口號，端口號文件是開發者工具自動生成的，因此它的位置是固定的，但不一樣系統中的默認位置也不相同。
端口號文件位置：
macOS : ~/Library/Application Support/微信web開發者工具/Default/.ide
微信web開發者工具/User Data/Default/.ide

 

注意！！！
像是在mac中直接去讀取這個默認路徑是獲取不到的，由於mac中通常會將工具安裝在你的當前帳戶文件夾下，因此若是發現沒法讀取的狀況能夠到Uers的文件夾找找看。 好比個人mac上要想訪問端口文件完整路徑是這樣的：
const portPath = '../../Users/admin/Library/Application\ Support/微信web開發者工具/Default/.ide';

讀取端口的功能封裝，後續會用到

 

第三步（上傳）

接口定義：

• URL：/upload
• HTTP 方法：GET

 

 

 

 

經過調用獲取端口號的方法，請求上傳接口拼接端口，指定項目上傳目錄，就是編譯出來的dist文件夾目錄，將接收的描述和版本號一併拼接發送上傳請求便可。

 

get請求封裝

 

 

 

3. 實現拉取git項目到本地的接口

這個接口的實現主要是經過Node接收項目地址而後執行git clone的shell命令實現， 須要用到Node的child_process子進程模塊用來執行shell腳本。

代碼實現

 

4. 實現獲取gitlab項目信息，分支及tag的接口

Gitlab有一個很是強大的API系統，幾乎全部的功能都有相應的API接口，爲了使用API，須要從Gitlab中獲取私有token。

1. 登錄你的Gitlab
2. 點擊登錄的賬戶，點擊settings
3. 點擊Access Tokens
4. 根據本身的須要建立適合須要的Tokens

成功拿到token以後只需在請求的時候做爲query參數傳遞便可:
項目分支信息API api/v3/projects/ [projectId] /repository/branches
小程序項目tagaAPI api/v3/projects/ [projectId] /repository/tags

 

 

5.實現切換分支及tag接口

分支和tag接口實現的思路是同樣的，接到前端請求後執行各類git命令完成

• 切換至項目目錄下 cd ./project
• git branch 拿到本地分支信息
• 切換分支時經過接收的分支名稱比對本地是否存在分支，如分支已存在就刪除再切換，不存在就直接切換
• 經過log4js輸出日誌，爲了頁面展現用

代碼實現

示例爲分支切換的相關代碼，tag實現的思路是同樣的，只不過要把相關git命令替換便可。

 

6. 實現項目編譯打包的接口

這裏須要注意一下，這個接口的實現是很是靈活的，須要根據你當前項目的編譯文件進行配置，好比個人項目開發時使用gulp打包編譯環境到dist，其編譯命令分別爲:

• gulp build:Dev(聯調環境)
• gulp build:Test(測試環境)
• gulp build:Slave(預發佈環境)
• gulp build:Prod(線上環境)

那麼同理，配置好dist輸出文件目錄，收到請求後執行事先實現好的shell命令便可完成打包這一步，若是你不太瞭解環境編譯打包這塊內容，能夠參考我上一篇文章"《武裝你的小程序——開發流程指南》"；

代碼實現

 

目前爲止咱們已經實現了六個後端功能，並生成了對應路由，分別爲：

• /open 實現拉起開發者工具的接口；
• /up 上傳小程序後臺接口；
• /clone 拉取git項目到本地的接口；
• /checkoutBranch || /checkoutTag 獲取gitlab項目信息，分支及tag的接口；
• /branches || /tags 獲取gitlab項目信息，分支及tag的接口；
• /branches 項目編譯打包的接口；

前端實現

前端頁面我就不提供示例代碼了，ui框架和開發框架根據你們的喜愛決定，由於有了上面這些接口咱們就已經能夠愉快的對前端頁面進行你須要的一些定製了，這個時候須要咱們考慮的就是一些前端的交互邏輯了，如何利用好這些接口將起串起來組成條完整的流程，如何利用gitlab的其餘api擴展你須要的其餘功能，好比加一個提交記錄頁面...

前面的流程圖已經大體畫出了個人思路，下面我將個人前端實現思路詳細描述一下，供你們參考：

1. 實現一個啓動頁面，頁面能夠輸入git地址和本地的端口路徑，點擊開始按鈕調用/clone接口將代碼拉取到項目中，同時將端口號路徑儲存起來後面用。
2. clone接口返回成功後調用/open接口拉起開發者工具
3. 實現一個主頁面，初始化頁面調用/branchs和/tag接口獲取分支和tag信息，將其展現在頁面上。
4. 點擊切換分支獲取當前選取的分支名，調用/checkoutBranch 或 /checkoutTag接口傳遞分支名，後端調用相應的git命令。
5. 切換分支完成後進入選擇環境頁，添加描述和版本號選擇須要發佈的環境，調用/build接口傳遞環境變量進行構建。
6. 構建完成顯示下一步，調用/up接口傳遞版本號和描述發送上傳請求，上傳成功頁面將描述，提交人，時間，環境等必要信息展現出來。
7. 去微信公衆平臺設置體驗版
8. 完成

END

到這裏一個簡單的小程序發佈系統就完成了，本文只是記錄了個人一個開發思路但願能對你們有所啓發，有不少地方考慮的仍是不夠完善但基本能用了，你們能夠發散思惟實現一個本身的發佈系統，也歡迎交流想法和指正個人錯誤，同時歡迎你們關注公衆號前端小苑，我會按期在這裏發表原創文章。

 

做者：李初五 連接：https://juejin.im/post/5c937bbcf265da6119043f4c 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。