Node+GitLab实现小程序CI系统

为何要实现自动部署

小程序开发迭代里，有如下几个个头痛的问题，

• 如何准确并快速的的把小程序上传去后台，并让测试人员进行测试？
• 测试同事找开发要二维码，效率较低
• 本地生成的二维码会出现携带本地代码、未及时拉取分支其余改动等问题
• 小程序的体验发布太依赖开发者，一般只有开发者熟悉微信开发者工具一系列的上传流程，而每次发布的是有页可能由于忘记合并分支，忘记开启构建命令致使一些列不可知的错误，从而致使影响开发进度、发布流程不可控等一系列问题。

针对这些问题咱们须要一套能够随时从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激烈战斗，已经有了头绪正准备一鼓作气干掉它。忽然被别人打断并告诉你须要为他提供一个测试环境的二维码...
为了这个二维码你作了如下事情

忙活完以后你将分支切换回来，不断回想刚才的思路，脑子里一万个那啥狂奔，但若是直接反手丢给他一个发布系统连接地址，那么他只要按照如下步骤点点点就能够轻易的搞定这件事而不用来冒着被砍的风险来找你：

 

1. 输入git地址和小程序开发工具端口地址（配置一次便可）
2. 选择须要发布的对应分支
3. 选择构建环境打包
4. 上传至小程序后台
5. 登陆小程序后台设置体验版获取二维码
6. 搞定收工，全程无需发布人员操做任何代码相关，只要会点下一步，有发布权限便可

开发过程

流程图

 

 

后端功能实现

• 环境依赖
• 实现上传小程序后台接口；
• 实现拉取git项目到本地的接口；
• 实现获取gitlab项目信息，分支及tag的接口；
• 实现切换分支及tag接口
• 实现项目编译打包的接口；
• 实现拉起开发者工具的接口；

环境依赖

在后端功能的实现上用了如下框架和模块

• express （node框架）
• request（网络请求模块）
• fs （文件处理模块）
• log4js （输出log日志）
• process（子进程模块，用来在node中执行shell命令）

1. 拉起开发者工具的接口

mac系统上开发者工具会默认的安装路径是/Applications/wechatwebdevtools.app， 经过process模块执行shell命令open /Applications/wechatwebdevtools.app便可打开开发者工具。

 

 

2. 实现上传小程序后台接口

上传接口是这个系统的核心，虽然很简单但要实现这个接口仍是须要你对小程序工具的http调用有必定了解，接下来详细说一下如何完成此功能：
上文说到小程序开发者工具提供了命令行与 HTTP 服务两种接口供外部调用，开发者能够经过命令行或 HTTP 请求指示工具进行登陆、预览、上传等操做。

第一步（开启http服务）
打开你的开发者工具 设置——>安全设置——>服务端口，由于调用开发者工具提供的http服务必定要拼接本地的端口号，因此后续全部的操做都是要基于开发者工具开启且服务端口开启的状态下进行操做的，默认状况下服务端口是关闭的，http 服务在工具启动后自动开启，HTTP 服务端口号在用户目录下记录，可经过检查用户目录、检查用户目录下是否有端口文件及尝试链接来判断工具是否安装。

第二步（如何拿到开发者工具端口号）
在确保你的开发者工具服务端口开启的状况下，咱们能够尝试经过node的fs模块去读取储存的文件信息读取端口号，端口号文件是开发者工具自动生成的，因此它的位置是固定的，但不一样系统中的默认位置也不相同。
端口号文件位置：
macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide
微信web开发者工具/User Data/Default/.ide

 

注意！！！
像是在mac中直接去读取这个默认路径是获取不到的，由于mac中通常会将工具安装在你的当前帐户文件夹下，因此若是发现没法读取的状况能够到Uers的文件夹找找看。 好比个人mac上要想访问端口文件完整路径是这样的：
const portPath = '../../Users/admin/Library/Application\ Support/微信web开发者工具/Default/.ide';

读取端口的功能封装，后续会用到

 

第三步（上传）

接口定义：

• URL：/upload
• HTTP 方法：GET

 

 

 

 

经过调用获取端口号的方法，请求上传接口拼接端口，指定项目上传目录，就是编译出来的dist文件夹目录，将接收的描述和版本号一并拼接发送上传请求便可。

 

get请求封装

 

 

 

3. 实现拉取git项目到本地的接口

这个接口的实现主要是经过Node接收项目地址而后执行git clone的shell命令实现， 须要用到Node的child_process子进程模块用来执行shell脚本。

代码实现

 

4. 实现获取gitlab项目信息，分支及tag的接口

Gitlab有一个很是强大的API系统，几乎全部的功能都有相应的API接口，为了使用API，须要从Gitlab中获取私有token。

1. 登录你的Gitlab
2. 点击登录的账户，点击settings
3. 点击Access Tokens
4. 根据本身的须要建立适合须要的Tokens

成功拿到token以后只需在请求的时候做为query参数传递便可:
项目分支信息API api/v3/projects/ [projectId] /repository/branches
小程序项目tagaAPI api/v3/projects/ [projectId] /repository/tags

 

 

5.实现切换分支及tag接口

分支和tag接口实现的思路是同样的，接到前端请求后执行各类git命令完成

• 切换至项目目录下 cd ./project
• git branch 拿到本地分支信息
• 切换分支时经过接收的分支名称比对本地是否存在分支，如分支已存在就删除再切换，不存在就直接切换
• 经过log4js输出日志，为了页面展现用

代码实现

示例为分支切换的相关代码，tag实现的思路是同样的，只不过要把相关git命令替换便可。

 

6. 实现项目编译打包的接口

这里须要注意一下，这个接口的实现是很是灵活的，须要根据你当前项目的编译文件进行配置，好比个人项目开发时使用gulp打包编译环境到dist，其编译命令分别为:

• gulp build:Dev(联调环境)
• gulp build:Test(测试环境)
• gulp build:Slave(预发布环境)
• gulp build:Prod(线上环境)

那么同理，配置好dist输出文件目录，收到请求后执行事先实现好的shell命令便可完成打包这一步，若是你不太了解环境编译打包这块内容，能够参考我上一篇文章"《武装你的小程序——开发流程指南》"；

代码实现

 

目前为止咱们已经实现了六个后端功能，并生成了对应路由，分别为：

• /open 实现拉起开发者工具的接口；
• /up 上传小程序后台接口；
• /clone 拉取git项目到本地的接口；
• /checkoutBranch || /checkoutTag 获取gitlab项目信息，分支及tag的接口；
• /branches || /tags 获取gitlab项目信息，分支及tag的接口；
• /branches 项目编译打包的接口；

前端实现

前端页面我就不提供示例代码了，ui框架和开发框架根据你们的喜爱决定，由于有了上面这些接口咱们就已经能够愉快的对前端页面进行你须要的一些定制了，这个时候须要咱们考虑的就是一些前端的交互逻辑了，如何利用好这些接口将起串起来组成条完整的流程，如何利用gitlab的其余api扩展你须要的其余功能，好比加一个提交记录页面...

前面的流程图已经大体画出了个人思路，下面我将个人前端实现思路详细描述一下，供你们参考：

1. 实现一个启动页面，页面能够输入git地址和本地的端口路径，点击开始按钮调用/clone接口将代码拉取到项目中，同时将端口号路径储存起来后面用。
2. clone接口返回成功后调用/open接口拉起开发者工具
3. 实现一个主页面，初始化页面调用/branchs和/tag接口获取分支和tag信息，将其展现在页面上。
4. 点击切换分支获取当前选取的分支名，调用/checkoutBranch 或 /checkoutTag接口传递分支名，后端调用相应的git命令。
5. 切换分支完成后进入选择环境页，添加描述和版本号选择须要发布的环境，调用/build接口传递环境变量进行构建。
6. 构建完成显示下一步，调用/up接口传递版本号和描述发送上传请求，上传成功页面将描述，提交人，时间，环境等必要信息展现出来。
7. 去微信公众平台设置体验版
8. 完成

END

到这里一个简单的小程序发布系统就完成了，本文只是记录了个人一个开发思路但愿能对你们有所启发，有不少地方考虑的仍是不够完善但基本能用了，你们能够发散思惟实现一个本身的发布系统，也欢迎交流想法和指正个人错误，同时欢迎你们关注公众号前端小苑，我会按期在这里发表原创文章。

 

做者：李初五 连接：https://juejin.im/post/5c937bbcf265da6119043f4c 来源：掘金 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。