1. 为 Web 研发带来 蜕变的开放代理服务 ⻜猪旅行/弘树@2021.08

2. 目录 C O N T E N T S 01 - 1.0 时代的 Web 研发体验 02 - 代理服务带来的蜕变 03 - 面向更丰富的研发场景 04 - 未来展望计划

3. 旅 行 就 上 飞 猪 1 1.0 时代的 Web 研发体验 2013 年无线 All In 的浪潮席卷而来，从前端框 架、工程配套到部署运维都还是刀耕火种的年 代，但跨端带来的对研发流程的核心的几个挑 战已经显现并一直伴随至今。

4. 飞猪前端工程化的刀耕火种年代 构建可配置 TMS dist TMS Gitlab:proj/build/ TMS Combined HTML 构建 & 发布 Gitlab Assets Combined JS .css Gitlab:proj/src/ HTML Pages/Mods/Widgets JavaScript Files   less/scss src 本地静态服务 Live Edit 实时编译 接口 Mock 请求监控 自动代理 TPS Grunt-comboHTML Build onLine) Juicer Mock 一键发布 Assets CDN CDN AWPP 一键构建 ICON IMG IMGs 本地开发/调试 MPI KISSY Gallery 项目 & 组件脚手架 面向模块化 & 组件化 KISSY-Seed.js(v1.5.0) / KISSY-mini.js(v .x) 基础库 Grunt-flexcombo Assets Proxy Combo Proxy HTML Proxy MPI 组件库 RPIVPI BootStrap AWP

5. H5 开发调试核心会遇到的几个问题 域名映射 测试环境域名如何在开发调试阶段模拟？账号登录态的同步、后端接口调用的校 验和环境映射都与域名相关。此外 HTTPS 也会是一个问题。 接口模拟 前后端并行开发，接口 mock 是非常常见的需求，不论是服务端接口尚未部署需 要依赖 mock 数据套页面，还是需要构造不同状态的响应处理 UI 逻辑。 端内预览 “一次开发，处处预览”，特别是有些场景依赖桥调用必须在端内开发，即改即 预览的体验就非常重要。

6. H5 开发调试核心会遇到的几个问题

7. 代理服务解耦开源 h5 ➤ sonic --http Proxy for Sonic Anyproxy rules initialize finished, have fun >> Proxy server started at http://10.62.64.141:808 GUI interface started at : http://10.62.64.141:8002 Http proxy started at 10.62.64.141:808 [internal https]certificate created for 10.62.64.14 > -------------- 服务配置 ------------- 本地 IP 地址 => 10.62.64.14 本地代理服务 => 10.62.64.141:808 静态资源服务 => http://10.62.64.141:808 请求代理监控 => http://localhost:800 -------------- 服务配置 ------------- .. https://github.com/dickeylth/sonic

8. H5 端内调试依然很痛 绑代理 IP 动态变化，iOS / Android 系统设置代 理的体验都做得很差 装证书 iOS 虽然麻烦至少能装，android 对于 自签名证书甚至需要代码层面侵入 难调试 不像桌面端有 Chrome Dev Tools 这样 方便的调试工具

9. 旅 行 就 上 飞 猪 2 代理服务 带来的 蜕变 随着小程序带来的云端一体化研发模式的兴 起，我们开始重新反思结合云端能力能否为开 发调试带来不一样的体验。

10. 重新思考本地开发调试服务 数据接口服务 192.168.50.116:8080 代理服务 CDN 静态资源 本地静态资源服务 能否把虚拟的开发调试域名变成真实可访问的域名？

11. 本地服务远程化？ 数据接口服务 service-worker xhook ⻚面 HTML 其他静态资源文件 CDN 静态资源 https://edith.m.taobao.com/rsync/... 代理服务 云端缓存(redis) websocket 本地静态资源服务 本地守护程序

12. 运行效果

13. 遇到的问题与持续优化 WebSocket Socket 通道不适合大批量的数据 传输，可考虑借助 HTTP 接口 快速重定向 自动识别是本机开发模式，静态 资源重定向到本地静态服务 编解码开销 静态资源从本地拉取上传 redis 全走 buffer，避免 gzip 编解码开销 本地直传 从上传服务器接口写入内网 redis 改为从本 地直接上传阿里云 redis，减少中间环节 上传检查 基于资源 hash 作为 key，仅变化时上传更 新，也更好支持项目间复用 自动注入 eruda、xconsole 都可以自动注入到 HTML 里，方便开发者端内调试

14. Edith-dev-daemon 开放 SDK const edithDevDaemon = require('@ali/edith-dev-daemon'); // 本地静态服务端口号 (async () => { // 按需使用，如果有自己生成管理的证书可以不用这个 const { key, cert } = await edithDevDaemon.checkCert(); // 服务启动入口 const { pathPrefix } = await edithDevDaemon.launch(8091, { // api 接口 mock 的 url 匹配正则表达式字符串 apiMockReg: '.*', // api 接口 mock 函数 apiMockFn: () => { // reqUrl 是请求的完整路径, res 是响应，里面的结构是 { headers, body }，requestBody 是请求体 return (reqUrl, res, requestBody) => res.body; }, // html mock 函数，可以对返回的 HTML 源码做修改，方便注入一些代码 htmlMockFn: () => { // reqPath 是请求路径，htmlSource 是当前要响应的 HTML 源码 return (reqPath: string, htmlSource: string) => htmlSource, }, // 是否需要自动注入 [eruda](https://web.npm.alibaba-inc.com/ package/eruda)，默认为 true needErudaInject: true, });

15. 旅 行 就 上 飞 猪 3 面向 更丰富的 研发场景 有了代理服务的加持，很多之前找不到优雅的 解决办法的问题有了更简洁的方案，在更多的 场景里发挥出价值。

16. 一键预发切换本地源码调试 预发环境小工具 快速切换本地联调 项目提测后 QA 在测试环境验证遇到有 bug 反馈时，可以从 QA 同学手机上通过小 工具一键把页面从测试环境加载切换到从本地项目加载，自动拼接上 URL 参数，访 问到远程代理服务，方便快速调试页面问题。

17. 预发布环境多分支切换 预发环境分支切换小工具 支持多人协作多项目快速切换 多人并行开发多个分支是研发中常见的情况，在之前因预发环境不支持多分支（页 面是覆盖式发布 URL 唯一，JS/CSS 资源文件是非覆盖式发布 URL 带版本号），导 致 QA 在测试时往往会遇到并行中的项目覆盖了预发环境，导致沟通协调成本非常 高。基于代理服务结合前端注入切分支小工具，可以支持为不同分支提供对应分支 页面的加载服务，让 QA 一键完成多分支切换，多个分支可以并行提测。

18. 旅 行 就 上 飞 猪 4 未来的 展望 与计划 面向未来的 web 研发，开放代理服务还能找 到哪些更大的发挥空间，让我们一起想象吧。

19. 未来展望规划 01 02 03 HMR 代理支持 Web IDE 结合 与更多工具链的整合 由于 HMR 依赖于 websocket，目前的代理 类似 CodeSandbox，结合在线的 Web IDE 除了 webpack，面向未来尝试探索与 Vite 仅支持 HTTP，导致 HMR 的请求在客户端 可 以让 代理服务 提供实时 的预览调试体 / Snowpack 的结合，探索 bundleless 更 上仍然依赖信任证书。 验。 多的可能性。

20. THANKS 感谢聆听

21. 欢迎加入我们！ 业务 与技术挑战 希望 你是 阿里巴巴飞猪业务招聘前端，一起玩转技术，给用户旅游出 我们需要这样的你 行带来全新体验。 1. 热爱技术，工作认真，善于沟通 2. 有较强的学习能力和责任心 我们这边除了传统前端开发，还有serverless，node，端上 3. 熟练掌握至少一门前端编程语言 基于 JSCore 和 V8 的中间层框架，小程序一码多端， 4. 良好的逻辑思维、分析能力、团队合作精神 hybrid，技术多样，业务复杂度高，探索空间大，期待与你 加分项 并肩作战，共成长。 • 一份用心的简历 • 有坚持写技术博客的习惯 我们的业务涵盖(但不仅限)机票、酒店、火车票/汽车票、度 • 熟练掌握操作系统与数据结构知识 假+签证+门票+用车+游轮等业务。飞猪技术团队通过打造优 • 有小而美的前端作品 质应用和服务，为消费者提供贴心、全方位的旅行服务。 • 在 GitHub 上有细心维护的项目，除了优美的 Demo 还有 详细的介绍文档 • 对自己的程序代码有追求，熟悉算法、数据结构等计算机 科学基础知识