AMP

Signed-Exchange：解决 AMP URL 显示问题

Signed Exchanges

编者注：以下内容最初由 OYO 软件工程师 Sarang Khanna 发布在 Medium 上。

对于 URL 为 example.com/awesome-amp-page 的 AMP 页面，您的 SEO 用户可能看到的是 google.com/amp/s/example.com/awesome-amp-page 。在 OYO，我们彻底解决了令人头疼的 AMP 缓存 URL 显示问题，而且没有损失任何 AMP 的优势！

作为一种快速且响应式的网页模式，AMP 已席卷网页。但 AMP 页面的一大问题是，用户从 Google 搜索结果页面访问页面时，显示的 URL 永远不是发布者的原始 URL。这个问题一直以来都是讨论和关注的焦点。Signed-Exchange 可以帮助您在 AMP 页面 URL 中显示您自己的域名，同时保留所有 AMP 缓存功能。

AMP URL 现在可以是页面的原始域名（请注意地址栏）

简而言之；🔍

序言 →AMP 在 Google 搜索页面上享有缓存优势。从 Google 搜索结果（带有⚡符号的那些）打开 AMP 页面会显示来自 Google 缓存的页面的“预取”版本。因此，它会以闪电般的速度打开，因为在点击时，网络上绝对不会进行任何文档获取。（阅读：OYO 使用 AMP 的初始步骤）

问题 →但是，由于内容是从 Google 缓存服务器而不是发布者的实际服务器获取的，因此显示给用户的该页面的 URL 会以类似于 google.com/amp/s/ 的形式开头，而不是页面的实际 URL。

修复之前：从 Google 搜索结果页面打开的 AMP 页面

这会让最终用户对页面内容的真实性产生怀疑。但是，现在有一种方法可以解决这个问题，即使页面是从 Google 缓存中提供的，也可以显示页面的实际 URL。

解决方案 →

解决方案在于实施 Signed Exchange，它基本上允许您“允许”第三方（如 AMP 缓存）从其服务器提供您页面的内容，但浏览器可以在地址栏中显示您的域名和 URL。

什么是 Signed Exchange，它有什么用？ 💡

Signed Exchange （或“SXG”）是一项新兴技术，它提供了一种验证网页文档真实性的方法。这可以用来确定页面的原始发布者，无论文档是从哪里提供的。

发布者可以使用其域名的证书“签名”HTTP 请求-响应对。这样生成的 signed-exchange 可以提供给浏览器，类似于网页！有了它，浏览器可以安全地在地址栏中显示发布者的 URL，因为签名证明内容最初来自发布者的来源。

简而言之，

Signed-Exchange = A Web Page + Certificate of its Origin

这可以让我们改进 AMP URL。这里的想法是，当您的 AMP 页面被抓取时，为 Google 的 AMP 抓取器提供一个 signed-exchange 来缓存，而不是一个网页 document。

随后，当用户从 Google 搜索中选择您的页面时，缓存的 signed-exchange 将从 AMP 缓存提供给客户端的浏览器。它将允许浏览器显示实际的页面 URL（即使页面来自 Google 缓存服务器）。

（HTTP Signed Exchange 如何工作以提供更好的 AMP URL）

实际操作。 🎬

Google 已宣布支持 Chrome 中的 Signed Exchanges ，并在其搜索结果页面上将其用于 AMP 的优势。当前的浏览器支持版本为 Chrome 73 及更高版本。

因此，请在 Google 上搜索 OYO 城市，并查找带有闪电符号的 AMP 页面。注意地址栏，看看 SXG 的神奇之处。

以下部分解释了我们如何启用 Signed-Exchange，以便从 Google 提供的 AMP 页面显示实际的 URL…

实施 Signed-Exchange 以在 AMP URL 中显示您自己的域名。 🏆

  1. 获取您域名的数字证书
  2. 为您的 AMP 页面设置打包器（签名器）（请参阅 deploy-amppackager-aws 以获取帮助！）
  3. 在提供 AMP 页面之前，通过打包器代理它们
  4. 盈利！🎉

1. 获取您域名的数字证书

要为 AMP 页面签名 HTTP 请求-响应，您需要获取为您的域名颁发的数字证书。
注意：私钥必须是 ECDSA，曲线 secp256r1。并且证书应启用 CanSignHttpExchanges 扩展 以供生产使用。

小贴士！为了测试目的，您可以使用免费证书或自签名证书。对于生产使用，DigiCert 颁发具有所需扩展的证书 。

作为参考，以下是如何生成 EC P-256 密钥和证书签名请求 (CSR)，您可以将其提交给 CA 以进行签名

## To generate a new EC P-256 private key
openssl ecparam -genkey -name secp256r1 | openssl ec -out privkey.pem
## Generate a CSR using the key:
openssl req -new -sha256 -key privkey.pem -nodes -out ec.csr -outform pemCode language: CSS (css)

将 CSR 提供给 CA，CA 将为您颁发私钥的新证书。对于 SXG，您将需要 privkey.pem 和已颁发的证书链 fullchain.pem。

2. 为您的 AMP 页面设置打包器（签名器）

接下来，您需要运行一个“打包器”服务器，它将使用您的证书及其私钥对所需页面进行签名（或“打包”）。

值得庆幸的是，AMP 团队推出了 amppackager 工具，这是一个用于此目的的 Golang 服务器，任何人都可以使用它，并且配置很少（GitHub 仓库）。

您只需获取该工具，提供您的配置（证书的路径、您的域名和要签名的 URL），然后运行它即可。在本地机器上，您可以使用演示请求试用它，它应该为您页面提供 signed-exchange！

AMPPackager 基础知识： 默认情况下，amppackager 监听端口 8080。假设它在 localhost:8080 上运行，它将在以下格式的 URL 上提供 signed-exchanges

localhost:8080/priv/doc/<Document's URL>

例如， https://www.oyorooms.com/hotels-in-delhi/ （AMP 页面）的 signed-exchange 将在以下位置提供：
localhost:8080/priv/doc/https://www.oyorooms.com/hotels-in-delhi/

它在以下格式的 URL 上提供其他资源，例如证书信息

localhost:8080/amppkg/<Path to Resource>Code language: HTML, XML (xml)

注意： 生产化 amppackager 工具仍然非常模糊。
我们已经开源了一个样板部署器（GitHub： deploy-amppackager-aws），它可以用于在 AWS Elastic Beanstalk 上部署 amppackager！将其用作参考，了解我们如何简化流程并在 OYO 生产环境中使用它。

3. 在提供 AMP 页面之前，通过打包器代理它们

到目前为止，我们已经运行了一个 amppackager 服务器来对我们的 AMP 页面请求进行签名。现在该看看哪些页面需要通过打包器，以及在什么条件下。

让我们在这里解决确切的要求（针对 amppackager 工具）

  • 所有以 /amppkg/ 路径开头的请求都应以未修改的方式转发到 amppackager 服务器。
  • 对于具有 AMP-Cache-Transform 标头的 AMP 页面请求（Google 抓取器将拥有它，以指示它接受 SXG），请重写 URL 以在前面添加 /priv/doc 并将请求转发到 amppackager。
  • 在提供 AMP 页面时，将 Vary 响应标头设置为 AMP-Cache-Transform, Accept。（Google 抓取器将在向您请求 SXG 之前查找此标头）

这是一个前端 Nginx 代理的示例，该代理使用在 upstream 服务器 amp_pkgr上运行的 amppackager。

###
### AMP Packager resources:


location /amppkg {
# to amppackager, unmodified
proxy_pass https://amp_pkgr; 
}


 ###
### Pages which are AMP:


 location ~* ^/(.*)/amp {


   # check for the "AMP-Cache-Transform" header 
  # (which Google crawler requests will have) 
  # to selectively pass this request to amppacakger or 
  # your usual web server 
if ( $http_AMP_Cache_Transform ) {
    rewrite /(.*) /priv/doc/https://$host/$1 break;
    proxy_pass https://amp_pkgr;
    break;
  }


   # add "Vary" response-header for normally served AMP pages 
  # (responses from amppackager will already have the header) 
add_header Vary 'AMP-Cache-Transform, Accept';


   # proxy pass to your usual AMP pages' server
  proxy_pass https://website_server;


 }

故障排除 💣

  • Google 的爬虫可能需要几天时间才能将您的 AMP 页面缓存为 Signed-Exchanges。
  • 避免将非 AMP 页面代理到 amppackager。
  • 不要将 amp_pkg 暴露给外部世界；将其保留在您的内部网络中。
  • 设置您的 amppackager 服务器以实现可扩展性和安全性。这台机器可能还会保存您的证书和私钥。

通往无限远的链接 🎯

希望您能像我们一样享受从 google.com/amp/s 到 yourdomain.com 的旅程。 感谢您的阅读… 享受您的饼干！ 🍪