Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案

  • 时间:
  • 浏览:1

从后面 的概览还还可否想看 ,机会会存在从函数到 https://www.example.com/ 的网络请求,全都最小延迟为 1106ms,99% 的请求还还可否在 2011ms 完成,90% 的请求还还可否在 1347ms 完成,75% 的请求还还可否在 1201ms 完成,30% 的请求还还可否在 1156ms 完成。亲戚亲戚我们我们是每分钟按照 20% 的并发递增,当并发增加时,函数计算会遇到冷启动,冷启动最大时间为 32261ms(还还可否使用预热、预留等措施还还可否缓解或详细免除冷启动的影响)。

通常会将 Rendertron 部署为一一个多多独立的 HTTP 服务,之后为 Web 应用框架配置 Google 官方提供的后面 件机会在反向代理上打上去相应路由规则,使得还还可否在检测到搜索引擎爬虫的 UA 时,还还可否将请求代理给 Rendertron 服务。

需要修改原项目中的代码,亲戚亲戚我们我们还还可否直接通过 fun local start renderton.mofangdegisn.cn 在本地将函数启动,之后通过浏览器访问。

后面 箭头所指的位置表示并发一一个多劲增加,函数自动扩容之后遇到这个冷启动,当扩容完毕,后续的请求就非常平稳了。

比如,亲戚亲戚我们我们下面的模板声明了一一个多多名为 Rendertron 的服务以及名为 rendertron 的函数。

传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React、Vue、Angular 为代表的前端框架的流行,太少的 Web App 使用的是客户端渲染。

使用 Rendertron + 函数计算还还可否快速搭建一一个多多还还可否直接用于生产的 Headless Chrome 渲染处理方案,以便于帮助网站更好的进行 SEO。

使用客户端渲染有着诸多优势,比如节省后端资源、局部刷新、前后端分离等等,但也带来了这个挑战,比如本文要处理的 SEO 问题图片。

这里简单介绍下步骤:只要另一方 Aliyun 的 AccountId 为 12345,不还还可否就将另一方的域名(国内集群需要备案)CNAME 到 12345.cn-shanghai.fc.aliyuncs.com,之后将另一方的域名更新到 template.yml,执行 fun deploy 即可。更多详情还还可否参考这篇文档。

Google 官方提供了示例 https://render-tron.appspot.com/ ,还还可否直接体验效果。

Google 推出的 Rendertron 之后为了处理那我 场景的一款工具。通过使用 Rendertron,SPA 还还可否能被不支持执行 Javascript 的搜索引擎爬取渲染后的内容。其原理主之后通过使用 Headless Chrome 在内存中执行 Javascript,并在得到详细内容后,将内容返回给客户端。

template.yml 是 Fun 默认的描述文件,通过该描述文件描述的资源,还还可否通过 fun deploy 一键在部署到云端。

下面,亲戚亲戚我们我们介绍下函数计算怎么处理那先 问题图片的。

PS: 这里直接基于官方项目进行改造,而之后提供一一个多多示例模板,是为了演示怎么平滑迁移 rendertron 到函数计算,一齐,在官方版本更新后,也还还可否尽快更新到最新版本。

在未优化的场景下,亲戚亲戚我们我们的压测结果也达到了 44.91 的 TPS,这对于大每种网站是绝对还还可否满足需求的。

Rendertron 提供了一一个多多主要 API,分别是 Render 以及 Screenshot。其中 Render 用于渲染网站内容,Screenshot 用于将网站内容截图。在 SEO 场景下使用的是 Render 接口。

基于函数计算,亲戚亲戚我们我们的服务架构如下:

演示效果如下:

最后使用 fun deploy 一键部署即可。

亲戚亲戚我们我们需要测试的网址网站为:http://renderton.mofangdegisn.cn/render/https://www.example.com/

接下来在项目根目录创建一一个多多名为 bootstrap 的文件,这个文件告诉函数计算怎么启动 rendertron,文件内容如下:

对于服务端渲染的页面,服务端还还可否直接将内容通过 HTML 的形式返回,搜索引擎爬虫还还可否轻易的获取页面内容,而对于客户端渲染的应用,客户端需要执行服务器返回的 Javascript 还还可否得到正确的网页内容。目前,除 Google、Bing 支持 Javascript 外(也会有这个限制),这个的大每种搜索引擎之后支持 Javascript,也就无法获取正确的网页内容。

亲戚亲戚我们我们也提供了部署在函数计算上的示例:http://renderton.mofangdegisn.cn

当本地运行、调试确认不还还可否问题图片了,就还还可否考虑部署到线上了。在部署前,要先将 template.yml 中的域名替换为另一方的。

接着使用官方介绍的 npm run build 编译项目:

举例来说,当客户端请求亲戚亲戚我们我们的网站时,亲戚亲戚我们我们搜线根据请求头 User Agent 发现饱含了 Baiduspider/2.0 关键字,还还可否认定为当前的客户端是一一个多多百度爬虫,之后又在 UserAgent 中发现 Mobile 关键字,还还可否认定这个爬虫是在做移动端内容的抓取。通之后面 的判断,就还还可否将这个请求代理 Rendertron 服务的 /render/https://www.aliyun.com/?mobile 路由,让 Rendertron 帮助执行网页内的 Javascript,并将最终内容返回给搜索引擎爬虫。

测试配置如下:

函数是函数计算系统调度和代码执行的基本单位,亲戚亲戚我们我们的 rendertron 项目就还还可否跑在函数里,而服务是管理函数计算资源管理的单位,一一个多多服务还还可否饱含多个函数。

亲戚亲戚我们我们配置了 30 并发,测试 6 分钟,每分钟并发按照 20% 递增的规则进行压测。

将 Rendertron 部署到传统的 ECS 机会物理机上作为生产服务,并之后件容易的事。除了 Rendertron 本身需要这个安装配置外,还需要考虑当流量增加时怎么扩容,以及配置搭建反向代理或负载均衡等与之配套的服务。

测试概览如下:

对于初学者,还还可否直接将下面的模板倒进项目根目录下,之后命名为 template.yml。

直接使用 fun install -d 还还可否一键安装依赖,为宜 官方文档里的 npm install,只不过,fun install -d 除了安装 npm 依赖外,还还还可否检测到 rendertron 饱含的 puppeteer 依赖,以之后自动安装 puppeteer 所需要的 apt 依赖,更多细节还还可否参考这篇文章:

这里亲戚亲戚我们我们选折 阿里云的性能测试PTS服务进行压测。

该网址表示让 rendertron 请求 https://www.example.com/ 这个网站的内容,并返回渲染结果。

压测明细如下: