egordm/rendertron

Rendertron

https://github.com/GoogleChrome/rendertron/workflows/CI/badge.svg](https://github.com/GoogleChrome/rendertron/actions) ![NPM package]([***]

Rendertron是一个无头Chrome渲染解决方案，用于动态渲染和序列化网页。

:hammer: 基于 https://github.com/GoogleChrome/puppeteer 构建

:cloud: 易于部署到Google Cloud

:mag: 提升SEO

Rendertron旨在使您的渐进式Web应用(PWA)能够向任何不渲染或执行JavaScript的爬虫提供正确内容。Rendertron作为独立HTTP服务器运行，使用无头Chrome渲染请求的页面，自动检测您的PWA何时完成加载，并将响应序列化回原始请求。要使用Rendertron，您的应用需配置中间件来决定是否将请求代理到Rendertron。Rendertron兼容所有客户端技术，包括Web组件。

演示端点

演示版Rendertron服务可在 [***] 获取。它不设计用作生产端点，您可以使用，但不保证正常运行时间。

目录

• 中间件
• API
  • 渲染
  • 截图
  • 清除缓存
• 常见问题
  • 查询参数
  • 页面渲染时机
  • 渲染预算超时
  • Web组件
  • 状态码
• 安装与部署
  • 构建
  • 本地运行
  • 部署到Google Cloud Platform
  • 使用Docker部署
  • 配置
  • 故障排除

中间件

服务启动后，您需要实现差异服务层，通过检查用户代理来确定是否需要预渲染。

以下是可与Rendertron服务配合使用的中间件列表：

• Express.js中间件
• https://github.com/justinribeiro/pwa-firebase-functions-botrender%EF%BC%88%E7%A4%BE%E5%8C%BA%E7%BB%B4%E6%8A%A4%EF%BC%89
• https://github.com/galamai/AspNetCore.Rendertron%EF%BC%88%E7%A4%BE%E5%8C%BA%E7%BB%B4%E6%8A%A4%EF%BC%89
• https://github.com/frontendr/python-rendertron%EF%BC%88%E7%A4%BE%E5%8C%BA%E7%BB%B4%E6%8A%A4%EF%BC%89

Rendertron还兼容prerender.io中间件。注意：两者的用户代理列表不同。

API

渲染

GET /render/<url>

render端点将渲染页面并序列化页面。选项通过查询参数指定：

• mobile 默认值为false。通过传递?mobile启用，以请求网站的移动版本。
• refreshCache：传递refreshCache=true将忽略可能的缓存渲染结果，将请求视为未缓存。新的渲染结果将替换之前的结果。

截图

GET /screenshot/<url>
POST /screenshot/<url>

screenshot端点可用于验证页面是否正确渲染。

两个端点均支持以下查询参数：

• width 默认值为1000 - 指定视口宽度。
• height 默认值为1000 - 指定视口高度。
• mobile 默认值为false。通过传递?mobile启用，以请求网站的移动版本。
• timezoneId - 指定渲染的时区。

其他选项可通过POST请求体中的JSON字符串提供。详见https://github.com/GoogleChrome/puppeteer/blob/v1.6.0/docs/api.md#pagescreenshotoptions%E4%B8%AD%E7%9A%84%E5%8F%AF%E7%94%A8%E9%80%89%E9%A1%B9%E3%80%82%E6%97%A0%E6%B3%95%E6%8C%87%E5%AE%9A%60type%60%EF%BC%88%E9%BB%98%E8%AE%A4%60jpeg%60%EF%BC%89%E5%92%8C%60encoding%60%EF%BC%88%E9%BB%98%E8%AE%A4%60binary%60%EF%BC%89%E5%8F%82%E6%95%B0%E3%80%82

清除缓存

GET /invalidate/<url>

invalidate端点将从配置的缓存（内存、文件系统或云数据存储）中删除<url>的缓存条目。

常见问题

查询参数

当在URL中设置查询参数时，确保正确编码。在JS中，应使用encodeURIComponent(myURLWithParams)。例如，要指定page=home：

https://render-tron.appspot.com/render/http://my.domain/%3Fpage%3Dhome

页面渲染时机

服务尝试通过以下方式检测页面何时加载完成：监听页面加载事件、确保没有未完成的网络请求，以及给予页面足够的渲染时间。

渲染预算超时

渲染有10秒的硬限制。确保您的应用在预算到期前完成渲染，避免触发超时。

Web组件

无头Chrome支持Web组件，但Shadow DOM难以有效序列化。因此，https://github.com/webcomponents/shadydom%EF%BC%88Shadow DOM的轻量级垫片）是Web组件所必需的。

如果使用Web组件v0（已弃用），需要启用Shady DOM才能正确渲染。在使用Web组件v0的Polymer 1.x中，Shady DOM默认启用。如果使用Shadow DOM，可通过向Rendertron服务请求时设置查询参数dom=shady来覆盖。

如果使用Web组件v1并加载webcomponents-lite.js或webcomponents-loader.js，向Rendertron服务请求时设置查询参数wc-inject-shadydom=true。渲染服务将强制加载并启用必要的polyfill。

状态码

初始请求URL的状态码将被保留。如果初始状态码为200或304，您可以通过添加meta标签设置渲染服务返回的HTTP状态码：

html
<meta name="render:status_code" content="404" />

本地运行

要安装Rendertron并在本地运行，首先安装Rendertron：

bash
npm install -g rendertron

在机器上安装Chrome后，运行Rendertron CLI：

bash
rendertron

安装与部署

构建

克隆并安装依赖：

bash
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build

本地运行

在本地安装Chrome的情况下，可启动本地服务器：

bash
npm run start

部署到Google Cloud Platform

gcloud app deploy app.yaml --project <your-project-id>

使用Docker部署

Rendertron不再包含Docker文件。相反，请参考https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker%E4%BA%86%E8%A7%A3%E5%A6%82%E4%BD%95%E5%9C%A8Docker%E4%B8%AD%E8%BF%90%E8%A1%8C%E6%97%A0%E5%A4%B4Chrome%E3%80%82

配置

部署服务时，通过在根目录包含config.json设置配置变量。可用配置选项：

• timeout 默认 10000 - 设置渲染目标页面的超时时间（毫秒）。
• port 默认 3000 - 设置Rendertron服务运行和监听的端口。注意：如果设置了process.env.PORT，将优先使用该值。
• host 默认 0.0.0.0 - 设置Rendertron服务运行和监听的主机名。注意：如果设置了process.env.HOST，将优先使用该值。
• width 默认 1000 - 设置页面渲染的宽度（分辨率）。
• height 默认 1000 - 设置页面渲染的高度（分辨率）。
• reqHeaders 默认 {} - 设置随每个请求发送到目标页面的额外HTTP头。
• cache 默认 null - 设置为datastore启用Google Cloud上的数据存储缓存（仅在部署到Google Cloud时使用），memory启用内存缓存，或filesystem启用基于磁盘的缓存。
• cacheConfig - 指定缓存选项的对象数组。
• renderOnly - 限制端点仅服务特定域名的请求。指定为字符串数组，例如['http://render.only.this.domain']。这是严格的前缀匹配，确保指定将使用的确切协议（如http、https）。
• closeBrowser默认 false - true强制浏览器在每次页面渲染之间关闭并重新打开，某些网站可能需要此设置以防止第一个渲染后的URL返回空响应。
• restrictedUrlPattern默认 null - 设置限制URL模式，以限制匹配给定正则表达式的请求。

cacheConfig

• cacheDurationMinutes 默认 1440 - 设置过期时间（分钟），默认为24小时。设置为-1禁用缓存过期。
• cacheMaxEntries 默认 100 - 设置所选缓存方法中存储的最大条目数。设置为-1允许无限制缓存。如果使用数据存储缓存方法，将此值设置超过1000可能导致性能下降，因为确定缓存大小的查询可能太慢。如果想在datastore中允许更大的缓存，考虑将此值设置为-1并使用类似批量删除条目的方法管理数据存储大小。
• snapshotDir 默认 <操作系统默认临时目录>/renderton - 仅文件系统 Rendertron缓存文件存储的目录。

示例

指定内存缓存、2小时过期时间和最多50个条目的示例配置文件：

javascript
{
    "cache": "memory",
    "cacheConfig": {
        "cacheDurationMinutes": 120,
        "cacheMaxEntries": 50
    }
}

故障排除

如果在环境中运行无头Chrome遇到问题，请参考Puppeteer的https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md%E3%80%82