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

「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念T恤，走过路过不要错过哦

起因

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

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

• 环境切换低效 目前我们技术团队（非前端），主要使用Fiddler/Charles + host工具等传统抓包代理调试方案，切换环境的时候时常发生 DNS 缓存无法清除的情况 同时，代理工具和浏览器页面是两个界面的，来回切换效率很低，这一点在并行项目多的时候会更加明显

• 重复给非技术人员提供服务 就如上面周会中反馈的案例，我们需要给产品、运营、设计同学去配置代理，下载证书并认证。配置次数多了后，非常考验我们的耐心

• 前后端环境耦合 联调期间，后端开发更换服务器时，必须要通知前端，更换代理配置

• 无抓包历史记录 仅凭一张接口截图无法展示全部信息，测试反馈的 bug 无法溯源 "我这里是好的啊，现在还能复现吗？"，这种情况发生的次数也不少

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

破局

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

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

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

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

avatar

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

nohost 简介

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

nohost 功能

总结了一些 nohost 的强大功能，更多详细功能，可以参考官网^[2]

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

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

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

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

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

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

• • 前端引用后端环境可以直接通过 @后端/测试环境，并不需要知道对方具体环境细节

  • 测试可以直接 @后端/测试环境、@前端/测试环境，无需再配环境。并且不同账号的配置和环境之间是相互隔离互不干扰的

• 插件系统，支持自定义扩展能力

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

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

nohost 原理

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

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

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

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

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

nohost 实践

nohost 使用大致分为以下几步，具体流程可以参考请参考nohost 官网^[3]

1. 在远端服务器上安装 nohost，然后执行启动命令

2. 进入 nohost 管理平台 //xxx.xxx.xxx.xxx:8080/admin.html#accounts 添加账号

3. 访问 //xxx.xxx.xxx.xxx:8080/admin.html#config/entrySettings 添加入口规则

4. 添加完账号后进入抓包配置页面创建环境配置

5. PC 端使用 nohost 客户端将请求转发到远端服务器，需要开发一个 whistle 插件（在模板基础上修改几行代码就行），可以参考nohost-client^[4]

6. 访问符合入口规则的页面，就可以随意切换环境了

nohost 推广

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

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

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

未来展望

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

本月文章预告

预告下，接下来我们会陆续发布转转在Hybrid、微前端、Umi等基础架构和中台技术相关的实践与思考，欢迎大家关注，期望与大家多多交流

文末福利

转发本文并留下评论，我们将抽取第10名留言者（依据公众号后台排序），送出转转纪念T恤一件，大家转发起来吧~

参考资料

[1]

whistle 官网: https://wproxy.org/whistle/

[2]

官网: https://nohosts.github.io/nohost/

[3]

nohost 官网: https://nohosts.github.io/nohost/zh/quickstart.html

[4]

nohost-client: https://github.com/nohosts/client