最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 工具/框架 查看内容

Node+GitLab实现小程序CI系统

Rolan 2019-3-26 00:56

开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。传送门:"developers.weixin.qq.com/miniprogram…"方案通过命令行与 HTTP 服务可以 ...

开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。

传送门:" developers.weixin.qq.com/miniprogram… "

方案

通过命令行与 HTTP 服务可以想到一?#24405;?#31181;思路

  • 通过老牌?#20013;?#38598;成工具Jenkins配置shell脚本调用命令行上传部署
  • 通过配置GitLab CI在项目内添加.yml编写CI文件调用命令行上传部署
  • 通过Node调用Http服务配合Gitlab-Api+shell命令为前端提供调用接口,前端调用接口实现自动编译上传部署

本文将针对第三种思路详细阐述实现一个自动化部署系统的步骤和实现过程中的思考。

为什么我不用第一种和第二种?一是因为搞这种现成的配置式的东西弄出来没什么成就感,用第三个思路写顺便可以练练Node,二是因为虽然思路有了,但配?#27809;?#27809;玩明白,等我研究明白了再单独写吧。emmmm.....

需要用到的知识点(知识点不会的童鞋先去补课)

  • NodeJS
  • Gulp
  • Git命令
  • GitLab-Api或Github-Api(本文全部使用gitlab-api)
  • Vue+Scss+layui+Html实现前端页面功能

传统流程

你正在认真coding,和某个bug激烈战斗,已经有了头绪正准备一气呵?#31579;?#25481;它。突然被别人打断并告诉你需要为他提供一个测试环境的二维码...

为了这个二维码你做了以下事情

忙活完之后你将?#31181;?#20999;换回来,不断回想刚才的思路,脑子里一万个?#24039;?#29378;奔,但如果直接反手丢给他一个发布系统链接地址,那么他只要按照以下步骤点点点就可以轻易的搞定这件事而不用来?#30333;?#34987;砍的风险来找你:

  1. 输入git地址和小程序开发工具端口地址(配置一次即可)

  2. 选择需要发布的对应?#31181;?figure style="margin: 0px 0px 1em;">

  3. 选择构建环境打包

  4. 上传至小程序后台

  5. 登录小程序后台设置体验版获取二维码

  6. 搞定收工,全程无需发布人员操作任何代码相关,只要会点下一步,有发布权限即可

开发过程

流程图

后端功能实现

  • 环境?#35272;?/li>
  • 实现上传小程序后台接口;
  • 实现拉取git项目到本地的接口;
  • 实现获取gitlab项目信息,?#31181;?#21450;tag的接口;
  • 实现切?#29615;种?#21450;tag接口
  • 实现项目编译打包的接口;
  • 实现拉起开发者工具的接口;

环境?#35272;?/h4>

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

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

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

mac系统上开发者工具会默?#31995;?#23433;装路径是 /Applications/wechatwebdevtools.app , 通过process模块执行shell命令 open /Applications/wechatwebdevtools.app 即可打开开发者工具。

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

上传接口是这个系统的核心,虽然很简单但要实现这个接口还是需要你对小程序工具的http调用有一定了解,接下来详细说一下如何完成此功能:

上文说到小程序开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。

第一步(开启http服务)打开你的开发者工具 设置——>安全设置——>服务端口 ,因为调用开发者工具提供的http服务一定要拼接本地的端口号,所以后续所有的操作都是要基于开发者工具开启且服务端口开启的状态下进行操作的,默认情况下服务端口是关闭的,http 服务在工具启动后自动开启,HTTP 服务端口号在用户目录?#24405;?#24405;,可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装。

第二步(如?#25991;?#21040;开发者工具端口号)

在确保你的开发者工具服务端口开启的情况下,我们可以尝试通过node的fs模块去读取储存的文件信息读取端口号,端口号文件是开发者工具自动生成的,所以它的位置是固定的,但不同系统中的默认位置也不相同。

端口号文件位置: macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide 
微信web开发者工具/User Data/Default/.ide

注意!!!

像是在mac中直接去读取这个默?#19979;?#24452;是获取不到的,因为mac中一般会将工具安装在你的当前账户文件夹下,所以如果发现无法读取的情况可以到Uers的文件夹找找看。 比如我的mac上要想访问端口文件完整路径是这样的:

const portPath = '../../Users/admin/Library/Application\ Support/微信web开发者工具/Default/.ide';

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

第三步(上传)

接口定义:

  • URL:/upload
  • HTTP 方法:GET

通过调用获取端口号的方法,请求上传接口拼接端口,指定项?#21487;?#20256;目录,就是编译出来的dist文件?#24515;?#24405;,将接收的描述和版本号一并拼接发送上传请求即可。

get请求封装

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

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

代码实现

4. 实现获取gitlab项目信息,?#31181;?#21450;tag的接口

Gitlab有一个非常?#30475;?#30340;API系统,几乎所有的功能都有相应的API接口,为了使用API,需要从Gitlab中获取?#25509;衪oken。

  1. 登陆你的Gitlab
  2. 点击登陆的帐户,点击settings
  3. 点击Access Tokens

  4. 根据自己的需要创建适合需要的Tokens

成功拿到token之后只需在请求的时候作为query?#38382;?#20256;递即可:

项目?#31181;?#20449;息APIapi/v3/projects/ [projectId] /repository/branches

小程序项目tagaAPIapi/v3/projects/ [projectId] /repository/tags

5.实现切?#29615;种?#21450;tag接口

?#31181;?#21644;tag接口实现的思路是一样的,接到前端请求后执行各种git命令完成

cd ./project

代码实现

示例为?#31181;?#20999;换?#21335;?#20851;代码,tag实现的思路是一样的,只不过要把相关git命令替换即可。

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

这里需要注意一下,这个接口的实现是非常灵活的,需要根据你当前项目的编译文件进?#20449;?#32622;,比如我?#21335;?#30446;开发时使用gulp打包编译环境到dist,其编译命令分别为:

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

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

代码实现

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

/open
/up
/clone
/checkoutBranch || /checkoutTag
/branches || /tags
/branches

前端实现

前端页面我就不提供示例代码了,ui框架和开发框架根据大家?#21335;?#22909;决定,因为有了上面这些接口我们就已经可以愉快的对前端页面进行你需要的一些定制了,这个时候需要我们考虑的就是一些前端的?#25442;?#36923;辑了,如何利用好这些接口将起串起来组?#21830;?#23436;整的流程,如何利用gitlab的其他api扩展你需要的其他功能,比如加一个提交记录页面...

前面的流程图已经大致画出了我的思路,下面我将我的前端实现思路详细描述一下,供大?#20063;?#32771;:

  1. 实现一个启动页面,页面可以输入git地址和本地的端口路径,点击开始按钮调用 /clone 接口将代码拉取到项目中,同时将端口号路径储存起来后面用。
  2. clone接口返回成功后调用 /open 接口拉起开发者工具
  3. 实现一个主页面,初始化页面调用 /branchs 和 /tag 接口获取?#31181;?#21644;tag信息,将其展示在页面上。
  4. 点击切?#29615;种?#33719;取当前选取的?#31181;?#21517;,调用 /checkoutBranch 或 /checkoutTag 接口传递?#31181;?#21517;,后端调用相应的git命令。
  5. 切?#29615;种?#23436;成后进入选择环境页,添?#29992;?#36848;和版本号选择需要发布的环境,调用 /build 接口传递环境变量进行构建。
  6. 构建完?#19978;?#31034;下一步,调用 /up 接口传递版本号和描述发送上传请求,上传成功页面将描述,提交人,?#22868;洌?#29615;境等必要信息展示出来。
  7. 去微信公众?#25945;?#35774;置体验版
  8. 完成
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 李初五 来自: 掘金
新时时彩软件