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

Pasoul發表於2019-01-09

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

我們為什麼要持續整合?

試想以下兩個場景:

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

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

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

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

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

default

如果小程式可以通過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,結果如下:

image

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

lalpdgq9qca_-cvnadrnau4_334_474 png_620x10000q90g

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

登入微信開發者工具

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

lalpdgq9qcbcguvnatxnar0_701_725 png_620x10000q90g

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

default

我們嘗試使用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,可以檢視預覽二維碼

image

我們知道開發者可以通過命令列或 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_profileexport PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/binsource ~/.bash_profile複製程式碼
  1. 為了避免許可權問題,給你的Tomcat/bin/*.sh分配許可權

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

  1. 檢視8080埠是否被佔用,使用kill PID解除佔用
lsof -i:8080kill PID複製程式碼
  1. 終端輸入startup.sh,如果出現下圖所示內容,則啟動成功
image
  1. 瀏覽器訪問http://localhost:8080/
image
  1. 關閉Tomcat使用shutdown.sh

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

安裝Jenkins

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

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

  2. 初次訪問會讓你輸入密碼,可以根據路徑提示獲取密碼

image

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

image
  1. 輸入密碼,點選continue,進入外掛安裝頁面
image
  1. 點選推薦安裝,等待安裝完成
image
  1. 安裝成功後,進入建立Jenkins使用者介面,填寫完成點選Save and Continue
image
  1. 使用者建立完成後進入配置Jenkins URL介面,你可以將其修改成你期望的地址,然後點Save and Finish
image
  1. 到了這個介面,恭喜你設定Jenkins成功,但是我們還差最後一步:重啟Jenkins
image
  1. 瀏覽器訪問http://localhost:8080/jenkins/restart(你的jenkins地址+restart),點選Yes重啟
image

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

image
  1. 外掛安裝:系統管理 – 外掛管理 – 可選外掛(Available)

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

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

任務構建-配置

  1. 我們新建一個名為wechat的任務,選擇構建一個自由風格的軟體專案,點選ok進入到配置介面
image
  1. General配置選擇引數化構建過程

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

image

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

image

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

image
  1. 原始碼管理選擇Git,填上倉庫地址,分支這裡預設是master,改成我們構建時選擇的分支(注:本地生成的 id_rsa.pub 新增到git倉庫的ssh認證,否則jenkins無法連線git)
image
  1. 構建選擇執行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複製程式碼
  1. 構建後操作選擇Set build description(沒有則檢查description setter外掛是否安裝)
image

這裡使用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,選擇你要構建的型別、分支等引數,這裡我們選擇的是開發版:
image
  1. 構建完成後發現二維碼以文字的形式展示,沒有展示圖片
image

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

image

這時預覽二維碼就出來了,注意二維碼是有過期時間的(35min)

image

至此預覽二維碼的構建任務已經完成,我們嘗試上傳程式碼到微信平臺

任務構建-上傳程式碼

  1. 依然是選擇構建型別、分支,不同的是上傳程式碼需要填小程式版本號和專案備註,然後執行構建
image
  1. 到運營平臺或開發平臺檢視提交的版本
image

友情提示

  1. 開發者工具必須在登入狀態下進行預覽、上傳的操作,為了避免賬戶衝突,可以在Jenkins伺服器上使用專門的微信賬號進行登入,這個賬戶要開啟開發者和體驗者許可權,儘量不要使用開發者的賬號。
  2. 不要直接在官網下載Jenkins安裝執行,坑真的很多。

總結

目前小程式的釋出大多還是依賴開發者手動上傳,並且小程式持續整合還是有很多問題:開發者工具不支援Linux環境、無法通過命令列生成體驗版二維碼等等。但是持續整合這個方向還是值得大家研究的,開發和釋出要兩開花嘛…

參考:

來源:https://juejin.im/post/5c35beaf51882525eb362ebe

相關文章