Flutter Jenkins打包

升級之路發表於2018-12-18

前段時間公司重構了一個flutter專案,自動化打包用的是Jenkins,在這過程中頁遇到了一些坑,藉此寫一篇文章來,讓大家少走些彎路。 先看一下打包完成的效果圖:

image.png
我實現的效果是打包成功後顯示工程名+打包模式+分支名,並顯示fir掃碼安裝的地址,這些都是通過外掛來完成的,下面會詳細介紹到。 在打包之前首先要做一些環境配置的工作,比如:

  • iOS需要單獨配一臺Mac來進行打包,因為需要Xcode,Docker是沒有Xcode環境
  • android最好也放在這臺Mac上打包,因為你要用Docker的話會遇到檔案讀寫許可權的問題
  • 搭建Flutter開發環境
  • 確保本地能打包成功,本地打包請參考iOSAndroid

Jenkins環境配置

1. 安裝 JRE環境

Jenkins 執行依賴於java環境 ,沒有安裝的請去官網自行下載安裝

2. 安裝 Jenkins

千萬別用官網下載的pkg包進行安裝,它會預設將 Jenkins安裝在/Users/Shared目錄下,在打包的時候會遇到許可權問題, 所以強烈建議大家用brew來安裝Jenkins.

  1. 安裝Jenkins

    brew install jenkins

  2. 命令列啟動Jenkins

    java -jar /usr/local/Cellar/jenkins/${你的Jenkins版本}/libexec/jenkins.war --httpPort=8080
    或
    Jenkins
    複製程式碼
  3. 開啟瀏覽器,輸入 localhost:8080 就可看到Jenkins的web介面

  4. Jenkins開機啟動

    命令列安裝的jenkins不自備開機啟動功能,每次重啟後都要命令列執行啟動,非常麻煩,使用以下步驟可以在每次開機後自動拉起一個jenkins的命令列。

    1. 建立開機啟動指令碼 jenkinsBoot.sh

    2. 加入啟動jenkins程式碼

      image.png

    3. 設定指令碼許可權

      sudo chmod 777 xxxx/jenkinsBoot.sh

    4. 設定指令碼開啟方式

      image.png

    5. 設定指令碼引用,使指令碼可執行 chmod +x xxxx/jenkinsBoot.sh

    6. 加入使用者的登入項

      image.png

    7. 重新啟動計算機,會發現自動執行了jenkinsBoot.sh這個指令碼。

3. Jenkins配置

第一次開啟Jenkins時需要解鎖Jenkins,你看到的頁面是這樣的

image.png

進入紅色字型路徑下將密碼拷貝到輸入框,點選continue

然後點選左側一個模組進入下載頁面,時間可能會很久,耐心等待

image.png

image.png

自定義設定使用者名稱及密碼,點選儲存並完成按鈕,進入下圖頁面。

image.png
安裝外掛flutter打包所需要的外掛,點選系統管理->外掛設定

  1. Keychains and Provisioning Profiles Management(iOS證照管理)
  2. Xcode integration(iOS專用)
  3. Gradle plugin(Android專用)
  4. description setter plugin(根據構建日誌檔案的RegEx,設定每個構建的描述。比如fir的上傳地址)

4. 專案工程配置

iOS

  1. 新建專案

image.png

  1. 專案構建配置

image.png

打包型別(注意:AdHoc需要在你專案中配置configuration,自行google)

image.png

打包分支

image.png

原始碼管理

image.png

SSH私鑰新增

image.png

證照和描述檔案配置

image.png

image.png

iOS證照和描述檔案首先要在系統管理->Keychains and Provisioning Profiles Management中設定和上傳後才能在你的專案中選擇新增,iOS證照和描述檔案的製作我就不多說了,自行Google

image.png

這裡的login.keychain檔案可能需要自己copy到桌面並改下檔案字尾,因為它是隱藏檔案

image.png

這裡的描述檔案都要上傳,其實路徑就可以寫/Users/xxxx/Library/MobileDevice/Provisioning Profiles路徑,這是Xcode儲存描述檔案的路徑,上傳的時候也可以去這個路徑下去上傳

image.png

一切準備好後就可以在專案配置中選擇證照和描述檔案了,這時我們第一次add keychain可能不能去選擇Code Signing Identity,需要我們儲存一下後就能選擇了

image.png
image.png

在這裡我們使用shell指令碼來構建,以便我們構建完成能夠上傳到fir上。

Flutter Jenkins打包

指令碼程式碼

 security set-key-partition-list -S apple-tool:,apple: -s -k "開機密碼" ~/Library/Keychains/login.keychain-db
#假設指令碼放置在與專案相同的路徑下
project_path=$(pwd)
# flutter環境變數設定
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/yongjianhe/flutter/bin:$PATH
flutter build ios
cd $project_path/ios
#取當前時間字串新增到檔案結尾
now=$(date +"%Y_%m_%d_%H:%M")
#指定專案的scheme名稱
scheme="Runner"
#指定要打包的配置名
configuration=${BUILD_TYPE}
#指定打包所使用的輸出方式,目前支援app-store, package, ad-hoc, enterprise, development, 和developer-id,即xcodebuild的method引數
if [ $BUILD_TYPE == "Release" ]
then
   	export_method="app-store"
elif [ $BUILD_TYPE == "AdHoc" ]
then
   	export_method="ad-hoc"
else
	export_method="development"
fi
#指定專案地址
workspace_path="${project_path}/ios/Runner.xcodeproj"
#指定輸出路徑
rm -rf "${project_path}/ipa"
mkdir -p "${project_path}/ipa"
output_path="${project_path}/ipa"
#指定輸出歸檔檔案地址
archive_path="$output_path/zaihui_crm_${export_method}_${now}.xcarchive"
#指定輸出ipa地址
ipa_path="$output_path/zaihui_crm_${BUILD_TYPE}_${BUILD_BRANCH}_${BUILD_REPOSITORY}_${now}.ipa"
#指定輸出ipa名稱
ipa_name="zaihui_crm_${BUILD_TYPE}_${BUILD_BRANCH}_${now}.ipa"
commit_msg="$1"
#輸出設定的變數值
echo "===workspace path: ${workspace_path}==="
echo "===archive path: ${archive_path}==="
echo "===ipa path: ${ipa_path}==="
echo "===export method: ${export_method}==="
echo "===commit msg: $1==="
#先清空前一次build
fastlane gym --scheme ${scheme} --clean --configuration ${configuration} --archive_path ${archive_path} --export_method ${export_method} --output_directory ${output_path} --output_name ${ipa_name}
#上傳到fir
if [ ${export_method} != "app-store" ]
then
fir publish ${ipa_path} -T "fir API token" -c $commit_msg
fi
複製程式碼

因為我使用的是fastlane指令打包的,所以打包的電腦需要安裝fastlane

這裡有個地方需要注意的點就是當出現打包失敗是由於執行flutter指令碼錯誤造成的時候,這個原因可能是你當前的flutter版本執行flutter build iOS時,在Generated.xcconfig中並沒有生成FLUTTER_BUILD_MODE引數,這個是執行flutter指令碼所需要的引數,不過沒事,你只需要在你的工程檔案再新增一個指令碼就行了。

image.png

最後還要在你的工程中設定描述檔案(製作相應環境的描述檔案,下載並開啟,debug對應開發證照,adhoc和release對應生產證照),到了這裡大家可能有個疑問,就是前面我都上傳了證照了,為什麼這裡還要填寫,原因是前面上傳的證照只是為了儲存Code Signing Identity以便在login.keychain去訪問他,而不是去儲存它,我想描述檔案也同樣如此,所以我們需要設定描述檔案的路徑

image.png

構建名稱設定工程名+打包模式+分支名

image.png

想要成功顯示fir地址,先要設定Html

WechatIMG4650.jpeg

image.png

這時候你就能打出iOS包了

Android

安卓打包相對於iOS來說就簡單很多了

  1. 新建專案
    image.png
  2. 專案構建配置
    image.png
    image.png
    image.png
    image.png
    image.png
如果大家在iOS證照和描述檔案以及安卓上有其它問題,可以參考一下以下兩篇文章:

本文版權屬於再惠研發團隊,歡迎轉載,轉載請保留出處。@xqqlv

相關文章