Jenkins實現微信小程序持續部署

痛點？

自動化一直是咱們前端工程化的一個重要方向，前端工程從構建到部署，以自動化腳本執行替代人工操做，不只能更好地減小中間流程出現的誤操做，還能使得開發從重複性的勞動中解放出來；

小程序開發受限於平臺的開發工具，咱們在開發的過程當中，編譯以及部署（上傳代碼）小程序代碼，都須要經過可視化的開發工具，因此H5開發中使用的持續部署流程，並不適用於小程序開發流程；這就使得咱們在開發小程序的過程當中，構建和發佈代碼到測試和線上環境，每每須要經過開發的手動操做，萬一出現手工誤操做，就會阻斷測試流程或者出現生產事故了；設想一下如下場景：

• 場景：一個小程序工程每每涉及到多個分支並行開發，每一個分支對應着不一樣的需求或特性，在版本迭代的過程當中，每一個分支對應上線時間可能不同；在一個分支正在測試階段，另外一個分支正在開發階段的狀況下，測試找你去修復測試分支的bug，這個時候，你就須要切換到測試分支去修復問題，從新構建和上傳代碼，提供測試一個新的二維碼，而後再回到新的開發分支繼續開發；一旦出現新的bug，你又要重複上述工做；

在這個過程當中，構建和部署代碼的重複性勞動，大大下降了開發的效率；解決這個痛點，將能提高效率；

解決思路

咱們知道，H5持續發佈的大體流程能夠是由Jenkins觸發構建腳本，構建腳本運行生成目標代碼的dist文件夾，再經過腳本將dist文件夾上傳至部署的服務器目錄中（此處簡化描述了，實際流程可能會更加複雜）；這裏注意到了構建和上傳的動做都是由腳本執行的，而通常的腳本會使用bash來實現：

git clone xxx
git checkout target_branch
npm install
npm run build
tar dist

執行完腳本後，由Jenkins經過ssh將文件上傳到部署的服務器目錄中；

那麼問題來了，小程序的持續發佈是否能夠參照呢？這裏須要解決的是小程序的構建和上傳是否也能實現相關的腳本；

答案是能夠的，微信小程序開發工具在新的版本中，推出了命令行調用和http調用兩種方式，使得構建和上傳的流程不在拘泥於開發工具的可視化界面；這也意味着，咱們也能夠編寫bash腳本，在Jenkins中自動化執行這些流程；

好，如今就一塊兒來實踐一下！

命令行和http調用

在新版本的微信開發者工具中，提供了命令行調用和http調用兩種方式進行登陸、預覽、上傳等操做，具體使用方式能夠直接參照官方文檔；

須要注意的是，這兩種調用都須要先在微信開發工具的 設置 > 通用設置 > 安全中開啓服務端口。

兩者有什麼區別呢：

• 命令行調用的方式，容許在當前機器上，經過命令行工具或者shell腳本對微信小程序開發工具中的命令進行調用；
• 而http調用的方式，容許在當前機器上，經過http請求的方式調用微信小程序開發工具；該方式是否支持跨機器調用，還須要進一步研究，這裏先不討論；

本文中將使用 命令行調用去實現小程序的自動化部署。

Jenkins配置

在使用Jenkins構建部署上，存在多種方式；你能夠直接在你的Jenkins服務器的機器上完成部署，可是因爲小程序的命令行和http調用只提供Mac和Windows兩種方式，因此這就意味着Jenkins服務也須要在對應的操做系統上；不過，Jenkins的服務也有可能會部署在Linux系統上，而Linux上不支持小程序的命令行和http調用，所以，在這種狀況下，就有必要將Jenkins服務和小程序的構建服務進行分離。

實現Master/Slave主從模式

正好，Jenkins支持Master/Slave模式，在這種模式下，Jenkins服務能夠部署在Linux服務器上，做爲Master機器；而小程序的構建機器能夠做爲Jenkins服務器的Slave節點，專門運行由Master機器觸發的小程序構建任務；

這裏選擇一臺Mac機器做爲小程序的構建機器，將這臺機器配置爲Slave節點時，須要在Jenkins按照以下步驟配置：

• 在Manage Jenkins > Manage Nodes and Clouds中選擇新建節點；
• 新建節點時，選擇Permanant Agent，而後開始配置節點信息；
• 配置節點信息時，遠程工做目錄是指在Mac上運行jenkins的工做目錄，須要本身手動建立一個目錄，這樣後面git拉到的代碼會自動放到該目錄下，這裏必定要注意權限，文件目錄設爲可讀可寫，要否則後面jenkins啓動時候會遇到權限問題；
• 用法選擇Only build jobs with label expressions matching this node，確保只有Jenkins任務中聲明的Label匹配，才能使用該Slave節點；
• 啓動方式選擇Launch agents via SSH，Credentials配置時，按照Slave機器的用戶名和密碼填寫便可；

• 配置完節點信息後，記得須要在Slave節點的Mac機器上，建立對應的遠程工做目錄，不然會構建時會提示找不到對應目錄；
• 最後，記得開啓Slave節點Mac機器上的遠程登陸權限，不然沒法經過SSH進行鏈接；
• 成功後，會看到構建的節點多了一個mac_node，但此時，節點會處於未鏈接的狀態，須要打開節點，再選擇Launch agent進行啓動；

構建任務的建立

命令行調用中的命令須要接收多個參數，例如upload命令就須要傳遞項目地址、版本號、備註等的參數，這些參數有一些會根據需求而改變，例如版本號可能每次都會變化；可是原始的Jenkins容許接收的參數有限，因此爲了拓展參數，這裏使用提早安裝Extended Choice Parameter Plug-In和Git Parameter Plug-In用來拓展構建參數以及Git分支參數；

• 建立一個Freestyle Project，配置String Parameter：appId參數、版本號、描述；
• 配置Git相關參數，例如使用Git Parameter插件提供分支選擇；

• 配置Git倉庫，注意配好Credentials；

• 限制項目運行的節點爲新建立的mac_node節點；

• 配置mac_node主機的環境參數，在Manage Jenkins > Manage Nodes and Clouds中選擇對應的主機節點，在配置中，設置環境參數，鍵爲PATH，值能夠從主機中經過echo $PATH命令查看；

• 在Jenkins任務中的Execute shell填寫shell腳本；
• 完成！其餘的功能能夠按照實際的需求進行擴展；

腳本的實現

因爲本文將使用命令行調用去實現小程序的自動化部署，下面將實現對應的shell腳本：

git checkout ${BRANCH}

npm i

alias mpcli='/Applications/wechatwebdevtools.app/Contents/MacOS/cli'

mpcli open

npm run build:weapp

mpcli upload --project ${WORKSPACE}/dist -v ${VERSION} -d ${DESC}

注意，須要先登陸開發者工具

大體流程爲：

• 切換指定分支，安裝依賴；
• 設置alias，縮短命令長度；
• 執行open命令，確保小程序開發工具已經打開；
• 執行構建命令；
• 上傳dist目錄代碼；

測試

下面就看看執行的效果：

• 選擇Build with Parameters，填寫必須的參數：

• 點擊構建後，查看控制檯輸出，以下結果爲成功！

總結

本篇文章主要分享了關於在小程序構建流程中的一個痛點，而且經過Jenkins和小程序開發工具的命令行調用去解決在開發流程上的問題，實現構建流程的自動化；文章中不只有腳本的實現，並且還有Jenkins的配置，思路會比較簡單的，在實際應用中，能夠結合具體應用場景，再進行改造，這裏先拋磚引玉；最後但願文章能對你們有啓發，同時也歡迎你們討論指正！