サーバレスの戦闘 - 利用Rendertronビルドヘッドレスクロームレンダリング

なぜRendertron？

従来のWebページ、サーバーは通常、レンダリングされ、およびSPA（シングルページアプリケーション）と、特に反応して、Vueの、クライアントのレンダリングを使用してWebアプリケーションが増えているの代表として角度人気のフロントエンドフレームワーク。

クライアントのレンダリングを使用するなど、バックエンドリソース、パーシャルリフレッシュ、フロントの分離および後端の保存など多くの利点を持っているが、それはまた、SEOの問題を解決するためにこのようないくつかの課題をもたらします。

ページのサーバー側のレンダリングのために、サーバはHTMLの形式のコンテンツを簡単にページのコンテンツを取得することができ、検索エンジンのクローラに直接戻って、クライアントのレンダリングアプリケーションのために、実行しなければならないクライアントはJavascriptがサーバーが返すに正しいWebページを有効にすることができますコンテンツ。現在のところ、Google、BingのサポートJavascriptの外（いくつかの制限があります）に加えて、他の検索エンジンのほとんどは、Javascriptをサポートしていない、あなたは正しいWebコンテンツを取得することはできません。

Googleが立ち上げRendertronを、このようなAシナリオツールを解決するために。Rendertronを使用することにより、SPAもJavascriptの検索エンジンは、レンダリング後にコンテンツのクロールをサポートしていません実行することができます。原理は、ヘッドレスChromeを使用して、クライアントに、コンテンツのバック完全なコンテンツを取得した後、メモリ内のJavascriptの実装です。

原則導入Rendertron

Rendertronは通常、スタンドアロンのHTTPサーバとして展開して、Googleの公式のWebアプリケーションフレームワークを設定しますミドルウェアまたはリバースプロキシ上のルールをルーティングする適切なを追加し、検索エンジンのスパイダー検出することが可能となるUAを、あなたが要求することができますRendertronサービスに働きます。

Rendertronは、それぞれ、二つの主なAPIを提供してレンダリングし、スクリーンショット。どのサイトのコンテンツのためのWebコンテンツ、スクリーンショットスクリーンショットをレンダリングするためにレンダリングします。SEOのシーンで使用すると、インターフェイスをレンダリングします。

クライアントは、当社のWebサイトを要求した場合たとえば、私たちは、エージェントが含有していることが分かったリクエストヘッダのユーザに応じて行を見つけBaiduspider / 2.0のキーワードを、現在のクライアントは、Baiduの爬虫類であると同定され、その後、モバイルでのUserAgentに鍵を見つけることができます言葉は、このクローラが可動側のコンテンツのクロールをやっている識別することができます。上記の判断を経て、プロキシRendertronサービス要求することができ/render/https://www.aliyun.com/?mobile、ルーティングをRendertronのヘルプは、ページ内のJavascriptを実行してみましょう、と検索エンジンのクローラへの最終的な内容を返します。

エフェクトリスト

Googleは公式の例を提供します https://render-tron.appspot.com/、あなたは直接効果を体験することができます。

我々はまた、コンピューティング機能に展開例を示します。http://renderton.mofangdegisn.cn

システムアーキテクチャ

次のように計算機能に基づいて、当社のサービス構造は次のとおりです。

性能試験

ここでは、アリの雲の選択したPTSテスト、パフォーマンス、サービスの圧力測定を。

次のようにテスト構成です。

我々は、同時に20％ルールを昇順で同時100、試験6分、毎分測定された圧力が設定しました。

私たちは、サイトのURLがテストしたいです：http://renderton.mofangdegisn.cn/render/https://www.example.com/

このサイトはrendertronを聞かせするための要求を表し、 https://www.example.com/このサイトは、レンダリング結果を返します。

概要テスト次のように：

関数から発生することが原因で私たちは、上記の概要から見ることができます https://www.example.com/ 的网络请求，所以最小延迟为 1106ms，99% 的请求可以在 2011ms 完成，90% 的请求可以在 1347ms 完成，75% 的请求可以在 1201ms 完成，50% 的请求可以在 1156ms 完成。我们是每分钟按照 20% 的并发递增，当并发增加时，函数计算会遇到冷启动，冷启动最大时间为 32261ms（可以使用预热、预留等方式可以缓解或完全免除冷启动的影响）。

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

压测明细如下：

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

部署步骤

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

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

参考链接

Fun 安装教程可以直接在这里下载二进制版本的 Fun，解压后即可使用。
Docker 安装教程：本地安装依赖需要借助于 docker，可以直接在这里下载 Docker 。

1. clone 项目：

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

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

2. 创建 template.yml 配置文件：

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

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

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

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

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

3. 创建 bootstrap 文件

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

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

4. 安装依赖 & 编译项目

直接使用 fun install -d 可以一键安装依赖，相当于官方文档里的 npm install，只不过，fun install -d 除了安装 npm 依赖外，还可以检测到 rendertron 包含的 puppeteer 依赖，并且会自动安装 puppeteer 所必须的 apt 依赖，更多细节可以参考这篇文章：

fun install -d

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

npm run build

5. 本地运行 rendertron

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

fun local start renderton.mofangdegisn.cn

演示效果如下：

6. 一键部署

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

ここでは簡単に次の手順：たAccountId自身Aliyunが12345である場合、それはあなた自身のドメイン名となります（クラスタが国内のレコードが必要です）CNAME 12345.cn-shanghai.fc.aliyuncs.comに、そしてtemplate.ymlに独自のドメイン名を更新にエグゼクティブ楽しい展開。詳細についてを参照してください。このドキュメント。

最後に、キーの展開展開の楽しみの使用が可能。

概要

使用Rendertron +はすぐに計算機能が直接ヘルプサイトにSEOアウトより良い実行するために、ヘッドレスクロームレンダリングソリューションの製造に使用することができます構築することができます。

「アリババクラウドネイティブ懸念マイクロサービス、サーバレス、コンテナ、サービスメッシュ及び他の技術分野、クラウドネイティブ人気の技術動向を中心に、ネイティブの大規模な着陸の練習を曇らせるが、ほとんどは開発者のネイティブクラウド技術界を理解してください。」