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…

查看更多分享，請關注閱文集團前端團隊公衆號: