開始使用 HTTP/2

jopen 9年前發布 | 36K 次閱讀 HTTP2

原文 http://www.imququ.com/post/use-http2-now.html

一直以來，我的博客都在使用 Nginx。但它目前只支持到 SPDY/3.1，也不支持 Server Push，一直是我的一塊心病。Nginx 官方說今年年底會增加對 HTTP/2 的支持，還要等好久：

We’re pleased to announce that we plan to release versions of both NGINX and NGINX Plus by the end of 2015 that will include support for HTTP/2. via

為了更好的研究 HTTP/2 的一些新特性，我決定先找個替代品玩一把，等 Nginx 更新了再換回去。這里有一份列表，列出了目前已經支持 HTTP/2 的客戶端和服務端。經常比較，我最終選擇了 H2O 。

H2O 是一個用 C 語言實現的 HTTP Server，非常輕量。詳細功能介紹可以去它的官網看，我主要看中了它的這兩個特性：

支持 HTTP/2 協議（支持 Server Push）；
對 TLS 的一些安全策略支持得比較好（Forward Secrecy、CHACHA20_POLY1305 加密算法、默認最低支持到 TLSv1、默認開啟 OCSP stapling、支持 Session 恢復等）；

H2O 支持的這些 TLS 策略，我在之前的文章里都提到過，這里就不解釋了。事實證明，使用了 H2O 之后，在ssllab 的評級依然能輕松到達 A+。

安裝和配置 H2O

H2O 的編譯和安裝非常簡單，參考官網的 Install 說明就能輕松搞定。有一點需要說明下，在執行完cmake .之后，可能會提示libwslay不存在，如果你不打算讓它提供 WebSocket 服務，可以忽略。

H2O 的配置文件采用了 YAML1.1 格式，比較直觀。下面列出了本博客所使用的配置：

user: jerry
http2-idle-timeout: 30
error-log: /home/jerry/www/h2o_log/error.log

hosts:
  "www.imququ.com":
    listen:
      port: 443
      ssl:
        certificate-file: /home/jerry/ssl/server.crt
        key-file: /home/jerry/ssl/server.key
        dh-file: /home/jerry/ssl/dhparams.pem
        cipher-preference: server
        cipher-suite: CHACHA20 EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA RC4 !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4
    paths:
      "/":
        proxy.reverse.url: http://127.0.0.1:10000/
        proxy.preserve-host: ON
    access-log:
      path: /home/jerry/www/h2o_log/www_imququ_com.log
  "imququ.com":
    listen:
      port: 443
      ssl:
        certificate-file: /home/jerry/ssl/server.crt
        key-file: /home/jerry/ssl/server.key
        dh-file: /home/jerry/ssl/dhparams.pem
    paths:
      "/":
        file.dir: /dev/null
        redirect:
          status: 301
          url: https://www.imququ.com/

上面的配置文件比較簡單，就不詳細介紹了。總之我配置了兩個 host，https://imququ.com:443會重定向到https://www.imququ.com:443，保證域名的統一。主域又會proxy到本地10000端口上的 HTTP 服務。

實際上，我的 H2O 背后依然跑著 Nginx，除了證書之外的配置，例如緩存、增加響應頭等操作還是通過 Nginx 來完成。這有兩個主要原因：

H2O 不支持正則匹配 URL，一些復雜的 rewrite 它搞不定；
H2O 只支持 HTTP/1.x 代理，不支持 FastCGI 和 WSGI；

所以，我依然保留了 Nginx，只是把 TLS 配置挪到了 H2O（只能如此，H2O 不能代理 HTTPS）。配置妥當后，這樣啟動 H2O 服務：

sudo /usr/local/bin/h2o -c ~/www/h2o_conf/www_imququ_com.yaml

一切正常后，通過 Chrome 的 HTTP/2 調試工具，可以看到協議這里已經是最新的h2了：

開始使用 HTTP/2

使用 Sever Push

我們都知道 HTTP/2 提供了 Server Push 功能，但服務器怎么知道哪些資源需要推送呢？HTTP/2 標準并沒有規定。如何實現 Push 策略的權利交給了 Web Server 以及 Web 應用的開發者。Web Server 可以引入學習機制，自動推斷出哪些資源最需要被 Push；也可以跟 Web 應用約定一個機制，讓 Web 應用決定 Push 哪些資源。

H2O 實現的是后者：Web 應用可以通過自定義響應頭來告訴它要推送的資源。一開始 H2O 支持的頭部字段是x-server-push，新版已經改成了 W3C Preload 文檔里提出的Link字段。查看我博客的 HTML 響應，會看到這個：

link: </static/css/theme/greyshade_50d9a.css>; rel=preload; as=stylesheet

H2O 看到這個響應頭，就知道這個資源需要被推送了。目前 Chrome 的 Network 工具并不能很好地顯示 Server Push 過程，推薦使用chrome://net-internals/#spdy工具，更直觀地查看 Push 過程。以下是訪問本博客首頁得到的信息（去掉了無關的控制幀）：

t= 5953 [st=    1]  HTTP2_SESSION_SEND_HEADERS   【1】
          --> fin = true
          --> :authority: www.imququ.com
            :method: GET
            :path: /
            :scheme: https
            accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
            accept-encoding: gzip, deflate, sdch
            accept-language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
            cache-control: no-cache
            cookie: [94 bytes were stripped]
            dnt: 1
            pragma: no-cache
            user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.65 Safari/537.36
          --> priority = 0
          --> stream_id = 33
          --> unidirectional = false
t= 6110 [st=  158]  HTTP2_SESSION_RECV_HEADERS   【2】
          --> fin = false
          --> :status: 200
            content-encoding: gzip
            content-security-policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://a.disquscdn.com; img-src 'self' data: https://www.google-analytics.com; style-src 'self' 'unsafe-inline'; frame-src https://disqus.com
            content-type: text/html; charset=utf-8
            date: Sat, 06 Jun 2015 16:41:28 GMT
            link: </static/css/theme/greyshade_50d9a.css>; rel=preload; as=stylesheet
            server: h2o/1.2.0
            strict-transport-security: max-age=31536000
            vary: Accept-Encoding
            x-cache: HIT from cache.ququ
            x-content-type-options: nosniff
            x-frame-options: deny
          --> stream_id = 33
t= 6110 [st=  158]  HTTP2_SESSION_RECV_PUSH_PROMISE   【3】
          --> :authority: www.imququ.com
            :method: GET
            :path: /static/css/theme/greyshade_50d9a.css
            :scheme: https
            accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
            accept-encoding: gzip, deflate, sdch
            accept-language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
            user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.65 Safari/537.36
          --> id = 33
          --> promised_stream_id = 6
t= 6110 [st=  158]  HTTP2_SESSION_RECV_DATA   【4】
          --> fin = false
          --> size = 2118
          --> stream_id = 33
t= 6110 [st=  158]  HTTP2_SESSION_RECV_DATA   【4】
          --> fin = false
          --> size = 1400
          --> stream_id = 33
t= 6110 [st=  158]  HTTP2_SESSION_RECV_DATA   【4】
          --> fin = false
          --> size = 1400
          --> stream_id = 33
t= 6113 [st=  161]  HTTP2_SESSION_RECV_DATA   【4】
          --> fin = false
          --> size = 1419
          --> stream_id = 33
t= 6113 [st=  161]  HTTP2_SESSION_RECV_DATA   【4】
          --> fin = true
          --> size = 0
          --> stream_id = 33
t= 6113 [st=  161]  HTTP2_SESSION_RECV_HEADERS   【5】
          --> fin = false
          --> :status: 200
            cache-control: max-age=315360000
            content-encoding: gzip
            content-type: text/css
            date: Sat, 06 Jun 2015 16:41:28 GMT
            etag: W/"5572e176-3ce9"
            expires: Thu, 31 Dec 2037 23:55:55 GMT
            last-modified: Sat, 06 Jun 2015 12:03:02 GMT
            server: h2o/1.2.0
            vary: Accept-Encoding
            x-http2-pushed: 1
          --> stream_id = 6
t= 6113 [st=  161]  HTTP2_SESSION_RECV_DATA   【6】
          --> fin = false
          --> size = 2712
          --> stream_id = 6
t= 6113 [st=  161]  HTTP2_SESSION_RECV_DATA   【6】
          --> fin = false
          --> size = 1400
          --> stream_id = 6
t= 6263 [st=  311]  HTTP2_SESSION_RECV_DATA   【6】
          --> fin = false
          --> size = 2376
          --> stream_id = 6
t= 6263 [st=  311]  HTTP2_SESSION_RECV_DATA   【6】
          --> fin = true
          --> size = 0
          --> stream_id = 6

下面解釋一下這段日志的具體含義：

【1】[stream_id 33]：客戶端發送頁面請求頭，路徑是/。fin = true表示后面沒有數據幀了（GET 請求沒有正文）；

【2】[stream_id 33]：服務端發送針對/的響應頭，fin = false表示后面還有數據幀（響應正文）；

【3】[stream_id 33]：服務端發送針對 css 資源的 PUSH PROMISE，并且指定這個資源將在 id 為 6 的流上傳輸；

【4】[stream_id 33]：服務端繼續發送/的響應正文，直到最后一個幀的fin標記為true，表示傳完了；

【5】[stream_id 6]：服務端發送針對 css 資源的響應頭；

【6】[stream_id 6]：服務端繼續發送 css 的響應正文；

通過上面的推送流程說明，可以清晰地看出：客戶端只請求了頁面，服務端除了在原有流上返回頁面響應，還創建了新流用來推送其他資源，這就是 Server Push 的核心。這里有幾點需要再說明下：

由客戶端發起的流，stream id 是奇數，服務端發起的則是偶數；
服務端的 PUSH PROMISE 需要在返回頁面正文之前發送，避免客戶端出現競態條件（如上例，③ 必須在 ④ 之前）；
服務器必須遵循請求 - 響應機制，借著對請求的響應推送資源。也就是說，服務器并不能無緣無故推送流；

之前的文章中我提到過，Server Push 相對于將資源內聯，好處是可以利用瀏覽器緩存。那在資源已經被緩存的情況下，再訪問頁面會怎樣呢？

t=  157 [st=  146]  HTTP2_SESSION_SEND_RST_STREAM
                    --> description = "Received duplicate pushed stream with url: /static/css/theme/greyshade_50d9a.css"
                    --> status = 1
                    --> stream_id = 8

可以看到，如果服務端想要推送的資源本地已經緩存過，客戶端會發送 RST_STREAM 告訴服務端不要再傳了。

本文就寫到這里，下次介紹如何讓 ThinkJS 輸出 H2O 所能識別的 Server Push 響應頭。

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1433745095395.html

HTTP2

開始使用 HTTP/2

安裝和配置 H2O

使用 Sever Push

相關經驗

相關資訊

相關文檔

目錄