持续集成从零开始在 Jenkins 上显示打包二维码

joyyang · 2019年05月15日 · 6162 次阅读

本帖已被设为精华帖！

前言

在 Jenkins 上显示二维码，是为了每次打完包之后都能方便的用手机下载，不必再使用数据线安装。

本文涉及以下内容

架设 Web 服务器 (https)
Jenkins 的 history 显示图片
Mac 安装 Homebrew 和 Python3
本地生成二维码
shell 生成 manifest.plist
微信扫码跳转
Jenkins 的 Job 之间传递变量

准备

在 Jenkins 上显示二维码的思路是修改BuildDescription并放置二维码图片的链接

因此我们需要准备以下内容

项目	备注
Web 服务器	用来存放打出来的安装包，可以参照这里部署
二维码	将安装包的链接转换为二维码图片
`build-name-setter`	Jenkins 插件，修改`BuildName`(新版本为`Build Name and Description Setter`,集成了修改`BuildDescription`的功能)

动手

一、在 Jenkins 上显示二维码图片

1. 安装 Jenkins 插件

进入 Jenkins 工作台系统管理>插件管理>可选插件>过滤>build-name-setter，勾选对应插件直接安装
返回工作台首页，选择一个Build工程>配置
可以看到构建环境处多了一个Set Build Name的选项，即插件安装成功

2. 配置`Set Build Name`插件

查看 Jekins 的环境变量参数，我们可以看到

BUILD_NUMBER
The current build number, such as "153"
BUILD_DISPLAY_NAME
The display name of the current build, which is something like "#153" by default.

Set Build Name就是修改这个BUILD_DISPLAY_NAME，默认为#${BUILD_NUMBER}
Jenkins 的默认安全设置，会把所有的输入都当成纯文本，为了使图片链接生效，需要更改一下系统管理>全局安全配置>标记格式器，将纯文本选项改为Safe HTML,保存设置
点击Set Build Name的高级，会出现Build Description的设置，可以在这里写入一个图片的链接 <img src="http://ww1.sinaimg.cn/large/007x9vWyly1g2zgykchtmj30a7064dk4.jpg" height="200" width="200/>
Build 完成之后即可在 Build 历史中看到对应的图片链接

二、生成二维码图片

生成二维码的方法有很多，可以自行网上查找，我们这里使用一个比较简单的 MyQR(Github)，MyQR 依赖于 Python，如果已经安装好 Pyhton 3，点击这里跳转到第三步

1. 安装 Homebrew

Mac 上自带 python 是 2.7.x 版本，血和泪的教训告诉我们没事千万不要动他，有可能造成一些工具无法正常使用（如：Xcode）。这里我们通过 Homebrew(官网) 安装一下 Python 3

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完毕后brew -v验证是否安装成功

$ brew -v
Homebrew 2.1.2
Homebrew/homebrew-core (git revision 48bc; last commit 2019-05-13)

如果出现

-bash: brew: command not found

可能是环境变量没有配置好，配置环境变量并更新使其生效

2. 安装 Python 3

安装完 Homebrew 之后，通过命令安装 Python 3，Homebrew 中的 Python 默认是 Python 3，因此：

$ brew install python

安装完毕后，输入python3和pip3验证是否安装成功

$ python3   
Python 3.7.3 (default, Mar 27 2019, 09:23:15) 
[Clang 10.0.1 (clang-1001.0.46.3)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> exit()

$ pip3

Usage:   
  pip3 <command> [options]

Commands:
  install                     Install packages.
  ···

3. 安装 MyQR

$ pip3 install myqr

验证安装是否成功

$ myqr -h

4. MyQR 生成二维码

MyQR 的常用参数：

myqr    Words  
        [-v {1,2,3,...,40}]  
        [-l {L,M,Q,H}]  
        [-n output-filename] 
        [-d output-directory]
        [-p picture_file]
        [-c]
        [-con contrast]
        [-bri brightness]

生成二维码，会在当前目录下生成指定的二维码

myqr 'hello word'

可以通过-n和-d来设置生成文件名和路径

$ myqr 'hello word' -n hellow.png -d ../path/

常用参数说明：

-v 控制边长，范围是1至40，数字越大边长越大；

-l 控制纠错水平，范围是L、M、Q、H，从左到右依次升高。

-n 控制文件名，格式可以是 .jpg， .png ，.bmp ，.gif ；

-d 控制位置。

-p 用来将QR二维码图像与一张同目录下的图片相结合，产生一张黑白图片。

-c 可以使产生的图片由黑白变为彩色的。

-con 用以调节图片的对比度，1.0 表示原始图片，更小的值表示更低对比度，更大反之。默认为1.0。

-bri 用来调节图片的亮度，其余用法和取值与 -con 相同。

缺点是不能识别中文，优点是一行代码即可生成，比较方便，字符范围：

数字 0 到 9

大小写的英文字母

常用英文标点符号和空格

· , . : ; + - * / \ ~ ! @ # $ % ^ & ` ' = < > [ ] ( ) ? _ { } | and  (space)

三、规范安装包链接地址

1. 修改 Apache 默认站点目录

为了方便管理和处理权限问题，我们需要修改 Apache 的默认站点路径

先创建一个新的 Web 路径

$ cd /Users/{$username}/
$ mkdir WebSites
$ cd WebSites
$ pwd          
/Users/{$username}/WebSites

修改 Apache 的httpd.conf配置 $ sudo vim /private/etc/apache2/httpd.conf 找到DocumentRoot配置 DocumentRoot "/Library/WebServer/Documents" <Directory "/Library/WebServer/Documents"> 修改为 DocumentRoot "/Users/{$username}/WebSites" <Directory "/Users/{$username}/WebSites">
修改 Apache 的httpd-ssl.conf配置 $ sudo vim /private/etc/apache2/extra/httpd-ssl.conf 找到DocumentRoot配置 DocumentRoot "/Library/WebServer/Documents" 修改为 DocumentRoot "/Users/{$username}/WebSites"
在新的 Web 路径下创建一个主页 $ cd /Users/{$username}/WebSites $ vim index.html 插入内容 <html> <body> <h1>Hello New World!</h1> </body> </html>
重启 Apache 服务 $ sudo apachectl restart
验证修改
访问服务器 IP 或域名进行验证，http://和https://都需验证
页面出现Hello New World!证明修改成功

2. 创建安装包存放路径

$ mkdir app
$ cd app
$ mkdir and
$ cd and
$ mkdir qrimg
···

创建文件路径如下

|-- app             //总目录
    |-- and         //存放Android相关文件
    |   |-- apk     //存放apk
    |   |-- qrimg   //存放对应的二维码图片
    |-- ios         //存放iOS相关文件
        |-- icon    //存放plist中对应的icon
        |-- ipa     //存放ipa
        |-- plist   //存放ipa对应plist文件
        |-- ssl     //存放SSL证书
        |-- qrimg   //存放对应的二维码图片

四、修改脚本路径并生成二维码

现在我们需要将打包脚本中生成的文件存储在对应的目录下

1. Android 脚本修改

Android 脚本比较好修改，只需在 Jenkins 生成 apk 时，将生成路径修改为上面存放的路径/Users/{$username}/WebSites/app/apk，具体打包脚本不便贴出，这里将相关变量和修改的代码贴一下

# parameters always
curlTime=`date +%Y%m%d%H%M%S`
outputpath=/Users/{username}/Desktop/package/Android_package/apk
packagename=Test
platform=android
webApk=/Users/{username}/WebSites/app/and/apk

cp $outputpath/$packagename.apk $webApk/$packagename\_$curlTime.apk
apkUrl='http://主机地址/app/and/apk/'$packagename\_$curlTime'.apk'
myqr $apkUrl -n andqr_${JOB_NAME}${BUILD_NUMBER}.png -d /Users/{$username}/WebSites/app/and/qrimg
qrUrl='http://主机地址/app/and/qrimg/andqr_${JOB_NAME}${BUILD_NUMBER}.png'

此时，我们得到了 Android 包的下载地址的二维码，然后把这个地址放在Set Build Name>高级>Build Description里即可

再 Build 时，就可以在构建历史中看到对应的二维码了

2. iOS 脚本修改

iOS 脚本修改的原理和 Android 类似，不同的是 ipa 不像 apk 一样可以直接安装，需要通过 OTA 的方式安装 (详见这篇文章)，因此我们要生成 ipa 对应的 plist 文件和对应的二维码

相关变量

# parameters always
curlTime=`date +%Y%m%d%H%M%S`
packagename=Zeus
ipaName=$packagename\_$curlTime
exportPath=/Users/xt/Desktop/package/iOS_package/ipa
ipaPath=/Users/xt/WebSites/app/ios/ipa

#生成的ipa拷到指定位置
cp $exportPath/Unity-iPhone.ipa $ipaPath

#manifest.plilst需要的参数
ipaUrl='https://主机地址/app/ios/ipa/'$ipaName'.ipa'
disImg='https://主机地址/app/ios/icon/57.png'
fullImg='https://主机地址/app/ios/icon/512.png'
bundleId=com.xxx.yyy
bundleVersion=0.0.1
displayName=Zeus

根据上面参数生成 manifest.plist

cd /Users/xt/WebSites/app/ios/plist
cat << EOF > ${ipaName}.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>items</key>
    <array>
        <dict>
            <key>assets</key>
            <array>
                <dict>
                    <key>kind</key>
                    <string>software-package</string>
                    <key>url</key>
                    <string>${ipaUrl}</string>
                </dict>
                <dict>
                    <key>kind</key>
                    <string>display-image</string>
                    <key>url</key>
                    <string>${disImg}</string>
                </dict>
                <dict>
                    <key>kind</key>
                    <string>full-size-image</string>
                    <key>url</key>
                    <string>${fullImg}</string>
                </dict>
            </array>
            <key>metadata</key>
            <dict>
                <key>bundle-identifier</key>
                <string>${bundleId}</string>
                <key>bundle-version</key>
                <string>${bundleVersion}</string>
                <key>kind</key>
                <string>software</string>
                <key>title</key>
                <string>${displayName}</string>
            </dict>
        </dict>
    </array>
</dict>
</plist>
EOF

将 plist 对应的超链接生成二维码

plistUrl="itms-services://?action=download-manifest&url=https://主机地址/app/ios/plist/${ipaName}.plist"
myqr $plistUrl -n iosqr_${JOB_NAME}${BUILD_NUMBER.png -d /Users/xt/WebSites/app/ios/qrimg

把这个地址放在Set Build Name>高级>Build Description里即可

再把 SSL 证书做一个下载二维码，放在 JOB 说明中，方便第一次的安装下载

$ cd /Users/xt/WebSites/app/ios/ssl
$ myqr http://主机地址/app/ios/ssl/ip211.crt

3. 微信扫码的处理

在实际应用过程中，大多数人的扫码工具还都是微信，但是微信内置浏览器的解析方式和其他浏览器不一样，我们还需要对这种情况进行处理。

判断是否是微信浏览器
微信官方推荐 JS 做法

var ua = navigator.userAgent.toLowerCase();
　　var isWeixin = ua.indexOf('micromessenger') != -1;
　　if (isWeixin) {
   　　 return true;
　　}else{
   　　 return false;      
　　}

完整的 HTML 示例如下：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
    <h1 id='jump'>ooooo</h1>
    <script>
    #测试时候为了刷新缓存
    window.onpageshow = function(event) {
　　　　if (event.persisted) {
　　　　    window.location.reload() 
　　　　}
    };
    #判断是否在微信浏览器
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if (isWeixin) {
        document.getElementById("jump").innerHTML="请在sarfri中打开";
　　}else{
        document.getElementById("jump").innerHTML="请在sarfri中打开";
        window.location.href="itms-services:///?action=download-manifest&url=https://主机地址/xyz.plist";     
　　}
    </script>
</body>
</html>

可参考上面生成 plist 的方式，生成对应的 apk，ssl 证书和 plist 对应的 html 文件，然后将 html 的地址生成二维码。

补充

这样做完后单个 JOB 命令过长，可将不同任务拆分成不同的 JOB，此时需要注意在不同 JOB 之间传递变量

# 将之前的内容删除
if [ -f "${WORKSPACE}/tempParams.txt" ];then
rm "${WORKSPACE}/tempParams.txt"
else
echo "File not exist"
fi

# 变量写入文件
echo bundleID="${bundleId}" >> "${WORKSPACE}/tempParams.txt"
echo ipaUrl="${bundleId}" >> "${WORKSPACE}/tempParams.txt"
····

其他 JOB 开始时读取变量

source "${WORKSPACE}/tempParams.txt"

42 个赞

共收到 0 条回复时间点赞

思寒_seveniruby 将本帖设为了精华贴 05月16日 07:51

simple 在 [精彩盘点] TesterHome 社区 2019 年度精华帖中提及了此贴 12月24日 23:00

需要登录后方可回复, 如果你还没有账号请点击这里注册。

持续集成 从零开始在 Jenkins 上显示打包二维码

持续集成 从零开始在 Jenkins 上显示打包二维码

前言

准备

动手

一、在 Jenkins 上显示二维码图片

1. 安装 Jenkins 插件

2. 配置Set Build Name插件

二、生成二维码图片

1. 安装 Homebrew

2. 安装 Python 3

3. 安装 MyQR

4. MyQR 生成二维码

三、规范安装包链接地址

1. 修改 Apache 默认站点目录

2. 创建安装包存放路径

四、修改脚本路径并生成二维码

1. Android 脚本修改

2. iOS 脚本修改

3. 微信扫码的处理

补充

持续集成从零开始在 Jenkins 上显示打包二维码

持续集成从零开始在 Jenkins 上显示打包二维码

2. 配置`Set Build Name`插件