手摸手聊聊小程式持續整合Jenkins

Pasoul發表於2019-01-09

本文首發在我的github部落格 github.com/Pasoul/blog… ，感興趣的同學可以點個star，不要迷路哦~

我們為什麼要持續整合？

試想以下兩個場景：

場景一：你在開發新功能的時候，同事A找你要小程式體驗二維碼，於是你只能：

git stash // 快取本地修改git checkout release // 切換到測試分支yarn test // 打測試包... // 預覽、切回分支git stash pop // 還原本地修改複製程式碼

然後整理被打斷的程式碼思路，繼續coding，暗自吐槽（二維碼是有35min過期時間的，一會又得找我了…）

場景二：小程式到了提測日期，恰巧負責開發的你今天請假了，意味著沒人可以為測試同學打包，因此耽誤了專案進度。

以上兩個場景我們發現一個共同的問題，小程式的體驗釋出太依賴開發者，因為通常只有開發者熟悉微信開發者工具一系列的上傳流程，從而導致影響開發進度、釋出流程不可控等一系列問題…

如果小程式可以通過Jenkins整合，將大大解放開發者的生產力，將Jenkins許可權收回到測試同學手裡，每次釋出都需要測試同學執行構建，一定程度上解決釋出過程不可控的問題。

小程式持續整合的限制

微信開發者工具目前只支援Mac和Windows環境，可以在單獨的Mac mini機器上搭一個Jenkins環境，專門用於打包ios app和小程式。

前期知識儲備

除了圖形化工具，開發者工具還提供了命令列與 HTTP 服務兩種介面供外部呼叫，開發者可以通過命令列或 HTTP 請求指示工具進行登入、預覽、上傳等操作。官方文件

我們先嚐試使用命令列工具啟動並登入微信開發者工具：

命令列工具所在位置：

macOS: <
安裝路徑>
/Contents/MacOS/cli

Windows: <
安裝路徑>
/cli.bat

以下示例皆執行在MacOS 10.13.5環境：

如果微信開發者安裝在應用程式裡面，其中<
安裝路徑>
則為 /Applications/wechatwebdevtools.app

啟動微信開發者工具

終端執行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o，結果如下：

並且開發者工具已經啟動：

lalpdgq9qca_-cvnadrnau4_334_474 png_620x10000q90g

ps: mac環境下如果是新安裝的開發者工具，一定要先開啟並通過安全驗證。

登入微信開發者工具

終端執行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l，結果如下：

lalpdgq9qcbcguvnatxnar0_701_725 png_620x10000q90g

掃描二維碼後，終端列印login success，並且此時開發者工具已經登入：

我們嘗試使用HTTP 服務預覽專案：

在啟動和登入開發者工具後，我們需要獲取工具執行所在的埠號（埠是不固定的），然後呼叫http服務預覽此專案，執行以下命令獲取埠號：

port=$(cat "/Users/pengyong/Library/Application Support/微信web開發者工具/Default/.ide")echo "微信開發者工具執行在${port
  }埠"複製程式碼

假設我的專案地址在：/User/demo，開發者工具開啟在55228埠，在瀏覽器輸入http://127.0.0.1:55228/preview?projectpath=/User/demo，可以檢視預覽二維碼

我們知道開發者可以通過命令列或 HTTP 請求指示工具進行啟動、登入、預覽等操作，接下來就進入正題：安裝和部署Jenkins。

配置Jenkins

Jenkins執行依賴java環境，終端輸入java -version，看輸出是否正確比如：java version “1.8.0_151”

一般Mac安裝Jenkins有兩種方法：

Jenkins官網（jenkins.io/ ）下載安裝包，一路Next。
Tomcat + War

這裡我推薦第二種安裝方式，因為第一種方式會生成一個共享的使用者Jenkins，接下來所有構建的操作都是基於Jenkins這個使用者的，它的許可權與你當前登入的系統使用者許可權不同，導致構建過程中出現很多問題。

安裝Tomcat

官網下載Tomcat安裝包，我下載的是apache-tomcat-8.5.37.tar.gz這個版本，重新命名為Tomcat8，放在/Users/使用者/Library這個目錄下。
將Tomcat的bin路徑新增到環境變數中：

sudo vi ~/.bash_profileexport PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/binsource ~/.bash_profile複製程式碼

為了避免許可權問題，給你的Tomcat/bin/*.sh分配許可權

sudo chmod 755 /Users/pengyong/Library/Tomcat8/bin/*.sh

檢視8080埠是否被佔用，使用kill PID解除佔用

lsof -i:8080kill PID複製程式碼

終端輸入startup.sh，如果出現下圖所示內容，則啟動成功

瀏覽器訪問http://localhost:8080/

關閉Tomcat使用shutdown.sh

至此，Tomcat的安裝基本上完成了，接下來安裝Jenkins

安裝Jenkins

1. 官網下載Jenkins war包，放入你的Tomcat/webapps目錄下

瀏覽器訪問http://localhost:8080/jenkins
初次訪問會讓你輸入密碼，可以根據路徑提示獲取密碼

如果檔案提示沒有許可權無法開啟，需要先修改許可權，如下：

輸入密碼，點選continue，進入外掛安裝頁面

點選推薦安裝，等待安裝完成

安裝成功後，進入建立Jenkins使用者介面，填寫完成點選Save and Continue

使用者建立完成後進入配置Jenkins URL介面，你可以將其修改成你期望的地址，然後點Save and Finish

到了這個介面，恭喜你設定Jenkins成功，但是我們還差最後一步：重啟Jenkins

瀏覽器訪問http://localhost:8080/jenkins/restart(你的jenkins地址+restart)，點選Yes重啟

有可能頁面一直展示loading，你可以嘗試直接訪問Jenkins主頁，如果出現這個頁面，Jenkins的安裝過程到此結束，你可以建立任務了。

外掛安裝：系統管理 – 外掛管理 – 可選外掛(Available)

Git parameter: 能夠實現選擇指定分支進行構建的功能description setter: 用於生成預覽二維碼

至此準備工作已完成，讓我們開始構建小程式吧。

任務構建-配置

我們新建一個名為wechat的任務，選擇構建一個自由風格的軟體專案，點選ok進入到配置介面

General配置選擇引數化構建過程

build_type用於選擇構建的是開發版、測試版還是生產版的小程式

branch用於選擇構建的分支（如果沒有這個選項，檢查Git parameter這個外掛有沒有安裝）

upload_desc和upload_version兩個文字引數分別用於在構建時填寫小程式的備註和版本

原始碼管理選擇Git，填上倉庫地址，分支這裡預設是master，改成我們構建時選擇的分支（注：本地生成的 id_rsa.pub 新增到git倉庫的ssh認證，否則jenkins無法連線git）

構建選擇執行shell

指令碼如下，可以按需修改：

echo -------------------------------------------------------echo GIT_BRANCH: ${GIT_BRANCH
  }echo -------------------------------------------------------# 執行專案構建yarn install if [ "$build_type" == "dev" ]  then  yarn run testelse  yarn run $build_typefi# 開啟微信開發者工具/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -oport=$(cat "/Users/pengyong/Library/Application Support/微信web開發者工具/Default/.ide")echo "微信開發者工具執行在${port
  }埠"return_code=$(curl -sL -w %{http_code
  } http://127.0.0.1:${port
  }/open)if [ $return_code == 200 ]  then  echo "返回狀態碼200，devtool啟動成功！"else  echo "返回狀態碼${return_code
  }，devtool啟動失敗"  exit 1fiif [ "$build_type" == "dev" ]  then  echo "釋出開發版！"  # wget -o下載預覽二維碼，以build_id命名  /usr/local/bin/wget -O $BUILD_ID.png http://127.0.0.1:${port
  }/preview?projectpath=/Users/pengyong/.jenkins/workspace/wechat  echo "預覽成功！請掃描二維碼進入開發版！"elif [ "$build_type" == 'prod' ] || [ "$build_type" == "test" ] || [ "$build_type" == "test:demo" ]  then  echo "準備上傳！"  # 上傳到微信平臺  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u $upload_version@/Users/pengyong/.jenkins/workspace/wechat --upload-desc $upload_desc  echo "上傳成功！請到微信小程式後臺設定體驗版或提交稽核！"fi複製程式碼

構建後操作選擇Set build description（沒有則檢查description setter外掛是否安裝）

這裡使用img標籤用於展示構建後的二維碼（注：埠號是你jenkins啟動的埠，任務名稱是我們任務構建這一步填寫的名稱，這裡我們是wechat）:

< img src="http://本機ip:埠/job/任務名稱/ws/${BUILD_ID }.png" alt="非開發版請到後臺預覽" width="200" height="200" /> < a href="http://本機ip:埠/job/任務名稱/ws/${BUILD_ID }.png" target="_blank"> 二維碼${BUILD_ID }< /a>

至此我們的任務構建配置基本完成了