本文作者：刘鹏

原创声明：本文为阅文前端团队 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 omittedproxy_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…

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