Flutter Jenkins打包

升級之路發表於2018-12-18
原文網址 : https://juejin.im/post/5c18c9f9f265da612061c26d
FlutterJenkins

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

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

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

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

相關文章