前段时间公司重构了一个flutter项目,自动化打包用的是Jenkins,在这过程中页遇到了一些坑,借此写一篇文章来,让大家少走些弯路。
先看一下打包完成的效果图:

flutter jpush ios 集成 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

  1. 打开浏览器,输入 localhost:8080 就可看到Jenkins的web界面
  2. Jenkins开机启动
    命令行安装的jenkins不自备开机启动功能,每次重启后都要命令行执行启动,非常麻烦,使用以下步骤可以在每次开机后自动拉起一个jenkins的命令行。
  1. 创建开机启动脚本 jenkinsBoot.sh
  2. 加入启动jenkins代码

image.png

  1. 设置脚本权限
    sudo chmod 777 xxxx/jenkinsBoot.sh
  2. 设置脚本打开方式

image.png

  1. 设置脚本引用,使脚本可执行chmod +x xxxx/jenkinsBoot.sh
  2. 加入用户的登录项

image.png

  1. 重新启动计算机,会发现自动执行了jenkinsBoot.sh这个脚本。

3. Jenkins配置

第一次打开Jenkins时需要解锁Jenkins,你看到的页面是这样的

flutter jpush ios 集成 flutter持续集成_flutter打包的app有多大_02

image.png

进入红色字体路径下将密码拷贝到输入框,点击continue

然后点击左侧一个模块进入下载页面,时间可能会很久,耐心等待

flutter jpush ios 集成 flutter持续集成_Jenkins_03

image.png

flutter jpush ios 集成 flutter持续集成_Jenkins_04

image.png

自定义设置用户名及密码,点击保存并完成按钮,进入下图页面。

flutter jpush ios 集成 flutter持续集成_Jenkins_05

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. 新建项目

flutter jpush ios 集成 flutter持续集成_flutter 阿里 号码认证_06

image.png

  1. 项目构建配置

flutter jpush ios 集成 flutter持续集成_flutter 阿里 号码认证_07

image.png

打包类型(注意:AdHoc需要在你项目中配置configuration,自行google)

flutter jpush ios 集成 flutter持续集成_flutter 阿里 号码认证_08

image.png

打包分支

flutter jpush ios 集成 flutter持续集成_Jenkins_09

image.png

源代码管理

flutter jpush ios 集成 flutter持续集成_Jenkins_10

image.png

SSH私钥添加

flutter jpush ios 集成 flutter持续集成_Jenkins_11

image.png

证书和描述文件配置

flutter jpush ios 集成 flutter持续集成_Jenkins_12

image.png

flutter jpush ios 集成 flutter持续集成_Jenkins_13

image.png

iOS证书和描述文件首先要在系统管理->Keychains and Provisioning Profiles Management中设置和上传后才能在你的项目中选择添加,iOS证书和描述文件的制作我就不多说了,自行Google

flutter jpush ios 集成 flutter持续集成_flutter打包的app有多大_14

image.png

这里的login.keychain文件可能需要自己copy到桌面并改下文件后缀,因为它是隐藏文件

flutter jpush ios 集成 flutter持续集成_iOS_15

image.png

这里的描述文件都要上传,其实路径就可以写/Users/xxxx/Library/MobileDevice/Provisioning Profiles路径,这是Xcode保存描述文件的路径,上传的时候也可以去这个路径下去上传

flutter jpush ios 集成 flutter持续集成_iOS_16

image.png

一切准备好后就可以在项目配置中选择证书和描述文件了,这时我们第一次add keychain可能不能去选择Code Signing Identity,需要我们保存一下后就能选择了

flutter jpush ios 集成 flutter持续集成_flutter打包的app有多大_17

image.png

flutter jpush ios 集成 flutter持续集成_Jenkins_18

image.png

在这里我们使用shell脚本来构建,以便我们构建完成能够上传到fir上。

flutter jpush ios 集成 flutter持续集成_flutter打包的app有多大_19

脚本代码

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脚本所需要的参数,不过没事,你只需要在你的工程文件再添加一个脚本就行了。

flutter jpush ios 集成 flutter持续集成_flutter 阿里 号码认证_20

image.png

最后还要在你的工程中设置描述文件(制作相应环境的描述文件,下载并打开,debug对应开发证书,adhoc和release对应生产证书),到了这里大家可能有个疑问,就是前面我都上传了证书了,为什么这里还要填写,原因是前面上传的证书只是为了保存Code Signing Identity以便在login.keychain去访问他,而不是去保存它,我想描述文件也同样如此,所以我们需要设置描述文件的路径

flutter jpush ios 集成 flutter持续集成_iOS_21

image.png

构建名称设置工程名+打包模式+分支名

flutter jpush ios 集成 flutter持续集成_flutter打包的app有多大_22

image.png

最后一步,在编译历史中成功显示fir地址,先要设置Html显示

flutter jpush ios 集成 flutter持续集成_iOS_23

WechatIMG4650.jpeg

flutter jpush ios 集成 flutter持续集成_flutter_24

image.png

这时候你就能打出iOS包了并显示了

Android

安卓打包相对于iOS来说就简单很多了

  1. 新建项目

image.png

  1. 项目构建配置

image.png

flutter jpush ios 集成 flutter持续集成_flutter打包的app有多大_25

image.png

flutter jpush ios 集成 flutter持续集成_iOS_26

image.png

flutter jpush ios 集成 flutter持续集成_Jenkins_27

image.png

flutter jpush ios 集成 flutter持续集成_Jenkins_28

image.png

作者:xqqlv