还在给运营妹妹配代理?赶紧试试nohost吧

avatar
公众号:转转技术

起因

源于去年小组内部的一次周会上,很多人反馈需要经常给非技术同学提供host配置等服务,导致他的麒麟臂有些隐隐要发作的迹象。

周会下来后,总结了下我们日常开发过程中,环境相关的问题

  • 环境切换低效 目前我们技术团队(非前端),主要使用Fiddler/Charles + host工具等传统抓包代理调试方案,切换环境的时候时常发生 DNS 缓存无法清除的情况 同时,代理工具和浏览器页面是两个界面的,来回切换效率很低,这一点在并行项目多的时候会更加明显
  • 重复给非技术人员提供服务 就如上面周会中反馈的案例,我们需要给产品、运营、设计同学去配置代理,下载证书并认证。配置次数多了后,非常考验我们的耐心
  • 前后端环境耦合 联调期间,后端开发更换服务器时,必须要通知前端,更换代理配置
  • 无抓包历史记录 仅凭一张接口截图无法展示全部信息,测试反馈的bug无法溯源 "我这里是好的啊,现在还能复现吗?",这种情况发生的次数也不少

基于上述这些问题,我们开始找寻解决方案

破局

在抓包代理这块,转转FE团队已经更新过一次。从之前的Fiddler/Charles + host 切换到了现在所使用的 whistle

whistle 是采用 Node 实现的跨平台Web代理调试工具,不仅在环境切换效率上比Fiddler/Charles + host要高,同时它还支持端口、路径等多种匹配方式,详情请参考whistle官网,目前已经作为转转FE团队抓包代理首选方案

whistle 依旧没能解决上面所提到的问题,同时由于 whistle 依赖本地 Node 环境,所以并不适合给非技术人员使用

试想,如果将代理配置从本地迁到远端服务器,把所有请求代理转发到远端服务器,然后由远端服务器根据一套账号体系统一调度分配到对应测试服务器,那么是不是就能解决我们当下的问题呢?

avatar

基于这个想法,我们找到了适合我们需求的解决方案, 腾讯IMWeb团队出品的 nohost

nohost简介

nohost 是基于 whistle 实现的远程环境配置以及代理抓包调试系统。在保留 whistle 原有功能的基础上,将代理配置进行中心化,同时支持多人多账号,在产品页面上注入切换环境的小圆点,解决环境切换等问题。

nohost功能

总结了一些 nohost 的强大功能,更多详细功能,可以参考官网

  • 基于 whistle,所以 whistle 有的它都有。比起传统的 Fiddler/Charles,在配置方式以及修改请求响应上要简单很多

  • 访问符合入口规则的页面,可以发现页面左下角会注入一个小圆点,不管开发、测试还是产品都可以通过这个小圆点随意切换环境。同时,切换工具是注入到页面中的,效率相对较高。 avatar

  • 复制链接 复制包含当前环境的url,被分享人可以快速切换到指定环境,无需在切换工具里的host配置,提高效率

  • 可以针对抓包请求生成请求快照发送给研发,方便研发快速定位问题。 PS:再也不用通过截图、口述这种低效方式啦 avatar

  • 多端配置支持,包括PC、H5、小程序等

  • 多账号多环境,环境可以前后端分离,然后共享。

    • 前端引用后端环境可以直接通过 @后端/测试环境,并不需要知道对方具体环境细节
    • 测试可以直接 @后端/测试环境@前端/测试环境,无需再配环境。 并且不同账号的配置和环境之间是相互隔离互不干扰的
  • 插件系统,支持自定义扩展能力

  • 证书上传系统,可以上传真实证书到nohost服务器,后续无需再下载证书到本地

  • 提供对外接口,可供CI操作实现自动化增删查改环境配置,最大化提升环境配置效率

nohost原理

  1. PC端需要开启nohost客户端,基于electron开发,如图 avatar

  2. nohost客户端会将符合入口规则的请求转发到nohost服务器,移动端则直接配置代理到nohost服务器即可 PS:建议使用域名代替IP avatar

  3. 所有转发到nohost服务器的请求会经过一个主whistle进程,然后根据用户选择的 账号/环境信息 再进行转发

  4. 根据配置的规则,没有匹配到的请求会直接转发到正式环境,匹配到的请求会分发到不同账号下的独立进程,然后再由独立进程转发到对应的测试服务器。

以上就是nohost如何将配置做到中心化,并且利用多进程减少服务器压力的处理方式

nohost实践

nohost使用大致分为以下几步,具体流程可以参考请参考nohost官网

  1. 在远端服务器上安装nohost,然后执行启动命令
  2. 进入nohost管理平台 //xxx.xxx.xxx.xxx:8080/admin.html#accounts 添加账号 avatar
  3. 访问 //xxx.xxx.xxx.xxx:8080/admin.html#config/entrySettings 添加入口规则 avatar
  4. 添加完账号后进入抓包配置页面创建环境配置 avatar
  5. PC端使用nohost客户端将请求转发到远端服务器,需要开发一个 whistle 插件(在模板基础上修改几行代码就行),可以参考nohost-client avatar
  6. 访问符合入口规则的页面,就可以随意切换环境了 avatar

nohost推广

调研完成后,在小组周会上做了一次分享和交流,在收到大家的正向反馈后,准备着手向项目组其他人员进行推广。

这个是目前在做的,也是最难做的一步。虽然认识到 nohost 能解决我们日常开发过程中很多关于环境的问题,但要让其他人接受并改变原有的抓包调试习惯, 也并非一日之功。

在给项目组成员做完一次系统培训并完善了相关文档后,目前还在不断收集大家使用过程中的反馈,争取可以早日推广到全公司

未来展望

等大家都用习惯后,未来能将该工具接入到我们CI中,打通测试环境,最大化提高我们的开发效率。

福利部分

预告下,接下来我们会陆续发布转转在Hybrid、微前端、Umi等基础架构和中台技术相关的实践与思考,欢迎大家关注,期望与大家多多交流。 文章在 “大转转FE” 公众号也会发送,并且公众号有抽奖活动,本文奖品是转转纪念T恤一件,欢迎大家关注 ✿✿ヽ(°▽°)ノ✿