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

  • 时间:
  • 浏览:3
  • 来源:uu快3网站_uu快3充值_玩法

测试配置如下:

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

举例来说,当客户端请求朋友的网站时,朋友搜线根据请求头 User Agent 发现带有了 Baiduspider/2.0 关键字,可不都上能认定为当前的客户端是好几个 多多百度爬虫,因此又在 UserAgent 中发现 Mobile 关键字,可不都上能认定你这俩爬虫是在做移动端内容的抓取。通过上面的判断,就可不都上能将你这俩请求代理 Rendertron 服务的 /render/https://www.aliyun.com/?mobile 路由,让 Rendertron 帮助执行网页内的 Javascript,并将最终内容返回给搜索引擎爬虫。

这里简单介绍下步骤:只要我本人 Aliyun 的 AccountId 为 12345,这麼就将我本人的域名(国内集群还要备案)CNAME 到 12345.cn-shanghai.fc.aliyuncs.com,因此将我本人的域名更新到 template.yml,执行 fun deploy 即可。更多详情可不都上能参考这篇文档。

比如,朋友下面的模板声明了好几个 多多名为 Rendertron 的服务以及名为 rendertron 的函数。

Google 推出的 Rendertron 只是为了出理 曾经场景的一款工具。通过使用 Rendertron,SPA 只是能被不支持执行 Javascript 的搜索引擎爬取渲染后的内容。其原理主只是通过使用 Headless Chrome 在内存中执行 Javascript,并在得到全部内容后,将内容返回给客户端。

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

直接使用 fun install -d 可不都上能一键安装依赖,大约官方文档里的 npm install,只不过,fun install -d 除了安装 npm 依赖外,还可不都上能检测到 rendertron 带有的 puppeteer 依赖,因此会自动安装 puppeteer 所还要的 apt 依赖,更多细节可不都上能参考这篇文章:

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

测试概览如下:

当本地运行、调试确认这麼问提了,就可不都上能考虑部署到线上了。在部署前,要先将 template.yml 中的域名替换为我本人的。

从上面的概览可不都上能都看,可能会居于从函数到 https://www.example.com/ 的网络请求,所以最小延迟为 1106ms,99% 的请求可不都上能在 2011ms 完成,90% 的请求可不都上能在 1347ms 完成,75% 的请求可不都上能在 1201ms 完成,100% 的请求可不都上能在 1156ms 完成。朋友是每分钟按照 20% 的并发递增,当并发增加时,函数计算会遇到冷启动,冷启动最大时间为 32261ms(可不都上能使用预热、预留等土办法 可不都上能缓解或全部免除冷启动的影响)。

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

这里朋友确定阿里云的性能测试PTS服务进行压测。

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

基于函数计算,朋友的服务架构如下:

压测明细如下:

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

不还要修改原项目中的代码,朋友可不都上能直接通过 fun local start renderton.mofangdegisn.cn 在本地将函数启动,因此通过浏览器访问。

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

通常会将 Rendertron 部署为好几个 多多独立的 HTTP 服务,因此为 Web 应用框架配置 Google 官方提供的上面件可能在反向代理加上上相应路由规则,使得不能在检测到搜索引擎爬虫的 UA 时,可不都上能将请求代理给 Rendertron 服务。

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

朋友要测试的网址网站为:http://renderton.mofangdegisn.cn/render/https://www.example.com/

PS: 这里直接基于官方项目进行改造,而都有提供好几个 多多示例模板,是为了演示怎么才能 才能 平滑迁移 rendertron 到函数计算,同时,在官方版本更新后,不可不都上能尽快更新到最新版本。

在未优化的场景下,朋友的压测结果也达到了 44.91 的 TPS,这对于大累积网站是绝对不能满足需求的。

对于初学者,可不都上能直接将下面的模板插进项目根目录下,因此命名为 template.yml。

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

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

下面,朋友介绍下函数计算怎么才能 才能 出理 哪几个问提的。

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

函数是函数计算系统调度和代码执行的基本单位,朋友的 rendertron 项目就可不都上能跑在函数里,而服务是管理函数计算资源管理的单位,好几个 多多服务可不都上能带有多个函数。

上面箭头所指的位置表示并发老会 增加,函数自动扩容都有遇到你这俩冷启动,当扩容完毕,后续的请求就非常平稳了。

朋友配置了 100 并发,测试 6 分钟,每分钟并发按照 20% 递增的规则进行压测。

朋友也提供了部署在函数计算上的示例:http://renderton.mofangdegisn.cn

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

演示效果如下:

猜你喜欢

三星w2018组装机多少钱!

可选中两个 或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个问题。提示:请各位消费者在收到这种于中奖或极低价格购机信息时谨慎对待,补救上当受骗。使用百度知

2020-03-22

王者荣耀拒绝了一次人脸识别,时候不弹出,每天只能玩一个小时,已成年,卸载重下已经试过了

使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。追问不怎么推荐不采纳的全是蔡徐坤。你对你这人 回答的评价是?追答收起更多回答(6)你对你这人 回答的

2020-03-22

网宿科技孙靖泽:CDN规模门槛为5T,整合潮年底就会出现

业内人士认为,CDN行业是另另四个靠规模取胜的行业,原因分析分析手里的服务器和强度很多,能应对的峰值就越高,越来越 也就更有能力做更大的客户。这几年随着市场需求的不断扩大,以

2020-03-22

OPPO哪一款手机比较好

换一换下载百度知道APP,抢鲜体验展开完正扫描二维码下载其他人刚买了oppor15,用了有另一有一个月了,感觉手感比较好,因此 运行传输数率还能要能,外观也比较好看,拿起来

2020-03-21

阿里云数据库资深专家林伟:大规模计算平台研究与实战

【云栖大会】高可用、高并发、高性能架构实战经验昨夜难忘?今晚20点,容器、后面 件、负载均衡等实战交流继续!进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

2020-03-21