为什么要实现自动部署
小程序开发迭代里,有以下几个个头痛的问题,
如何准确并快速的的把小程序上传去后台,并让测试人员进行测试?
测试同事找开发要二维码,效率较低
本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题
小程序的体验发布太依赖开发者,通常只有开发者熟悉微信开发者工具一系列的上传流程,而每次发布的是有页可能因为忘记合并分支,忘记开启构建命令导致一些列不可知的错误,从而导致影响开发进度、发布流程不可控等一系列问题。
针对这些问题我们需要一套可以随时从Git上拉取最新代码选取分支和tag并自动打包构建不同环境上传至小程序后台的系统来解决以上问题。 如何实现?开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。
传送门:"developers.weixin.qq.com/miniprogram…"
方案
通过命令行与 HTTP 服务可以想到一下几种思路
通过老牌持续集成工具Jenkins配置shell脚本调用命令行上传部署
通过配置GitLab CI在项目内添加.yml编写CI文件调用命令行上传部署
通过Node调用Http服务配合Gitlab-Api+shell命令为前端提供调用接口,前端调用接口实现自动编译上传部署
本文将针对第三种思路详细阐述实现一个自动化部署系统的步骤和实现过程中的思考。
为什么我不用第一种和第二种?一是因为搞这种现成的配置式的东西弄出来没什么成就感,用第三个思路写顺便可以练练Node,二是因为虽然思路有了,但配置还没玩明白,等我研究明白了再单独写吧。emmmm.....
需要用到的知识点(知识点不会的童鞋先去补课)
NodeJS
Gulp
Git命令
GitLab-Api或Github-Api(本文全部使用gitlab-api)
Vue+Scss+layui+Html实现前端页面功能
传统流程你正在认真coding,和某个bug激烈战斗,已经有了头绪正准备一气呵成干掉它。突然被别人打断并告诉你需要为他提供一个测试环境的二维码...
为了这个二维码你做了以下事情
忙活完之后你将分支切换回来,不断回想刚才的思路,脑子里一万个那啥狂奔,但如果直接反手丢给他一个发布系统链接地址,那么他只要按照以下步骤点点点就可以轻易的搞定这件事而不用来冒着被砍的风险来找你:
输入git地址和小程序开发工具端口地址(配置一次即可)
选择需要发布的对应分支
选择构建环境打包
上传至小程序后台
登录小程序后台设置体验版获取二维码
搞定收工,全程无需发布人员操作任何代码相关,只要会点下一步,有发布权限即可
开发过程 流程图
后端功能实现
环境依赖
实现上传小程序后台接口;
实现拉取git项目到本地的接口;
实现获取gitlab项目信息,分支及tag的接口;
实现切换分支及tag接口
实现项目编译打包的接口;
实现拉起开发者工具的接口;
环境依赖在后端功能的实现上用了以下框架和模块
express (node框架)
request(网络请求模块)
fs (文件处理模块)
log4js (输出log日志)
process(子进程模块,用来在node中执行shell命令)
1. 拉起开发者工具的接口