Google AMP WebPackage 在 Webnovel 的应用

本文做者：刘鹏

原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 ( id: yuewen_YFE ) 获取受权，并注明做者、出处和连接。

以前咱们的文章（文章连接）也有介绍过，Webnovel （起点海外）在去年年初就将首页以及所有阅读页都接入了 Google 的 AMP 技术，而且从体验和数据上来讲都取得了不错的效果。在去年年末咱们又进行了一次迭代，把更多的阅读页内容也加入到了 AMP 当中。用户能够在 Google Search 当中搜索到咱们的小说内容，而且很快就能够进行阅读。可是同时咱们也发现了一些问题，用户在搜索结果的第一个落地页显示的内容是咱们的，可是 URL 倒是 Google 的 URL。虽然 Google 在顶部加了一个 m.webnovel.com 来源的标识，可是不少用户依然会误解，而且给咱们的统一品牌宣传带来了影响。

显然 Google AMP 团队也注意到了这一点，在去年年末的时候推出了 AMP WebPackage 技术来解决这个问题。

WebPackage 背景

讲到 Package，你们可能想到的都是 Webpack，Rollup，Parcel 这些打包工具。而咱们此次讲的是 Web Package。Web Package 解决了什么问题呢？它可让你把你的文件打包给第三方，可是浏览器访问的时候却能够识别出来你真实的域名。我想不少同窗第一反应就是想到 CDN，由于如今 CDN 都是托管在第三方的云厂商，为了在云厂商配置咱们本身的域名，咱们必须把本身的证书私钥配置在云厂商的后台管理页面上，这样能够实现用户访问的是云厂商的 CDN 服务器可是显示的倒是咱们本身的域名。这种操做带来两个问题，一个是存在着被第三方云厂商泄漏咱们证书私钥的风险，另外一个是证书过时的时候要记得去第三方平台更新。而 Web Package 就是用来解决这些问题的。

Web Package 的这个特性也正好能够用来解决咱们上面发现的问题。

以前的 Google AMP 技术可让用户在 Google Search 搜索结果页面当中很是迅速地进入到搜索结果页面。为了保证加载速度尽量地快，Google Search 实际上是将符合 AMP 标准的页面缓存进 Google 的 CDN 当中，当命中搜索结果的时候，再从 Google CDN 中加载进来，从而保证了很是快的加载速度。这其实跟咱们日常使用 CDN 加速是同样的。必然会带来一个问题，就是展现出来的页面 URL 是 Google 的地址，而非咱们本身的域名地址。就如图 1 所示。

为了解决上面的问题，让用户有更好的体验，Google AMP 团队在去年将 Web Package 引入到了 AMP 技术当中。咱们也有幸成为了首批接入这个技术的国内发布商。在昨天刚刚结束的 Google AMP 2019 会议上，也获得了 Google 官方的承认。

实现 Web Package 中的 Signed-HTTP-Exchanges

在接入 AMP Web Package 过程当中，最重要的一步是将咱们的内容返回给 Google 爬虫，而这些内容是须要使用咱们的证书进行加密的，这个技术称为 Signed-HTTP-Exchanges (缩写为 SXG)。下面咱们将详细介绍如何实现 SXG 并最终在从 Google Search 结果无缝浏览咱们的站点。

整个操做不算复杂，一共分为如下三步：

1. 从你的 CA 厂商那获取一个支持 SXG 的证书

这是最重要的一步。如上所述，返回给 Google 爬虫的内容须要使用证书进行非对称加密。而这个证书是必须拥有一个 SXG 的扩展。截止此文章发布日期，只有 Digicert 证书颁发商是支持颁布此类型证书的。而且此证书必须使用 EC 密钥（非 RSA 密钥）以及 prime256v1 算法生成。

须要注意的是，这个证书仅用来给返回谷歌爬虫的 AMP 文档进行加密。以前接入层是什么证书依旧使用什么证书，是没有影响的（须要注意生成新证书不能致使如今在用的旧证书被颁发商吊销）。

2. 在服务器上按照 amppackage 官方步骤部署 amppkg

部署 amppkg 没有什么值得说明的，惟一须要注意的是 amppkg 的配置文件。要捕获请求参数的时候须要加上 QueryRE = “.*”，其余也没有要特别注意的。

amppkg.toml
----------
Port = 'port listening'
CertFile = 'path/to/fullchain.pem' # SXG cert from your CA
KeyFile = 'path/to/privkey.pem' # SXG cert key
OCSPCache = '/tmp/amppkg-ocsp'
[[URLSet]]
[URLSet.Sign]
Domain = "amppackageexample.com"
QueryRE = ".*" # to capture query string
复制代码

3. 配置 AMP SXG 回源

下面是简单的 AMP SXG 回源的架构图。

而后就是配置回源接入层了，为了更详细描述这个问题，咱们画一个 Webnovel AMP 的回源流程图。

如今 Google 爬虫抓取 SXG 加密的 AMP 文档会有两次请求操做。第一次是一个正常的爬取操做，若是后台是支持给 SXG 加密的 AMP 内容文件的，则能够在返回的 header 头上加上 Vary: AMP-Cache-Transform,Accept，Google 爬虫识别到这个 header 头以后就能够进行第二次爬取操做，而且会在 header 头上带上 AMP-Cache-Transform: google 用来跟第一次爬取操做进行区分。咱们的接入层反向代理在识别到这个头部以后，将请求转发到对应的 amppkg server，amppkg server 将对应的内容返回给爬虫便可。

虽然咱们给 amppkg server 配置了一个证书，可是这个证书仅用来对内容进行加密，链接是不加密的。因此咱们的反向代理转发到 amppkg server 依然用 http 而非 https。

upstream amppkg { proxy_pass http://IP:PORT; }
upstream webnovelBackend { proxy_pass http://IP:PORT; }
location ^~ /amp/ {
    if ($http_amp_cache_transform = "google") {
        rewrite ^/(.*)$ /ampSXG/$1 last;
        break;
    }
    # allow google to fetch SXG (Signed Exchange AMP HTML)
    add_header Vary "AMP-Cache-Transform, Accept";
    proxy_pass         http://webnovelBackend;
}
location ^~ /ampSXG/ {
    # some detail omitted
    proxy_pass         http://amppkg/priv/doc/https://m.webnovel.com/; 
}
# this location is for browser to get cert for verifying SXG document
location ^~ /amppkg/ {
    proxy_pass         http://amppkg/amppkg/;
}
复制代码

到了这里就完成了整个后台的配置，能够用官方提供的方法来进行验证。要想正式环境（Chrome 73 以及以上才支持 SXG 功能）验证就须要等待一段时间，让 Google 爬虫来爬取这些 SXG 加密的 AMP 文档内容了。

结果展现

下面是 Webnovel 在实现 SXG 以后的一个演示视频。

接入了 AMP Packager 以后的 AMP 和以前有什么区别呢？虽然咱们的数据还不够多，可是咱们分析结果看来，最终跳出率，以及每 session 浏览的页面数对比以前都获得了比较好的优化。待 Chrome 73+版本获得更多普及以后数据会更加明显，后续再跟你们进行分享。

Tips: 有一个小技巧，正常状况下从 Google Search 引流过来的用户只能享受第一个落地页面的 Google Cache 加速。后续就是咱们本身网站的内容了，须要咱们本身进行接入优化。可是不少时候在全球化的接入能力上，咱们相对 Google 来讲仍是偏弱的。有没有什么办法让用户尽量地都浏览 Google Cache 缓存里面的页面呢？在用户须要进行一些进一步操做的时候，咱们再切到咱们本身的页面。咱们研究了一下发现仍是可行的。咱们的 AMP 页面对应 Google Cache 中的地址是有一个映射关系，好比说咱们的 Webnovel AMP SXG 首页对应 Google Cache 缓存的地址就是 m-webnovel-com.ampproject.org/wp/s/m.webn… ，咱们在页面当中跳转的 AMP SXG 页面都换成对应的 Google Cache 地址就知足了咱们的需求，即有效利用了 Google Cache 又让用户像在咱们本身站点上操做同样。 视频以下：

引用文章：

1. medium.com/@lewpengfei…
2. github.com/ampproject/…
3. www.digicert.com/account/iet…
4. github.com/WICG/webpac…

查看更多分享，请关注阅文集团前端团队公众号: