远程办公下开发测试协同如何提效

1. 远程办公下开发测试协同如何提效吴文斌: 腾讯高级前端工程师杨晨: 腾讯高级前端工程师

2. 个人介绍杨晨：腾讯高级前端工程师，主导公司内部 Oteam TDE的研发协同、运营推广，致力为开发联调、测试体验环节提效，同时参与whistle周边生态建设，目前负责NOW直播用户增长的大前端开发工作。

3. 1. 疫情期间远程办公下开发测试协同的挑战目录

4. 01 疫情期间远程办公下开发测试协同的挑战远程办公下带来各种低效问题

5. 疫情期间远程办公协同开发联调、产品体验你们是怎么做的？

6. 1.1 开发联调截图？传递抓包文件？

7. 1.2 测试问题定位步骤长很低效

8. 1.3 产品体验前置步骤太长

9. 1.4 远程办公协同的业界方案 vpn + 修改hosts vpn + 代理工具 vpn + 测试域名

10. 1.4.1 vpn + 修改hosts 问题： 1、手动修改 2、借助工具修改 switchhosts 1. 功能受限 2. 不支持移动端 3. 信息同步慢开发联调、测试、产品体验效率很差

11. 1.4.2 vpn + 各类代理工具 whistle fiddler charles 1. 功能受限 => 2. 信息同步慢 => 支持各种复杂规则配置分享抓包信息 3. 不支持移动端代理端 => 支持移动端代理

12. 1.4.2 vpn + 各类代理工具的挑战问题： whistle fiddler 1. 体验前置步骤多、成本大 charles 2. 分享抓包路径长步骤： 3. 配置不共享 1. 启动代理工具 2. 配置系统代理或使用浏览器插件 3. Wifi代理 4. 手机配置https证书 4. 本地需要启动代理服务测试、产品体验效率很差

13. 1.4.3 vpn + 测试域名优势 1. 访问方便劣势 1. 无抓包，定位问题复杂 2.配置固定，修改配置麻烦 3. 切换环境不方便 4.安全性如何保证测试、产品体验很方便，联调、定位问题效率差

14. 1.5 远程办公下的挑战 1. 访问不方便挑战 2. 测试环境中业务信息保密性 3. 本地启动代理服务 4. 定位问题不方便 = 抓包、分享不方便 5. 多人协作修改规则不方便 = 配置不共享

15. 目录 2. 开发测试协作如何提效

16. 02 开发测试协作如何提效分享提效的一些经验

17. 2. 如何应对远程办公下的挑战

18. 2. 腾讯开发联调体验增强平台一个基于【 Whistle 】代理集成多种功能的免代理平台

19. 2.1 免代理访问 n 去掉复杂前置操作 => 直接通过代理域名访问

20. 2.2 鉴权机制 n 完善的鉴权机制（安全团队一起Review）三种模式 1. OA机制：内部账号登录 2. 白名单机制：根据登录态强校验 3. Token机制：临时访问，有效期

21. 2.3 云配置 n 配置云端化，配置共享

22. 2.4 云抓包 n 接口同步成本大 => 实时抓包、在线分享抓包、通过链接直接访问抓包

23. 2.5 历史抓包 n 无法快速定位问题 => 历史抓包

24. 2.6 用户体验 n 切换环境不方便 => 页面上轻轻一点即可切换 n 多端支持 & 插件生态

25. 目录 3. TDE的现状和未来规划

26. 03 TDE的现状和未来规划谁在使用TDE & 未来走向何方

27. 3. 谁在使用TDE · 已覆盖公司6大BG & TME · 接入业务260+ · 累计使用人数4800+ · 日PV 3000W+

28. 3. 未来展望 · 更深层次的生态结合 • 打通公司内部mock方案 · 个人测试环境治理方案 · 开源方向的继续前进 • 代理服务Nohost已开源 • TDE最快明年对外开源

29. 目录 4. TDE的实现原理

30. 个人介绍吴文斌：腾讯前端高级工程师，IMWeb 团队成员，主要负责团队的 Node 服务框架和效率工具的开发维护工作，TDE 架构设计者，开源工具 Whistle、 Nohost 作者。

31. 04 TDE的实现原理 TDE 基于 Whistle 实现的分布式 HTTP 代理

32. TDE 发展历程本地 HTTP 代理 Whistle 多进程 HTTP 代理 Nohost 问题：问题： 1. 本地 IP 经常变，导致联调 1. 单机部署，性能有限或产品体验需要经常更换代理配置 2. 单环境，不支持多个需求同时使用 2. 其它团队或业务需要独立部署分布式 HTTP 代理 TDE 其它团队或业务只需申请接入

33. 4.1 实现 HTTP 代理（Whistle） 1. 什么是 HTTP 代理 2. 实现简单 HTTP 代理 3. Whistle 简介 4. Whistle 架构及实现原理

34. 4.1 什么是 HTTP 代理代理是客户端到服务端请求的中转服务 HTTP Server，即 HTTP 代理

35. 4.1 实现简单 HTTP 代理启动 HTTP Server 代理转发普通 HTTP 请求隧道代理：代理转发 HTTPS、HTTP/2、 WebSocket、TCP 等请求

36. 4.1 完整 HTTP 代理功能除了转发请求功能，至少应该还有： ü 查看实时抓包 ü 解析 HTTPS 请求 ü 修改请求响应内容 ü 扩展功能

37. 4.1 Whistle 简介 Whistle 是基于 Node 实现的跨平台 Web 抓包调试（HTTP ）代理 1. 实时抓包支持 HTTP、HTTPS、HTTP2、WebSocket、 TCP 等常见 Web 请求 2. 修改请求响应通过类似系统 host 的配置方式 3. 扩展功能通过 Node 编写插件扩展作为独立 npm 包使用

38. 4.1 Whistle 架构

39. 4.1 Whistle 架构 – 主要模块 ⑤ 插件管理 ③ 处理 HTTP 请求 ① 请求接入 ④ 规则管理 ② 隧道代理（转 HTTP 请求）

40. 4.1 Whistle 架构 – 请求接入 Whistle 支持四种请求接入方式：

41. 4.1 Whistle 架构 – 隧道代理转 HTTP 请求包含 whistle.xxx 的规则加载证书的三个途径： 1. 通过匹配的插件返回 2. 通过启动时加载的自定义证书 3. Whistle 自动生成的证书

42. 4.1 Whistle 架构 – 处理 HTTP 请求 1. 请求阶段： ① 匹配全局规则 ② 如果规则里类似 whistle.xxx 的规则，执行插件钩子，获取插件规则并跟匹配的全局规则合并 ③ 执行规则、记录状态并请求到指定服务 2. 响应阶段： ① 执行匹配插件的钩子，获取插件规则并跟匹配的全局规则合并 ② 执行规则、记录状态并请求返回客户端

43. 4.1 Whistle 架构 – 规则管理解析规则： 1. 全局规则（公共规则） ① 界面 Rules 配置 ② 插件根目录 rules.txt 配置文件 ③ 远程规则 @url (支持 HTTP & HTTPS & file) @whistle.xxx/path/to 2. 插件规则（私有规则） ① 插件 reqRulesServer 等 hook 动态返回 ② 插件根目录 _rules.txt 等文件配置的规则匹配规则：

44. 4.1 Whistle 架构 – 插件管理插件功能及实现原理： 1. 完备性：请求鉴权、生成证书、获取抓包、设置规则、请求处理等所有 Whistle 功能点都可扩展 2. 稳定性：每个插件独立进程，插件与 Whistle 之间通过 HTTP 协议交互，插件内部异常不影响其它功能 3. 易用性：方便用户开发及使用 ① 开发：结构简单(npm 包) + 脚手架 lack ② 安装 npm 包即可，用法跟内置协议一样，且可内置界面

45. 4.2 实现多进程 HTTP 代理（Nohost） 1. Nohost 简介 2. Nohost 架构及实现原理

46. 4.2 Nohost 简介

47. 4.2 Nohost 架构多进程问题转成单进程 Whistle 问题

48. 4.2 Nohost 架构 – 实现原理

49. 4.3 实现分布式 HTTP 代理（TDE） 1. TDE 基本概念回顾 2. TDE 架构及实现原理

50. 4.3 TDE 基本概念回顾 1. 空间 / 分组 / 环境 2. 每个环境可以配置任意 Whistle 规则 3. 查看每个环境的实时抓包数据

51. 4.3 TDE 架构

52. 4.3 TDE 架构 – 服务列表 ① 管理后台 ④ 插件服务 ② 网关集群 ③ 代理集群

53. 4.3 TDE 架构 – 管理后台 1. 鉴权功能 2. 增删查改空间/分组/环境 3. 查看实时抓包和历史抓包 4. 提供路由服务（ RR 简单轮询） 5. 存储一些配置数据和抓包数据

54. 4.3 TDE 架构 – 网关集群 1. Docker 里启动 Whistle cluster： w2 run –M prod --cluster 2. Whistle headless：无头 Whistle 3. whistle.tde 插件：业务逻辑 4. @nohost/router：路由功能 5. 替换域名：外网直接访问需要替换 CDN 等第三方域名，不然无法拦截这些请求

55. 4.3 TDE 架构 – 代理集群 Docker 里启动 Nohost: nohost run –M prod

56. 4.3 TDE 架构 – 插件服务 1. TDE 插件功能： ① 自定义鉴权 ② 动态设置规则 ③ 获取抓包数据 2. 实现原理： 1. 多机部署，无法直接使用 Whistle 插件 2. 利用 Nohost 内置的 whistle.script 插件

57. 4.4 涉及的项目 1. Whistle：https://github.com/avwo/whistle 2. 官方插件： https://github.com/whistle-plugins 3. Nohost： https://github.com/Tencent/nohost 4. Router： https://github.com/nohosts/router 5. whistle.script：https://github.com/whistle-plugins/whistle.script 6. whistle.tde 插件 & 管理后台：预计明年开源

58. 感谢倾听 IMWeb 团队大会官网