阿里云「飞天发布时刻」2024来啦!新产品、新特性、新能力、新方案,等你来探~ 了解详情
写点什么

NGW,前端新技术赛场:Serverless SSR 技术内幕

  • 2019-11-15
  • 本文字数:3710 字

    阅读完需:约 12 分钟

NGW,前端新技术赛场:Serverless SSR 技术内幕

最近 Serverless 又火了,有不少业务上云实装了 Serverless 云函数,取得了不错的落地效果,业界也在不断探索 Serverless 更多的落地场景。那么对于前端来说,Serverless 意味着什么?对于 Node 服务来说,哪里可以落地 Serverless?答案是:Serverless 同构直出渲染。

一、前言

Serverless + SSR = ?

Serverless 云函数: 云计算发展过程中出现的一种计算资源的抽象,它以云计算平台为基础,为开发者提供业务程序的运行环境,开发者无需关注底层资源分配、扩容部署,代码执行所必要的全部服务由平台提供。


SSR 服务端渲染: 指在服务端将 HTML 渲染到前端,早期常用 php jsp 技术来在服务端生成 HTML,近年来 JS 同构化趋势演进下,逐步出现了在服务端上运行前端 JS 代码进行渲染的方案,如 React、Vue 等主流框架的同构渲染。


若能将 Serverless 技术落地到 SSR 场景,将会有如下优点:


  • 云服务资源理论上无限扩容,前端不必考虑业务量对 SSR 机器性能的影响。

  • 前端同学无需关注 SSR 机器的运维、申请、扩容,减少部署运维成本,提高开发效率。


目前腾讯 NOW 直播 IVWEB 团队正逐步将 SSR 业务迁移到腾讯云云函数平台上,精简部署运维成本。

二、Serverless 的演进

阿 J 是一个前端开发仔,某天产品跟他说页面白屏加载接口的时间太长了,体验差,这对于优秀的前端开发仔的他并不是难事,他有 99 种让页面加载变快的办法,因此他立马将利用团队直出框架,花了半天时间将页面接入了直出,接下来要将直出服务部署到现网,这时他犯难了:


  1. 部署直出服务需要申请机器,申请多少台,申请几核的?

  2. 这个业务量怎么样,有没有高并发场景,机器有没有扩容机制?

  3. Nginx 配置怎么改才能接入直出,直出失败的话又要怎么接入兜底的静态页面?


一头雾水之时,他看见腾讯云的同事 maxlong 关于 Serverless 架构演进的 PPT….

从 IaaS 到 FaaS

在介绍 SCF 云函数之前,我们先来 diff 一下传统 IaaS 业务架构和云函数 FaaS 业务架构:



基于虚拟机的业务架构 (IaaS)


而云函数架构是这样的:



基于云函数的业务架构 (FaaS)


阿 J 对比了两者架构之后发现,在基于云函数的业务架构下,开发者无需再关注业务基础层的相关配置,可以集中精力处理业务逻辑的开发,基础层由平台负责维护迭代,只要将我们的直出服务部署上云就可以解决部署直出业务中的运维痛点了。

FaaS + BaaS 下的 Serverless

FaaS 的出现使得服务上云变得容易起来,但是 FaaS 并没有解决「公共基础服务」的问题,而所谓公共基础服务,就是形如对象存储、KV 存储、消息推送这样的基础服务,这个问题最终落到了云服务提供商这里,因此市面上的云服务无一例外的都提供了上面的「公共基础服务」,这样的服务模式叫做 BaaS(Backend as a Service)。


Serverless 直译过来叫无服务器,这里并不是说不需要服务器,而是说开发者不需要关注服务器,这部分由平台维护提供,开发者仅需关注业务逻辑的开发即可。



Serverless 架构下的 App


在这样的一种架构下,开发者无须关注支撑应用服务运行的底层资源,以「函数」的形式承载业务逻辑,以「BaaS 服务」的形式支撑公共服务。



公有云基础设施上的 Serverless 演进


考虑到直出服务的特性,阿 J 认为直出业务十分适合上 Serverless,因此他立马开始了直出上云的预研,做 Serveless SSR 服务,免去运维部署烦恼,减少直出接入成本!

三、SCF 云函数开发

阿 J 认真研究了腾讯云的云函数(Serverless Cloud Function,SCF)发现云函数它可以将我们的业务拆成更细的粒度「函数」,而函数的执行环境开发者不需要关注,由平台负责,以下是阿 J 对云函数执行的理解。

云函数执行过程

云平台在执行这些「云函数」的过程其实就是在对外提供服务,通常情况下,Serverless 函数会用于「响应 HTTP 请求」,即通过 HTTP 访问事件来触发云函数的执行,如下图所示:



云函数用户请求链路


而「函数的执行」不外乎:入参、上下文、返回值、副作用四个要素,如图所示:



函数执行的四个要素


四要素:


  • 「入参」:云函数的入参即 HTTP 请求中的请求头、请求体。

  • 「上下文」:包含此次函数请求的 id、函数执行的环境变量等等。

  • 「副作用」:云函数执行可能调用外部服务,如数据库、对象存储、数据监控。

  • 「返回值」:即 HTTP 响应如 {retcode:0,msg:"ok"}


阿 J 还了解到根据一定配置部署完云函数之后,云平台会给你一个 URL,通过访问这个 URL 就可以「触发」对应云函数的执行,得到结果。

四、NGW Serverless 同构直出方案

正当阿 J 着手进行 Serverless 直出开发的时候,他猛然发现,Serverless 环境下跟原有的直出环境有较大出入,原有的直出环境是这样的:


  1. 原方案直出是使用 TSW 执行 Koa App 的方式进行直出的,这意味着原方案需要监听端口而不是作为函数来运行,这个要怎么处理?

  2. 老业务能不能做到无缝迁移到云函数?能不能做到新直出方案兼容老直出方案?

  3. 云函数怎么做到工程化打包发布,接入到团队现有的 CI 流程中?

  4. 原方案可以做本地调试,而云函数直出怎么做本地调试?

  5. 云函数发布后,会得到一个 URL,那么这个 URL 要怎么接入我们的业务域名下?

工程化打包

除去前端 webpack 打包之外,对于 Serverless 云函数平台,我们还得在原来的打包产物基础上再做一些操作,其核心在于「打包为 zip 上传到云函数」,如下图所示:



云函数打包图示


从图示中可以看到,打包部署的流程由「CLI 工具」承担,原因是为了提供命令式的部署原语,方便 CI 接入。

Serverless 下的同构环境

阿 J 考虑到原先业务的直出方案采用 TSW 来做,但是在 Serverless 下,我们不能把 TSW 搬进云函数里执行,而是抽取了其中我们需要的组件出来,如 ajax、monitor、logger 等常用组件,因为:


  • 方便老业务无缝迁移到云函数直出,解决直出业务的运维痛点。

  • TSW 很大,压缩后近 20 MB,解压出来大很多,不利于云函数的性能。


除此之外,还要自己去实现 window.REQUEST plug 类似这样的 TSW 全局注入的对象,因为旧有方案也依赖这些全局对象。

「流式」和「块式」

原来的方案需要 Koa 监听本地端口才能提供服务,而云函数的出入参是块式的,Koa 的出入参是流式的,因此这里需要处理一下云函数的入参。阿 J 的做法是根据云函数入参来动态构造 http 的 IncomingMessage 和 ServerResponse 的实例,然后透传给 app.callback() 进行直出渲染,最后从 ServerResponse 里取得渲染结果构造为云函数返回值返回。

NGW 作网关转发

阿 J 考虑到业务的可用性以及之前链路接入的痛苦,决定接入 NGW(Node Gateway):



NGW 下的 Serverless 直出链路


通过 NGW 可以做到:


  1. 实现兜底逻辑:云函数可能会 crash,这时候走静态页面接入机。

  2. 灰度逻辑:直出上现网的过程中可以通过 NGW 的配置进行部分灰度测试。

  3. 链路日志收归:长期以来,前端不好查具体的链路信息,现在有了 NGW 一切皆有可能。

云函数本地调试

云函数的无状态模型使得其非常易于进行本地调试,我们只需要在本地构造函数的入参、上下文即可直接进行直出调试了,阿 J 在实际实现中是通过本地起一个 Koa 服务监听端口,利用这个端口的请求来构造入参、上下文,最后传入函数执行结果,返回到前端显示。

同构直出过程

在最后,阿 J 完成了 Serverless 直出方案,其直出过程如下图所示:



新方案下的同构直出三步


  • 「Init」: 初始化云函数环境、接受并处理云函数的入参。

  • 「Koa」: React 同构业务逻辑以 Koa App 的形式体现。

  • 「Clear」:清理云函数环境、处理 Koa Response 返回直出结果。


特别需要提出的一点是,其中的 Koa 其实就是原方案的打包结果,新方案在此基础上作了一些环境迁移、重写,使其可以在云函数环境下执行渲染。

云函数的性能瓶颈和优化

阿 J 在完成了新直出方案之后马上进行了压测,发现随着压测压力的增加,收包率会出现断崖式下跌,而且还发现部分函数执行耗费时间非常长,联系了云函数的同事看了下发现是「冷启动问题」,那什么是冷启动?


从云函数的架构中可以看到,云函数触发后并不是马上执行,它需要一个环境初始化的过程,这种启动叫做冷启动;还有种情况是,这次请求的函数执行之后马上接到下一次请求,这时候就不用重新初始化云函数环境,而是直接启动,这种称谓热启动。



压测云函数执行时间分布图



收包率优化前后(右边为优化后)


冷启动问题在压力低的情况下不明显,但是在高并发的情况下就会额外影响回包了,这里 SCF 的同事进行了优化:提高最小实例数,减少冷启动,最小实例越多就越能扛住瞬时并发,优化效果如上图右边所示。


此外我们还发现了内存的问题,这里联系了 SCF 的同事进行了 Node 内存模型的相关优化,优化后,已基本不存在 4xx 的问题。


(业务中的内存使用也可以进行优化,要避免 JS 内存泄漏)



内存超限导致 4xx 问题,压测压力越大,这种错误越多。



内存模型优化后的表现


到这一步,阿 J 终于初步完成了 Serverless 直出方案设计开发,并开始逐步在业务中使用推广。

现状和下一步计划


目前 NGW + Serverless SSR 已经应用到 NOW 直播、手 Q 附近、浏览器直播和手 Q 群送礼等多个项目中,实际业务开发中,Node 业务的部署和运维工作量降低了 80% 以上。


本文转载自微信公众号云加社区(ID:QcloudCommunity),作者:IVWEB-ecznlai


原文链接:


https://mp.weixin.qq.com/s?__biz=MzI2NDU4OTExOQ==&mid=2247489610&idx=1&sn=b7f8c71744fbf2844fe494841362e4d0


2019-11-15 17:252716

评论 2 条评论

发布
用户头像
后端视角中,所谓的冷启动就是在拉pod。faas 不如叫k8s对外使用化。
2019-11-16 14:33
回复
不一定是pod,容器启动太慢太重了,很难快速启停
2019-11-19 10:56
回复
没有更多了
发现更多内容

第三空间娱乐体验重构:AITO 问界 M5雕刻的七宝楼台

脑极体

Flutter 开发一个常用的登录界面

岛上码农

ios 移动端开发 3月月更 flutter开发 安卓开发

全球央行积极推进CBDC 俄罗斯制裁或成催化剂?

CECBC

架构实战营模块九-毕业设计-电商秒杀系统

Jude

架构实战营

在线JSON转HTML工具

入门小站

工具

在线CSS3压缩美化格式化

入门小站

工具

《软件开发的201个原则》思考:3.开发效率和质量密不可分

非晓为骁

程序员 个人成长 软件工程 软件开发原则 开发质量

"三高"Mysql - Mysql的基础结构了解

懒时小窝

MySQL 数据库

北京大学董豪老师解密人工智能开发工具的过去与未来

OpenI启智社区

人工智能 开发工具 启智社区 北京大学

调查:区块链游戏玩家将玩NFT游戏视为一份潜在的全职工作

CECBC

Top Trending Libraries of 2021,PaddleOCR再开源8大前沿顶会论文模型!

百度大脑

#yyds内容盘点# 一文带你搞懂Python中变量与常量,Python开发框架

程序媛可鸥

Python 程序员 面试

毕业总结

Geek_93ffb0

「架构实战营」

深度关注 | 元宇宙如何改写人类社会生活

CECBC

Redis集群架构剖析(2):槽位

非晓为骁

redis集群 slots 分布式,

重新开始学习测试驱动开发

escray

学习笔记 测试驱动开发

实用机器学习笔记二十九:NLP 中的微调

打工人!

机器学习 学习笔记 nlp 机器学习算法 3月月更

开学季 | 飞桨AI Studio课程学习,小白也可以成为一名优秀的算法工程师

百度大脑

Redis Pipeline原来是这么用的

Java工程师

数据库 程序员 代码 pipeline redis'

Linux之alias命令

入门小站

Linux

Java 中的静态字段和静态方法

踏雪痕

Java 3月程序媛福利 3月月更

人工智能1秒检测一辆车,TA助力广本新车质量排名第一

百度大脑

区块链正在塑造医疗保健生态系统!

CECBC

软件入门之《编程指南》-学习路径和经验随谈

hongfei

个人成长 编程好习惯 经验总结

Axios 教程:Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板

蒋川

Vue Node axios

CorelDRAW2022下载及新增功能讲解

茶色酒

cdr2022

又一重量级国赛来啦,保研可加分 | 中国软件杯飞桨遥感赛道正式启动

百度大脑

06 - vulhub - Apache HTTPD 多后缀解析漏洞,2021年Python大厂面试分享

程序媛可鸥

Python 程序员 面试

golang里的一些奇奇怪怪的东西

不登山的小鲁

golang Go 语言

重新刷新你对Redis集群的理解

Java工程师

数据库 复制 数据共享 集群 redis'

10个Python set 常用操作函数!,oppoPython面试题

程序媛可鸥

Python 程序员 面试

NGW,前端新技术赛场:Serverless SSR 技术内幕_大前端_云加社区_InfoQ精选文章