Jenkins实现微信小程序持续部署

痛点？

自动化一直是咱们前端工程化的一个重要方向，前端工程从构建到部署，以自动化脚本执行替代人工操做，不只能更好地减小中间流程出现的误操做，还能使得开发从重复性的劳动中解放出来；

小程序开发受限于平台的开发工具，咱们在开发的过程当中，编译以及部署（上传代码）小程序代码，都须要经过可视化的开发工具，因此H5开发中使用的持续部署流程，并不适用于小程序开发流程；这就使得咱们在开发小程序的过程当中，构建和发布代码到测试和线上环境，每每须要经过开发的手动操做，万一出现手工误操做，就会阻断测试流程或者出现生产事故了；设想一下如下场景：

• 场景：一个小程序工程每每涉及到多个分支并行开发，每一个分支对应着不一样的需求或特性，在版本迭代的过程当中，每一个分支对应上线时间可能不同；在一个分支正在测试阶段，另外一个分支正在开发阶段的状况下，测试找你去修复测试分支的bug，这个时候，你就须要切换到测试分支去修复问题，从新构建和上传代码，提供测试一个新的二维码，而后再回到新的开发分支继续开发；一旦出现新的bug，你又要重复上述工做；

在这个过程当中，构建和部署代码的重复性劳动，大大下降了开发的效率；解决这个痛点，将能提高效率；

解决思路

咱们知道，H5持续发布的大体流程能够是由Jenkins触发构建脚本，构建脚本运行生成目标代码的dist文件夹，再经过脚本将dist文件夹上传至部署的服务器目录中（此处简化描述了，实际流程可能会更加复杂）；这里注意到了构建和上传的动做都是由脚本执行的，而通常的脚本会使用bash来实现：

git clone xxx
git checkout target_branch
npm install
npm run build
tar dist

执行完脚本后，由Jenkins经过ssh将文件上传到部署的服务器目录中；

那么问题来了，小程序的持续发布是否能够参照呢？这里须要解决的是小程序的构建和上传是否也能实现相关的脚本；

答案是能够的，微信小程序开发工具在新的版本中，推出了命令行调用和http调用两种方式，使得构建和上传的流程不在拘泥于开发工具的可视化界面；这也意味着，咱们也能够编写bash脚本，在Jenkins中自动化执行这些流程；

好，如今就一块儿来实践一下！

命令行和http调用

在新版本的微信开发者工具中，提供了命令行调用和http调用两种方式进行登陆、预览、上传等操做，具体使用方式能够直接参照官方文档；

须要注意的是，这两种调用都须要先在微信开发工具的 设置 > 通用设置 > 安全中开启服务端口。

两者有什么区别呢：

• 命令行调用的方式，容许在当前机器上，经过命令行工具或者shell脚本对微信小程序开发工具中的命令进行调用；
• 而http调用的方式，容许在当前机器上，经过http请求的方式调用微信小程序开发工具；该方式是否支持跨机器调用，还须要进一步研究，这里先不讨论；

本文中将使用 命令行调用去实现小程序的自动化部署。

Jenkins配置

在使用Jenkins构建部署上，存在多种方式；你能够直接在你的Jenkins服务器的机器上完成部署，可是因为小程序的命令行和http调用只提供Mac和Windows两种方式，因此这就意味着Jenkins服务也须要在对应的操做系统上；不过，Jenkins的服务也有可能会部署在Linux系统上，而Linux上不支持小程序的命令行和http调用，所以，在这种状况下，就有必要将Jenkins服务和小程序的构建服务进行分离。

实现Master/Slave主从模式

正好，Jenkins支持Master/Slave模式，在这种模式下，Jenkins服务能够部署在Linux服务器上，做为Master机器；而小程序的构建机器能够做为Jenkins服务器的Slave节点，专门运行由Master机器触发的小程序构建任务；

这里选择一台Mac机器做为小程序的构建机器，将这台机器配置为Slave节点时，须要在Jenkins按照以下步骤配置：

• 在Manage Jenkins > Manage Nodes and Clouds中选择新建节点；
• 新建节点时，选择Permanant Agent，而后开始配置节点信息；
• 配置节点信息时，远程工做目录是指在Mac上运行jenkins的工做目录，须要本身手动建立一个目录，这样后面git拉到的代码会自动放到该目录下，这里必定要注意权限，文件目录设为可读可写，要否则后面jenkins启动时候会遇到权限问题；
• 用法选择Only build jobs with label expressions matching this node，确保只有Jenkins任务中声明的Label匹配，才能使用该Slave节点；
• 启动方式选择Launch agents via SSH，Credentials配置时，按照Slave机器的用户名和密码填写便可；

• 配置完节点信息后，记得须要在Slave节点的Mac机器上，建立对应的远程工做目录，不然会构建时会提示找不到对应目录；
• 最后，记得开启Slave节点Mac机器上的远程登陆权限，不然没法经过SSH进行链接；
• 成功后，会看到构建的节点多了一个mac_node，但此时，节点会处于未链接的状态，须要打开节点，再选择Launch agent进行启动；

构建任务的建立

命令行调用中的命令须要接收多个参数，例如upload命令就须要传递项目地址、版本号、备注等的参数，这些参数有一些会根据需求而改变，例如版本号可能每次都会变化；可是原始的Jenkins容许接收的参数有限，因此为了拓展参数，这里使用提早安装Extended Choice Parameter Plug-In和Git Parameter Plug-In用来拓展构建参数以及Git分支参数；

• 建立一个Freestyle Project，配置String Parameter：appId参数、版本号、描述；
• 配置Git相关参数，例如使用Git Parameter插件提供分支选择；

• 配置Git仓库，注意配好Credentials；

• 限制项目运行的节点为新建立的mac_node节点；

• 配置mac_node主机的环境参数，在Manage Jenkins > Manage Nodes and Clouds中选择对应的主机节点，在配置中，设置环境参数，键为PATH，值能够从主机中经过echo $PATH命令查看；

• 在Jenkins任务中的Execute shell填写shell脚本；
• 完成！其余的功能能够按照实际的需求进行扩展；

脚本的实现

因为本文将使用命令行调用去实现小程序的自动化部署，下面将实现对应的shell脚本：

git checkout ${BRANCH}

npm i

alias mpcli='/Applications/wechatwebdevtools.app/Contents/MacOS/cli'

mpcli open

npm run build:weapp

mpcli upload --project ${WORKSPACE}/dist -v ${VERSION} -d ${DESC}

注意，须要先登陆开发者工具

大体流程为：

• 切换指定分支，安装依赖；
• 设置alias，缩短命令长度；
• 执行open命令，确保小程序开发工具已经打开；
• 执行构建命令；
• 上传dist目录代码；

测试

下面就看看执行的效果：

• 选择Build with Parameters，填写必须的参数：

• 点击构建后，查看控制台输出，以下结果为成功！

总结

本篇文章主要分享了关于在小程序构建流程中的一个痛点，而且经过Jenkins和小程序开发工具的命令行调用去解决在开发流程上的问题，实现构建流程的自动化；文章中不只有脚本的实现，并且还有Jenkins的配置，思路会比较简单的，在实际应用中，能够结合具体应用场景，再进行改造，这里先抛砖引玉；最后但愿文章能对你们有启发，同时也欢迎你们讨论指正！