工程&研发 - 5 - 梅霖 - unio - 蚂蚁新一代 WebApp 架构.pdf

1、unio-蚂蚁 WebApp 架构刘松吟（梅霖）蚂蚁集团-付宝体验技术部-前端技术专家录1.蚂蚁前端托管的演进和 unio 的诞2.unio 的架构3.unio 在蚂蚁的实践案例4.unio 的开放和未来1.蚂蚁前端托管的演进和 unio 的诞托管静态资源 付宝官，现存的活化static serverCDNbiz serveross前端统基座render serverCDNosscontroller server蚂蚁集团官JSON 配置蚂蚁森林dev platform应 域名 路径映射中后台统基座render serverCDNosspc server支付宝商家平台auth micro fro

2、ntends现状持H5、配置、在线 npm、中后台等标准 web 场景研发场景服务蚂蚁全集团所有前端研发户基础设施，从 2016 年稳定维护迭代今架构定位现有架构的问题源站离户过远性能优化定制成本Edge Routineref.https:/ serverossserverless functionossEdge KVcontroller serverdev platformER 和 FC 的定位ER 和 FC 消费的产物定义开箱即平滑迁移，上层感知独输出兼容办公2.unio 的架构unio 运时容器层浏览器流量层1.请求 html3.请求 js2.渲染 html4.执行 js托管层1.1 回

3、源回源1.2 SSR计算层流量层浏览器流量层1.请求 html3.请求 js2.渲染 html4.执行 js托管层1.1 回源回源计算层1.2 SSR流量层-路由模型GET/p/s/i HTTP/1.1Host:Accept:text/htmlAccept-Encoding:gzip,deflate,brAccept-Language:zh-CNCache-Control:no-cacheHTTP/1.1 200 OKServer:TengineContent-Type:text/html;charset=utf-8cache-control:max-age=0,s-maxage=120123

4、4GET/s/route_across_proxy/HTTP/1.1Host:render-intl-Accept:text/htmlAccept-Encoding:gzip,deflate,brAccept-Language:zh-CNx-user-group:ant,percent_1request rewriteHTTP/1.1 200 OKServer:TengineContent-Type:text/html;charset=utf-8cache-control:no-store4567response rewriteHTTP/1.1 301 Moved PermanentlySer

5、ver:Tenginelocation:https:/redirect流量层-路由模型重定向端外灰度SEO.request rewriteresponse rewriteredirect.流量层拉取应路由requestrequest rewrites名单灰度办公灰度百分灰度灰度分组SEO sitemapSEO 分组应路由配置就近回源海外加速.responseredirectsfetch 回源response rewritesresponse托管层浏览器流量层1.请求 html3.请求 js2.渲染 html4.执行 js托管层1.1 回源回源计算层1.2 SSR托管层-统基座路径映射域名映射r

6、equest共享域名获取应独占域名计算灰度资源类型responsejs/css/pnghtml/json渲染解析路径计算层浏览器流量层1.请求 html3.请求 js2.渲染 html4.执行 js托管层1.1 回源回源计算层1.2 SSR托管层-js containerfetch eventfetchRequestResponseunio-container.标准 Web API3.unio 在蚂蚁的实践案例SSR次访问、中低端机、弱的屏性能较差通的 SSR 案，复到多个业务中平滑迁移，不同策略切换 CSR/SS