需求研发,大致分为开发联调、测试、产品体验走查、预发布验证、发布几个步骤。期间我们可能会遇到很多关于调试和测试环境的问题,今天就推荐给大家一个集远程环境配置和抓包调试为一体的最佳实践方案——Nohost。
01
背景
如前言所说,我们需求研发常常遇到下面三个问题:
02
Nohost
首先,需要介绍一个基于Node实现的跨平台web调试代理工具——whistle,目前已有6.2k的star。
而nohost则是whistle的原班人马基于whistle实现的多用户多环境配置及抓包调试系统,不仅具备 whistle 的所有功能,并在 whistle 基础上扩展了一些功能,且支持多人多环境同时使用。
nohost很好地解决了产品老板们和测试同学们秒切环境的痛点,在产品页面上的小圆点随心切换环境,根本不需要关心背后环境配置细节。
其次nohost是中心化的环境配置,对开发新人和多人团队极其友好,nohost基于whistle,环境规则都是whistle的配置语法,能够满足各种各样的请求响应配置需求。
03
功能
下面详细介绍一下nohost提供了哪些强大的功能:
1.在页面注入便捷的环境选择工具
不管是开发、测试还是产品都很容易切换环境。测试和产品体验的时候不需要关心环境配置细节。同时小圆点功能菜单中,还包含2个很实用的抓包调试功能:
具体可见下方的截图,里面有“复制链接”、“查看抓包”,“选择环境”几个快捷按钮:
2.多端支持
nohost支持在pc、h5、小程序注入环境选择小圆点。
3.每个账号都可以建多个环境配置
环境配置之间可以通过“@”引入其他账号的环境配置,比如上图 landcai/学员标签引入了 edudocker/基础测试环境 的规则。
这样就可以将账号作为环境的命名空间,可以对不同类型的环境配置做清晰的划分。这样前端直接引入后台环境或者后台直接引入前端环境,并不需要知道对方具体环境细节。
4.抓包日志导入/导出/分享
在我们调试测试过程中,如果分析到某个请求可能有问题,这时候希望能把这个请求给后台查看具体什么问题,最原始的方式是截图但信息显然很难截全。而在nohost的可以很快捷地将抓包日志共享给其他人看。
在远程抓包页面中,我们可以轻松将请求导入/导出为.saz或者.txt文件,当然更高效的是直接分享抓包的链接:
5.强大的插件系统
nohost 兼容所有 whistle 插件,并支持把插件安装在全局的whistle,或只对所有账号生效,也可以只对某个账号生效。
whistle插件官方提供了很多了插件,比如集成eruda和vConsole等调试H5页面工具的插件、保存历史抓包记录、mock等,这些都可以在nohost安装。
如何开发 whistle 插件直接参考GitHub 文档:https://github.com/avwo/whistle
04
nohost原理
nohost是如何解决研发过程中的抓包调试以及一些测试体验环境问题呢?
nohost的架构如下图所示:
用户在nohost注入在产品页面上的环境选择小圆点选择环境后,请求到达nohost服务后,nohost会自动根据环境配置规则将请求转发到不同的测试服务器。
nohost是一个远程代理服务,它能够将环境配置中心化,并且远程提供环境不占用个人开发环境。具体的技术原理如下图所示:
nohost多用户多环境的原理,简单地说就是,nohost插件根据用户选择的 账号/环境 信息, fork出一个独立的账号专属的whistle进程处理请求,子whistle进程再根据环境配置处理请求的转发或者改写响应。这也是nohost能充分利用机器性能的奥秘,它利用了多进程。
nohost提供的多账号多环境能力,可以使得不同账号的配置和环境之间隔离互不干扰。另外nohost能极致地利用多核机器的性能,使得一台服务器能轻轻松松同时为大型团队提供代理抓包服务。nohost在在线教育部门3大业务稳定运行2年多了,部门内几乎所有研发同学日常工作中都会用它。
05
搭建高效灵活的测试体验环境
ps: 如果测试环境比较比较简单,可以跳过本节内容,接入nohost即可直接使用。
对一个大型的研发团队,不仅要提高团队调试效率,如何打造高效的测试体验环境,也是一个值得花精力去不断做好的事情。对一个大型团队难免遇到以下一些问题:
nohost提供了很强的开放能力,它提供对外接口,可供发布系统、CI等工具操作,实现自动化增删查改规则。下面我们看下如何利用nohost搭建高效的测试环境。
1.自动生成独立的环境
比如2名前端开发同学在同一个项目并行开发不同需求,一个在分支 featureA 开发 ,一个在分支 featureB 开发,恰好他们工期重合度很高,如果在开发阶段就让他们不断进行代码合并,显然很影响效率。
这时对一个页面比如 https://ke.qq.com/admin/index.html ,就得 要求,在环境a 它是featureA构建的页面,而在环境b它是featureB 构建的页面。
nohost可以结合CI自动的生成独立的测试环境。就拿我们腾讯课堂机构的项目来说,如何实现呢?我们使用公司CI平台,每次push代码会触发执行CI流水线, 实现生成独立的环境关键有2步:
其中 $ORANGE_BRANCH为git分支名。
$git提交人/$git项目名-CI环境
, 具体内容为: @$ORANGE_BRANCH
的 whistle 规则,上面@$ORANGE_BRANCH
是一个模板语法 , 我们在规则模板里面加了如下配置: ke.qq.com/admin /data/sites/${name}/edu/admin
比如我开发完需求push了一个feature_new分支代码,CI工具就会自动生成lancai/agency-react-CI 环境规则。
然后用户只要在页面http://ke.qq.com/admin/index.html的小圆点选择了lancai/agency-react-CI 环境 ,他访问的index.html页面实际上返回的就是 nohost服务器上的 /data/sites/feature_new/edu/admin/index.html。
如果是其他同学push了一个不同分支,那么选择 其他同学/agency-react-CI 环境, 访问的就会是不一样的分支构建出来的页面。
2.前后端环境灵活组合
区别于上面的 @分支是引入模板配置, nohost还支持 @账号/配置名 引入其他账号的配置,这非常方便组合前端和后台的环境配置。nohost还支持将一些配置放入请求头中,这样更容易实现一些后台环境的配置,比如后台可能是以L5形式切换环境。
根据上图的配置 ,nohost就会在请求头中加入
x-nohost-javacgi_qqke_web_tob:10.11.11.11:8080
那么后台的webserver 就可以根据请求头的变量值转发到对应的服务地址。
3.结合反向代理实现外网访问测试环境
nohost安装在内网环境,主要用于测试和体验环境的代理和抓包调试。如果在业务的外网接入层通过反向代理到nohost的方式,可以打通外网访问测试环境,在外网免代理测试需求。并且外网访问测试环境的请求收敛到一台nohost服务器,可以更容易保障业务安全性。
06
小结
nohost解决了以下几个痛点:
07
如何接入
nohost的接入使用非常简单,三步即可体验到nohost的美妙。
部署nohost服务很简单,只需要在一台服务器上安装 @nohost/server npm包然后启动服务即可,具体可查看下方的nohost接入文档。
最后,将团队的代理抓包工具升级为nohost,是一个很不错的将团队调试抓包效率提升打通测试环境的措施, 欢迎接入使用~
相关链接:
我们专注前端领域多年,负责过 QQ 资料、QQ 注册、QQ 群等亿级业务。目前聚焦于在线教育领域,精心打磨 腾讯课堂、企鹅辅导 及 ABCMouse 三大产品。
扫码关注 腾讯IMWeb前端团队