## 为什么需要 Rendertron？

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

使用客户端渲染有着诸多优势，比如节省后端资源、局部刷新、前后端分离等等，但也带来了一些挑战，比如本文要解决的 SEO 问题。

对于服务端渲染的页面，服务端可以直接将内容通过 HTML 的形式返回，搜索引擎爬虫可以轻易的获取页面内容，而对于客户端渲染的应用，客户端必须执行服务器返回的 Javascript 才能得到正确的网页内容。目前，除 Google、Bing 支持 Javascript 外（也会有一些限制），其他的大部分搜索引擎都不支持 Javascript，也就无法获取正确的网页内容。

Google 推出的 [Rendertron](https://github.com/GoogleChrome/rendertron) 就是为了解决这样场景的一款工具。通过使用 Rendertron，SPA 也能够被不支持执行 Javascript 的搜索引擎爬取渲染后的内容。其原理主要是通过使用 Headless Chrome 在内存中执行 Javascript，并在得到完整内容后，将内容返回给客户端。

## Rendertron 原理介绍

通常会将 Rendertron 部署为一个独立的 HTTP 服务，然后为 Web 应用框架配置 Google 官方提供的[中间件](https://github.com/GoogleChrome/rendertron#middleware)或者在反向代理上添加相应路由规则，使得能够在检测到搜索引擎爬虫的 [UA](https://ziyuan.baidu.com/college/articleinfo?id=335) 时，可以将请求代理给 Rendertron 服务。

![1.png](https://ucc.alicdn.com/pic/developer-ecology/77a8c77ffc094f0085949fa803f1e9a0.png)

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

举例来说，当客户端请求我们的网站时，我们搜线根据请求头 User Agent 发现包含了 [Baiduspider/2.0](https://ziyuan.baidu.com/college/articleinfo?id=335) 关键字，可以认定为当前的客户端是一个百度爬虫，然后又在 UserAgent 中发现 Mobile 关键字，可以认定这个爬虫是在做移动端内容的抓取。通过上面的判断，就可以将这个请求代理 Rendertron 服务的 `/render/https://www.aliyun.com/?mobile` 路由，让 Rendertron 帮助执行网页内的 Javascript，并将最终内容返回给搜索引擎爬虫。

<a name="54f23722"></a>
## 效果一览

Google 官方提供了示例 [https://render-tron.appspot.com/](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://render-tron.appspot.com/) ，可以直接体验效果。

我们也提供了部署在函数计算上的示例：[http://renderton.mofangdegisn.cn](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=http://renderton.mofangdegisn.cn)

![2.png](https://ucc.alicdn.com/pic/developer-ecology/83101e46b64248f192e473c838e34b34.png)

<a name="b2f511d7"></a>
## 系统架构

基于函数计算，我们的服务架构如下：

![3.png](https://ucc.alicdn.com/pic/developer-ecology/8ce56ed1aa214c95af67f54c8133aeee.png)

<a name="ddd22119"></a>
## 性能测试

这里我们选择阿里云的[性能测试PTS](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://www.aliyun.com/product/pts)服务进行压测。

测试配置如下：<br />
![4.png](https://ucc.alicdn.com/pic/developer-ecology/de8eb69a8d6045d29f91c9f8e601bd93.png)

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

我们要测试的网址网站为：[http://renderton.mofangdegisn.cn/render/https://www.example.com/](http://renderton.mofangdegisn.cn/render/https://www.example.com/)

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

测试概览如下：

![5.png](https://ucc.alicdn.com/pic/developer-ecology/cc8d6a5f255c4948b7b7c8a5959d2956.png)

从上面的概览可以看到，由于会发生从函数到 [https://www.example.com/](https://www.example.com/) 的网络请求，所以最小延迟为 1106ms，99% 的请求可以在 2011ms 完成，90% 的请求可以在 1347ms 完成，75% 的请求可以在 1201ms 完成，50% 的请求可以在 1156ms 完成。我们是每分钟按照 20% 的并发递增，当并发增加时，函数计算会遇到冷启动，冷启动最大时间为 32261ms（可以使用预热、[预留](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://help.aliyun.com/document_detail/138103.html)等方式可以缓解或完全免除冷启动的影响）。

在未优化的场景下，我们的压测结果也达到了 44.91 的 TPS，这对于大部分网站是绝对能够满足需求的。

压测明细如下：<br />

![6.png](https://ucc.alicdn.com/pic/developer-ecology/167edc507d744340924ae02f87dc0fc2.png)

上面箭头所指的位置表示并发突然增加，函数自动扩容时会遇到一些冷启动，当扩容完毕，后续的请求就非常平稳了。

<a name="c682487f"></a>
## 部署步骤

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

下面，我们介绍下函数计算如何解决这些问题的。

<a name="ea6f3b87"></a>
### 参考链接

1. [Fun 安装教程](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft/blob/master/docs/usage/installation-zh.md#%E7%9B%B4%E6%8E%A5%E4%B8%8B%E8%BD%BD-fun-%E4%BA%8C%E8%BF%9B%E5%88%B6%E8%BF%90%E8%A1%8C%E7%A8%8B%E5%BA%8F) 可以直接在这里下载二进制版本的 Fun，解压后即可使用。
2. [Docker 安装教程](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft/blob/master/docs/usage/installation-zh.md#%E5%AE%89%E8%A3%85-docker)：本地安装依赖需要借助于 docker，可以直接在这里下载 Docker 。

<a name="53f78eac"></a>
### 1. clone 项目：

```shell
git clone https://github.com/GoogleChrome/rendertron.git
```

**PS: 这里直接基于官方项目进行改造，而不是提供一个示例模板，是为了演示如何平滑迁移 rendertron 到函数计算，同时，在官方版本更新后，也可以尽快更新到最新版本。**

<a name="565c1cdd"></a>
### 2. 创建 template.yml 配置文件：

template.yml 是 Fun 默认的[描述文件](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft/blob/master/docs/specs/2018-04-03-zh-cn.md)，通过该描述文件描述的资源，可以通过 fun deploy 一键在部署到云端。

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

[函数](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://help.aliyun.com/document_detail/52077.html)是函数计算系统调度和代码执行的基本单位，我们的 rendertron 项目就可以跑在函数里，而[服务](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://help.aliyun.com/document_detail/74925.html)是管理函数计算资源管理的单位，一个服务可以包含多个函数。

对于初学者，可以直接将下面的模板放在项目根目录下，并且命名为 template.yml。

```yaml
ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
  Rendertron: # 声明一个名为 Rendertron 的服务
    Type: 'Aliyun::Serverless::Service'
    Properties:
      Description: This is Rendertron service
    rendertron: # 声明一个名为 rendertron 的函数
      Type: 'Aliyun::Serverless::Function'
      Properties:
        Handler: index.handler
        Runtime: custom # runtime，我们使用 custom
        Timeout: 60
        MemorySize: 1024
        CodeUri: ./
      Events:
        httpTrigger: # 添加 http 触发器
          Type: HTTP
          Properties:
            AuthType: ANONYMOUS
            Methods:
              - GET
              - POST
              - PUT
           
  renderton.mofangdegisn.cn: # 添加自定义域名
    Type: 'Aliyun::Serverless::CustomDomain'
    Properties:
      Protocol: HTTP
      RouteConfig:
        routes:
          /*:
            ServiceName: Rendertron
            FunctionName: rendertron
```

<a name="06259605"></a>
### 3. 创建 bootstrap 文件

接下来在项目根目录创建一个名为 `bootstrap` 的文件，这个文件告诉函数计算如何启动 rendertron，文件内容如下：

```shell
#!/usr/bin/env bash
PORT=9000 HOST=0.0.0.0 npm run start
```

<a name="d66b2aa6"></a>
### 4. 安装依赖 & 编译项目

直接使用 `fun install -d` 可以一键安装依赖，相当于官方文档里的 npm install，只不过，`fun install -d` 除了安装 npm 依赖外，还可以检测到 rendertron 包含的 puppeteer 依赖，并且会自动安装 puppeteer 所必须的 apt 依赖，更多细节可以参考[这篇文章](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/727915)：

```shell
fun install -d
```

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

```shell
npm run build
```

<a name="e50759f0"></a>
### 5. 本地运行 rendertron

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

```
fun local start renderton.mofangdegisn.cn
```

演示效果如下：
![7.gif](https://ucc.alicdn.com/pic/developer-ecology/1ed3972dca594ec299d8ddfa14a2f904.gif)

### 6. 一键部署

当本地运行、调试确认没有问题了，就可以考虑部署到线上了。在部署前，要先将 template.yml 中的域名替换为自己的。

这里简单介绍下步骤：假如自己 Aliyun 的 AccountId 为 12345，那么就将自己的域名（国内集群需要备案）CNAME 到 12345.cn-shanghai.fc.aliyuncs.com，然后将自己的域名更新到 template.yml，执行 fun deploy 即可。更多详情可以参考[这篇文档](https://statistics.functioncompute.com/?title=Serverless%20%E5%AE%9E%E6%88%98%E2%80%94%E2%80%94%E4%BD%BF%E7%94%A8%20Rendertron%20%E6%90%AD%E5%BB%BA%20Headless%20Chrome%20%E6%B8%B2%E6%9F%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88&src=article&author=%E5%B0%8F%E9%BB%98&url=https://help.aliyun.com/document_detail/90722.html)。

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

![8.gif](https://ucc.alicdn.com/pic/developer-ecology/fb25483d0f504340a0530aab80e7f692.gif)

## 总结

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

>“[阿里巴巴云原生](https://developer.aliyun.com/group/alisoftwaretech/)关注微服务、Serverless、容器、Service Mesh 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践，做最懂云原生开发者的技术圈。”

ITPub博客

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

最新文章