為什麼要實現自動部署
小程式開發迭代裡，有以下幾個個頭痛的問題，
- 如何準確並快速的的把小程式上傳去後臺，並讓測試人員進行測試？
- 測試同事找開發要二維碼，效率較低
- 本地生成的二維碼會出現攜帶原生程式碼、未及時拉取分支其他改動等問題
- 小程式的體驗釋出太依賴開發者，通常只有開發者熟悉微信開發者工具一系列的上傳流程，而每次釋出的是有頁可能因為忘記合併分支，忘記開啟構建命令導致一些列不可知的錯誤，從而導致影響開發進度、釋出流程不可控等一系列問題。
針對這些問題我們需要一套可以隨時從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激烈戰鬥，已經有了頭緒正準備一氣呵成幹掉它。突然被別人打斷並告訴你需要為他提供一個測試環境的二維碼...
為了這個二維碼你做了以下事情
忙活完之後你將分支切換回來，不斷回想剛才的思路，腦子裡一萬個那啥狂奔，但如果直接反手丟給他一個釋出系統連結地址，那麼他只要按照以下步驟點點點就可以輕易的搞定這件事而不用來冒著被砍的風險來找你：
- 輸入git地址和小程式開發工具埠地址（配置一次即可）
- 選擇需要釋出的對應分支
- 選擇構建環境打包
- 上傳至小程式後臺
- 登入小程式後臺設定體驗版獲取二維碼
- 搞定收工，全程無需釋出人員操作任何程式碼相關，只要會點下一步，有釋出許可權即可
開發過程
流程圖
後端功能實現
- 環境依賴
- 實現上傳小程式後臺介面；
- 實現拉取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。
- 登陸你的Gitlab
- 點選登陸的帳戶，點選settings
- 點選Access Tokens
- 根據自己的需要建立適合需要的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擴充套件你需要的其他功能，比如加一個提交記錄頁面...
前面的流程圖已經大致畫出了我的思路，下面我將我的前端實現思路詳細描述一下，供大家參考：
- 實現一個啟動頁面，頁面可以輸入git地址和本地的埠路徑，點選開始按鈕呼叫
/clone介面將程式碼拉取到專案中，同時將埠號路徑儲存起來後面用。 - clone介面返回成功後呼叫
/open介面拉起開發者工具 - 實現一個主頁面，初始化頁面呼叫
/branchs和/tag介面獲取分支和tag資訊，將其展示在頁面上。 - 點選切換分支獲取當前選取的分支名，呼叫
/checkoutBranch 或 /checkoutTag介面傳遞分支名，後端呼叫相應的git命令。 - 切換分支完成後進入選擇環境頁，新增描述和版本號選擇需要釋出的環境，呼叫
/build介面傳遞環境變數進行構建。 - 構建完成顯示下一步，呼叫
/up介面傳遞版本號和描述傳送上傳請求，上傳成功頁面將描述，提交人，時間，環境等必要資訊展示出來。 - 去微信公眾平臺設定體驗版
- 完成
END
到這裡一個簡單的小程式釋出系統就完成了，本文只是記錄了我的一個開發思路希望能對大家有所啟發，有很多地方考慮的還是不夠完善但基本能用了，大家可以發散思維實現一個自己的釋出系統，也歡迎交流想法和指正我的錯誤，同時歡迎大家關注公眾號前端小苑，我會定期在這裡發表原創文章。
作者：李初五
連結：https://juejin.im/post/5c937bbcf265da6119043f4c
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。