## 為什麼需要 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" rel="nofollow"></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" rel="nofollow"></a>
## 系統架構

基於函式計算，我們的服務架構如下：

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

<a name="ddd22119" rel="nofollow"></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" rel="nofollow"></a>
## 部署步驟

將 Rendertron 部署到傳統的 ECS 或者物理機上作為生產服務，並不是件容易的事。除了 Rendertron 本身需要一些安裝配置外，還需要考慮當流量增加時如何擴容，以及配置搭建反向代理或負載均衡等與之配套的服務。

下面，我們介紹下函式計算如何解決這些問題的。

<a name="ea6f3b87" rel="nofollow"></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" rel="nofollow"></a>
### 1. clone 專案：

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

**PS: 這裡直接基於官方專案進行改造，而不是提供一個示例模板，是為了演示如何平滑遷移 rendertron 到函式計算，同時，在官方版本更新後，也可以儘快更新到最新版本。**

<a name="565c1cdd" rel="nofollow"></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" rel="nofollow"></a>
### 3. 建立 bootstrap 檔案

接下來在專案根目錄建立一個名為 `bootstrap` 的檔案，這個檔案告訴函式計算如何啟動 rendertron，檔案內容如下：

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

<a name="d66b2aa6" rel="nofollow"></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" rel="nofollow"></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 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”

Serverless 實戰——使用 Rendertron 搭建 Headless Chrome 渲染解決方案

相關文章