马晓：Serverless SSR 在人人视频的落地探索
作者简介
人人视频之所以考虑 SSR 方案，首要是由于和百度的合作项目。
基于对搜索引擎爬虫的友好度考虑，也便是 SEO 优化，页面有必要尽量坚持是直出，方便蜘蛛爬取；其次，合作方要求用户 1.53 % 2 Q m ) F 秒内有必要能打开页面，所以技能侧有必要确保用户打开页面的首开时刻。另一k t ( i _ G B ! O方面，此次项目从立项到落地要求两周内上线，之前在客户端烘托方面，咱们经过埋点调查过用户数据，觉得或许在短时刻内既保证功能开发又能花大精力去磨这个优化或许不太 H U , B实际，所以直接敲定了 SSR 方案。
咱们公司目前技能团队分为大前端和大后端，公司将不同事务线分别独立运作。贯穿大前端8 4 { b C 1 2 Z x和大后端不同的开发同学进行跨部门或跨事务线协作，大前端负责偏用户侧移动端的产品体会，大后端侧重于服务稳定以及数据侧深耕。技能栈方面后端事务基于 Java 生态以及 Python 大法，大前端比较「五花八门」，移动侧基于原生 objec^ h w d . Et-c/swift，java/kotlin，Web 侧基于 Vue 全家桶，NodeM ; ; C Z生态，php，typescript 等等，以及跨平台技能 Flutter 的相关引进。前端同学借助后端常规事务接口，经过 nodew C 8 M h ] 4 进行组装过滤，或许独立开发一些事务类接口（常见的 BFF 玩法）。
由于团队项目主要是在 Vue 生态内折腾，所以首要想到了现E | s 5在咱们都在运用6 k P Q 6 * B C Z的Nuxt 结构。其次还有之前刷知乎了解到的 Egg 团队推出的 Egg Vue SSR方案， ~ &咱们大致比照了一下，觉得都值得测验。可是考虑到其时项目上线时刻急迫以及文档或许掩盖度问题，比方遇到问题能快速自主经过搜索查阅处理的或许性，咱们终究仍是先行在这个项目上选择了 Nuxt 结构。
另一方面，考虑t N p c i } L完开发问题后，布置和监控也是一个重点，起先咱们是以 pm2 方法去看护，另外在 CVM 层面打入D % Z F ( u b W @探针` } ! 1去监控 node 进程以及功能相关数据，这方面临开发是一种考验，对运维侧c L l + * # A . R也是一种担负，全体来说支付的心智本钱^ d =感觉仍是蛮高些，然后Y ! # s这时分想到了从上^ v . Y ?线之初就开端E ~ T D v ^运用的云函数 SCF，以! k *及去年在腾讯开发者大会上接触到的 Su j ^ ] 5 x | E 9erverless Framework，经过官方文档查到了腾讯云 Serverless 团队最近支持了 Nuxt，便马上咨询腾v $ S / & p b讯云 Serverless 团队相关细节，V 6 ; t : M决定将运维侧弹性伸缩事务保证这块能力交由更专业的团r q Z C u队去办理，解放这边的开发重心。
全体来说，这次项b H 1 z | V u Y目事务结构仍是蛮简单的，事务组件仍是运用 vue 建立开发，或许复用之前内部供给于移动端的 Web 组件库，依托于 Nuxt 结构完成 SS, @ = [ E { q @R 烘托，然后对不同组件进行了相关事务埋点，以及功能埋点，尤其是播映相关数据和 CDN 目标重点~ ? [ o做了监控和主备方案。后边二期项目会对播映器模块做一次定制开发，以k o } d W v ?及防盗链方案做一次优化，趁便会对用户特征，对转码和 CDN 布置做一P t ^ f P 0 N q次重新梳理。
任何新技能的落地不或许是一帆风顺，SSy [ Y U ~ 6 QR 也是如此。
首要便是对 SSR 功能咱们本W A F n ] 8身能做到啥程度的一种顾虑，所以咱们开端正式开发前先去拿某米的一个和咱们事务比较像的 SSR 页面做了比照S 2 o测验，由于平时也比较喜欢数码产品，常常围观这些网站，也调查这些科技大厂的技能栈迭代，所以找了个之前留意过的一个 SSR 项目页面，一起考虑到或许同样是 Nuxt，俺们第一次写出– # 来的如果没那味，功能或许不如大厂老练的经过好几轮优化的 SSR 页面项目，所以咱们就拿 Nuxt 开端对着对方事务裸写，然后发布到线4 W / 8 # 6 ( E ~上，然后真实比照功能，找到差异再去分析对& H h X , k方的优化策略，直到和对方页面功能差不多的时分，咱9 y r M j _们开端上手真实写事务，也算是站在巨人的膀子上前行吧。
后边乃至团队同学在项目上线后，自己经过压测和比照调查页面线上功能，最后 LRU 兜底了一层服务端页面，页面 QPS 大涨7 c x G z 5 m 20 倍，反向逾越了一下长辈，可见后边着重发力一下 serverless 层，或许借助云本身的生态，这块还有进一步大的提升空间。
其次遇到的最大的问题便是各个手机厂商的浏览器对 video 的完成愈加五花八门，也有不少厂商直接 hook 替换为原生播映器x A z v的，3 $ 1 /这边后边花了大量时刻做适配；1 6 j q & ~ Q K以及各家对 CDN 文件的缓存完成不一致，咱们接口用了一层u ] F A X / 0 cdn 去落地，最后实测发现有些厂商的浏览器缓存乃至会写入 SD 存储里，即$ q 6 V便卸载重装浏X Y览器缓存仍然存在，对这种k t p V g = 5状况处理的也比较繁琐，最后严格控制了每个文件的 CDN 缓存时刻。
另一个点是发版测验或许是灰度方面，起先运用腾讯云 seri 2 w L kverless 的时分，咱们是新建两` + :个& c 6 c / g y S服务，一个用于测验，一个是正式出产环境，然后经过 AY P 4PI 网关绑定，能用是能用，便是感觉不太方便。在开发到后期的时分，腾讯云团队奉告咱们，他们灰度流量的方案上线了，经过控制流量比来完成新老版逐渐切换，方便及时感知问V w } s e b T题，乃至蓝绿测验那种方法来帮咱们去优化掉这方面的运用体会，点个赞 。
SSR 不仅对 SEO 和功能有帮助，在团队内部也有不错的反应。
首要，让前端同学更乐意，也更安心的去把那些首开不是很满足的事务重构，另一方面前端同学更乐意一并去把接口相关事务同构掉，开发体会愈加一体化，极大的简化了运维那儿工作，节省了开发本钱，提高了协? z p 0 G & 4 B同效率。
如果读Y C c { | [ R者C 1 J = V的团队还没有做 SSR，期望咱们能够评价一下本身的事务特色，对首屏和C @ 8 p n + [ SEO 有刚需的，或许想再进一步优化用户体会的同学B X 1 w & b i o，能够尽早准备起来测验一下，Serverless 下的 SSR 方案: 0 u s ) & [仍是挺快捷的，全体开发体j K %会上完成度还挺高，没有遇到过很大的坑，SSR 借助 Serverless 这种方法，相信在今年会越来越流行。
Serverless Framework 30 天试用方案
咱们诚邀您来体会最快捷的 Serverless 开发和! . p m V ; 7 u !布置方法。在试用期内，相关联的产品及y u M W B f服务均供给免费资源和专业的技能支持，帮助您的事务快速、快捷地完成 Serverless！
概况可查阅：Serverless Framework 试用方案
One More Thing
3 秒你能做什么？喝一口水，看一封邮件，仍是 —— 布置一个完整的 Serverless 使C M 1 – 4用？
复制链接至 PC 浏览器访问：serverless.cloud.tencent.com/deploy/expr…
3 秒极速布置，当即体会史+ * 8 ) J上最快的 Serverless HTTP 实战开发！
传送6 O ^ 6 J门：
- GitHub: github.com/se) | 8rverless
- 官网：serverless.com
欢迎访问：Serverlest + P z b {s 中文网，您能够在 最佳实践 里体会更多关于 Serverless 使用的开发！
推荐阅读P ; q 8 * / L U：《Serverless 架E } l [ L构X R L w C 0 ? |：从原理、设计到项目实战》
