手摸手聊聊小程序持續集成Jenkins

本文首發在個人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，結果以下：

而且開發者工具已經啓動：

ps: mac環境下若是是新安裝的開發者工具，必定要先打開並經過安全驗證。

登陸微信開發者工具

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

掃描二維碼後，終端打印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有兩種方法：

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

這裏我推薦第二種安裝方式，由於第一種方式會生成一個共享的用戶Jenkins，接下來全部構建的操做都是基於Jenkins這個用戶的，它的權限與你當前登陸的系統用戶權限不一樣，致使構建過程當中出現不少問題。

安裝Tomcat

1. 官網下載Tomcat安裝包，我下載的是apache-tomcat-8.5.37.tar.gz這個版本，重命名爲Tomcat8，放在/Users/用戶/Library這個目錄下。
2. 將Tomcat的bin路徑添加到環境變量中：

sudo vi ~/.bash_profile
export PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/bin
source ~/.bash_profile
複製代碼

3. 爲了不權限問題，給你的Tomcat/bin/*.sh分配權限

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

4. 查看8080端口是否被佔用，使用kill PID解除佔用

lsof -i:8080
kill PID
複製代碼

5. 終端輸入startup.sh，若是出現下圖所示內容，則啓動成功

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

7. 關閉Tomcat使用shutdown.sh

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

安裝Jenkins

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

2. 瀏覽器訪問http://localhost:8080/jenkins

3. 初次訪問會讓你輸入密碼，能夠根據路徑提示獲取密碼

若是文件提示沒有權限沒法打開，須要先修改權限，以下：

4. 輸入密碼，點擊continue，進入插件安裝頁面

5. 點擊推薦安裝，等待安裝完成

6. 安裝成功後，進入建立Jenkins用戶界面，填寫完成點擊Save and Continue

7. 用戶建立完成後進入配置Jenkins URL界面，你能夠將其修改爲你指望的地址，而後點Save and Finish

8. 到了這個界面，恭喜你設置Jenkins成功，可是咱們還差最後一步：重啓Jenkins

9. 瀏覽器訪問http://localhost:8080/jenkins/restart(你的jenkins地址+restart)，點擊Yes重啓

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

10. 插件安裝：系統管理 - 插件管理 - 可選插件(Available)

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

至此準備工做已完成，讓咱們開始構建小程序吧。

任務構建-配置

1. 咱們新建一個名爲wechat的任務，選擇構建一個自由風格的軟件項目，點擊ok進入到配置界面

2. General配置選擇參數化構建過程

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

branch用於選擇構建的分支（若是沒有這個選項，檢查Git parameter這個插件有沒有安裝）

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

3. 源碼管理選擇Git，填上倉庫地址，分支這裏默認是master，改爲咱們構建時選擇的分支（注：本地生成的 id_rsa.pub 添加到git倉庫的ssh認證，不然jenkins沒法鏈接git）

4. 構建選擇執行shell

腳本以下，能夠按需修改：

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 執行項目構建
yarn install 
if [ "$build_type" == "dev" ]
  then
  yarn run test
else
  yarn run $build_type
fi
# 打開微信開發者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(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 1
fi
if [ "$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
複製代碼

5. 構建後操做選擇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>

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

任務構建-預覽小程序

1. 選擇Build with parameters，選擇你要構建的類型、分支等參數，這裏咱們選擇的是開發版：

2. 構建完成後發現二維碼以文本的形式展現，沒有展現圖片

解決的方法是在系統管理 -> 全局安全配置 -> 標記格式器 -> 選擇Safe HTML

這時預覽二維碼就出來了，注意二維碼是有過時時間的（35min）

至此預覽二維碼的構建任務已經完成，咱們嘗試上傳代碼到微信平臺

任務構建-上傳代碼

1. 依然是選擇構建類型、分支，不一樣的是上傳代碼須要填小程序版本號和項目備註，而後執行構建

2. 到運營平臺或開發平臺查看提交的版本

友情提示

1. 開發者工具必須在登陸狀態下進行預覽、上傳的操做，爲了不帳戶衝突，能夠在Jenkins服務器上使用專門的微信帳號進行登陸，這個帳戶要開啓開發者和體驗者權限，儘可能不要使用開發者的帳號。
2. 不要直接在官網下載Jenkins安裝運行，坑真的不少。

總結

目前小程序的發佈大多仍是依賴開發者手動上傳，而且小程序持續集成仍是有不少問題：開發者工具不支持Linux環境、沒法經過命令行生成體驗版二維碼等等。可是持續集成這個方向仍是值得你們研究的，開發和發佈要兩開花嘛...

參考：

• 微信小程序集成 Jenkins
• Mac Jenkins的安裝和使用