手摸手聊聊小程序持续集成Jenkins

本文首发在个人github博客 github.com/Pasoul/blog… ，感兴趣的同窗能够点个star，不要迷路哦~

咱们为何要持续集成？

试想如下两个场景：

场景一：你在开发新功能的时候，同事A找你要小程序体验二维码，因而你只能：

git stash // 缓存本地修改
git checkout release // 切换到测试分支
yarn test // 打测试包
... // 预览、切回分支
git stash pop // 还本来地修改
复制代码

而后整理被打断的代码思路，继续coding，暗自吐槽（二维码是有35min过时时间的，一会又得找我了...）

场景二：小程序到了提测日期，恰巧负责开发的你今天请假了，意味着没人能够为测试同窗打包，所以耽误了项目进度。

以上两个场景咱们发现一个共同的问题，小程序的体验发布太依赖开发者，由于一般只有开发者熟悉微信开发者工具一系列的上传流程，从而致使影响开发进度、发布流程不可控等一系列问题...

若是小程序能够经过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，结果以下：

而且开发者工具已经启动：

ps: mac环境下若是是新安装的开发者工具，必定要先打开并经过安全验证。

登陆微信开发者工具

终端执行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l，结果以下：

扫描二维码后，终端打印login success，而且此时开发者工具已经登陆：

咱们尝试使用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，能够查看预览二维码

咱们知道开发者能够经过命令行或 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_profile
export PATH=$JAVA_HOME/bin:$PATH:/Users/pengyong/Library/Tomcat8/bin
source ~/.bash_profile
复制代码

3. 为了不权限问题，给你的Tomcat/bin/*.sh分配权限

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

4. 查看8080端口是否被占用，使用kill PID解除占用

lsof -i:8080
kill PID
复制代码

5. 终端输入startup.sh，若是出现下图所示内容，则启动成功

6. 浏览器访问http://localhost:8080/

7. 关闭Tomcat使用shutdown.sh

至此，Tomcat的安装基本上完成了，接下来安装Jenkins

安装Jenkins

1. 官网下载Jenkins war包，放入你的Tomcat/webapps目录下

2. 浏览器访问http://localhost:8080/jenkins

3. 初次访问会让你输入密码，能够根据路径提示获取密码

若是文件提示没有权限没法打开，须要先修改权限，以下：

4. 输入密码，点击continue，进入插件安装页面

5. 点击推荐安装，等待安装完成

6. 安装成功后，进入建立Jenkins用户界面，填写完成点击Save and Continue

7. 用户建立完成后进入配置Jenkins URL界面，你能够将其修改为你指望的地址，而后点Save and Finish

8. 到了这个界面，恭喜你设置Jenkins成功，可是咱们还差最后一步：重启Jenkins

9. 浏览器访问http://localhost:8080/jenkins/restart(你的jenkins地址+restart)，点击Yes重启

有可能页面一直展现loading，你能够尝试直接访问Jenkins主页，若是出现这个页面，Jenkins的安装过程到此结束，你能够建立任务了。

10. 插件安装：系统管理 - 插件管理 - 可选插件(Available)

Git parameter: 可以实现选择指定分支进行构建的功能 description setter: 用于生成预览二维码

至此准备工做已完成，让咱们开始构建小程序吧。

任务构建-配置

1. 咱们新建一个名为wechat的任务，选择构建一个自由风格的软件项目，点击ok进入到配置界面

2. General配置选择参数化构建过程

build_type用于选择构建的是开发版、测试版仍是生产版的小程序

branch用于选择构建的分支（若是没有这个选项，检查Git parameter这个插件有没有安装）

upload_desc和upload_version两个文本参数分别用于在构建时填写小程序的备注和版本

3. 源码管理选择Git，填上仓库地址，分支这里默认是master，改为咱们构建时选择的分支（注：本地生成的 id_rsa.pub 添加到git仓库的ssh认证，不然jenkins没法链接git）

4. 构建选择执行shell

脚本以下，能够按需修改：

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 执行项目构建
yarn install 
if [ "$build_type" == "dev" ]
  then
  yarn run test
else
  yarn run $build_type
fi
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(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 1
fi
if [ "$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
复制代码

5. 构建后操做选择Set build description（没有则检查description setter插件是否安装）

这里使用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，选择你要构建的类型、分支等参数，这里咱们选择的是开发版：

2. 构建完成后发现二维码以文本的形式展现，没有展现图片

解决的方法是在系统管理 -> 全局安全配置 -> 标记格式器 -> 选择Safe HTML

这时预览二维码就出来了，注意二维码是有过时时间的（35min）

至此预览二维码的构建任务已经完成，咱们尝试上传代码到微信平台

任务构建-上传代码

1. 依然是选择构建类型、分支，不一样的是上传代码须要填小程序版本号和项目备注，而后执行构建

2. 到运营平台或开发平台查看提交的版本

友情提示

1. 开发者工具必须在登陆状态下进行预览、上传的操做，为了不帐户冲突，能够在Jenkins服务器上使用专门的微信帐号进行登陆，这个帐户要开启开发者和体验者权限，尽可能不要使用开发者的帐号。
2. 不要直接在官网下载Jenkins安装运行，坑真的不少。

总结

目前小程序的发布大多仍是依赖开发者手动上传，而且小程序持续集成仍是有不少问题：开发者工具不支持Linux环境、没法经过命令行生成体验版二维码等等。可是持续集成这个方向仍是值得你们研究的，开发和发布要两开花嘛...

参考：

• 微信小程序集成 Jenkins
• Mac Jenkins的安装和使用