Nginx 下實現 HTTP/2 伺服器推送 (Server Push) 教程

2022-01-12 奇妙的Linux世界

Nginx 從 1.13.9 版本開始加入了 HTTP/2 的 Server Push 功能,本文將介紹如何在 Nginx 下實現 HTTP/2 伺服器推送 (Server Push) 。

這裡我們首先用 Docker 搭建一個支持 HTTP/2 的 Server Push 功能的 Nginx 容器並加入 SSL 證書。如果你還不會 Docker,可以先看 「Docker 入門教程」,非常簡單。

Nginx 的最大作用,就是搭建一個 Web Server。有了容器,只要一行命令,伺服器就架設好了,完全不用配置。

$ docker container run \  -d \  -p 127.0.0.2:8080:80 \  --rm \  --name mynginx \  nginx

上面命令下載並運行官方的 Nginx image,默認是最新版本(latest),當前是 1.13.9。如果本機安裝過以前的版本,請刪掉重新安裝,因為只有 1.13.9 才開始支持 server push。

上面命令的各個參數含義如下。


如果沒有報錯,就可以打開瀏覽器訪問 127.0.0.2:8080 了。正常情況下,顯示 Nginx 的歡迎頁。

然後,把這個容器終止,由於 --rm 參數的作用,容器文件會自動刪除。

$ docker container stop mynginx

網頁文件都在容器裡,沒法直接修改,顯然很不方便。下一步就是讓網頁文件所在的目錄/usr/share/nginx/html 映射到本地。

首先,新建一個目錄,並進入該目錄。

$ mkdir nginx-docker-demo$ cd nginx-docker-demo

然後,新建一個html子目錄。

$ mkdir html

在這個子目錄裡面,放置一個index.html文件,內容如下。

<h1>Hello World</h1>

接著,就可以把這個子目錄 html,映射到容器的網頁文件目錄 /usr/share/nginx/html。

$ docker container run \  -d \  -p 127.0.0.2:8080:80 \  --rm \  --name mynginx \  --volume "$PWD/html":/usr/share/nginx/html \  nginx

打開瀏覽器,訪問 127.0.0.2:8080,應該就能看到 Hello World 了。

修改網頁文件還不夠,還要修改 Nginx 的配置文件,否則後面沒法加 SSL 支持。

首先,把容器裡面的 Nginx 配置文件拷貝到本地。

$ docker container cp mynginx:/etc/nginx .

上面命令的含義是,把 mynginx 容器的 /etc/nginx 拷貝到當前目錄。不要漏掉最後那個點。

執行完成後,當前目錄應該多出一個 nginx 子目錄。然後把這個子目錄改名為 conf。

$ mv nginx conf

現在可以把容器終止了。

$ docker container stop mynginx

重新啟動一個新的容器,這次不僅映射網頁目錄,還要映射配置目錄。

$ docker container run \  --rm \  --name mynginx \  --volume "$PWD/html":/usr/share/nginx/html \  --volume "$PWD/conf":/etc/nginx \  -p 127.0.0.2:8080:80 \  -d \  nginx

上面代碼中,--volume "$PWD/conf":/etc/nginx 表示把容器的配置目錄 /etc/nginx,映射到本地的 conf 子目錄。

瀏覽器訪問 127.0.0.2:8080,如果能夠看到網頁,就說明本地的配置生效了。這時,可以把這個容器終止。

$ docker container stop mynginx

現在要為容器加入 HTTPS 支持,第一件事就是生成私鑰和證書。正式的證書需要證書當局(CA)的籤名,這裡是為了測試,搞一張自籤名(self-signed)證書就可以了。

下面,我參考的是 DigitalOcean 的教程。首先,確定你的機器安裝了 OpenSSL,然後執行下面的命令。

$ sudo openssl req \  -x509 \  -nodes \  -days 365 \  -newkey rsa:2048 \  -keyout example.key \  -out example.crt

上面命令的各個參數含義如下。

req:處理證書籤署請求。

-x509:生成自籤名證書。

-nodes:跳過為證書設置密碼的階段,這樣 Nginx 才可以直接打開證書。

-days 365:證書有效期為一年。

-newkey rsa:2048:生成一個新的私鑰,採用的算法是2048位的 RSA。

-keyout:新生成的私鑰文件為當前目錄下的example.key。

-out:新生成的證書文件為當前目錄下的example.crt。


執行後,命令行會跳出一堆問題要你回答,比如你在哪個國家、你的 Email 等等。

其中最重要的一個問題是 Common Name,正常情況下應該填入一個域名,這裡可以填 127.0.0.2。

Common Name (e.g. server FQDN or YOUR name) []:127.0.0.2

回答完問題,當前目錄應該會多出兩個文件:example.key 和 example.crt。

conf 目錄下新建一個子目錄 certs,把這兩個文件放入這個子目錄。

$ mkdir conf/certs$ mv example.crt example.key conf/certs

有了私鑰和證書,就可以打開 Nginx 的 HTTPS 了。

首先,打開 conf/conf.d/default.conf 文件,在結尾添加下面的配置。

server {    listen 443 ssl http2;    server_name  localhost;    ssl                      on;    ssl_certificate          /etc/nginx/certs/example.crt;    ssl_certificate_key      /etc/nginx/certs/example.key;    ssl_session_timeout  5m;    ssl_ciphers HIGH:!aNULL:!MD5;    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;    ssl_prefer_server_ciphers   on;    location / {        root   /usr/share/nginx/html;        index  index.html index.htm;    }}

然後,啟動一個新的 Nginx 容器。

$ docker container run \  --rm \  --name mynginx \  --volume "$PWD/html":/usr/share/nginx/html \  --volume "$PWD/conf":/etc/nginx \  -p 127.0.0.2:8080:80 \  -p 127.0.0.2:8081:443 \  -d \  nginx

上面命令中,不僅映射了容器的 80 埠,還映射了 443 埠,這是 HTTPS 的專用埠。

打開瀏覽器,訪問 https://127.0.0.2:8081/ 。因為使用了自籤名證書,瀏覽器會提示不安全。不要去管它,選擇繼續訪問,應該就可以看到 Hello World 了。

至此,Nginx 容器的 HTTPS 支持就做好了。有了這個容器接下來我們就可以來試驗 HTTP/2 的 Server Push 功能。

HTTP/2 協議的主要目的是提高網頁性能。

頭信息(header)原來是直接傳輸文本,現在是壓縮後傳輸。原來是同一個 TCP 連接裡面,上一個回應(response)發送完了,伺服器才能發送下一個,現在可以多個回應一起發送。

伺服器推送(Server Push)是 HTTP/2 協議裡面,唯一一個需要開發者自己配置的功能。其他功能都是伺服器和瀏覽器自動實現,不需要開發者關心。

下面是一個非常簡單的 HTML 網頁文件index.html。

<!DOCTYPE html><html><head>  <link rel="stylesheet" href="style.css"></head><body>  <h1>hello world</h1>  <img src="example.png"></body></html>

這個網頁包含一張樣式表 style.css 和一個圖片文件 example.png。為了渲染這個網頁,瀏覽器會發出三個請求。第一個請求是 index.html。

GET /index.html HTTP/1.1

伺服器收到這個請求,就把 index.html 發送給瀏覽器。瀏覽器發現裡面包含了樣式表和圖片,於是再發出兩個請求。

GET /style.css HTTP/1.1

GET /example.png HTTP/1.1

這就是傳統的網頁請求方式。它有兩個問題,一是至少需要兩輪 HTTP 通信,二是收到樣式文件之前,網頁都會顯示一片空白,這個階段一旦超過2秒,用戶體驗就會非常不好。

一種解決辦法就是把外部資源合併在網頁文件裡面,減少 HTTP 請求。比如,把樣式表的內容寫在<style> 標籤之中,把圖片改成 Base64 編碼的 Data URL。

另一種方法就是資源的預加載(preload)。網頁預先告訴瀏覽器,立即下載某些資源。比如,上例可以寫成下面這樣。

<link rel="preload" href="/styles.css" as="style"><link rel="preload" href="/example.png" as="image">

對於上例來說,preload 命令並沒有什麼幫助。但是,如果前一個網頁就使用這個命令,預加載後一個網頁需要的資源,那麼用戶打開後一個網頁時,就會感覺速度飛快。

這兩種方法都有缺點。第一種方法雖然減少了 HTTP 請求,但是把不同類型的代碼合併在一個文件裡,違反了分工原則。第二種方法只是提前了下載時間,並沒有減少 HTTP 請求。

伺服器推送(Server Push)指的是,還沒有收到瀏覽器的請求,伺服器就把各種資源推送給瀏覽器。

比如,瀏覽器只請求了 index.html,但是伺服器把 index.html、style.css、example.png 全部發送給瀏覽器。這樣的話,只需要一輪 HTTP 通信,瀏覽器就得到了全部資源,提高了性能。

Nginx 從 1.13.9 版開始,支持伺服器推送。前面我們已經做好了 Nginx 容器,接著就來體驗一下。

首先,進入工作目錄,把原來的首頁刪除。

$ cd nginx-docker-demo$ rm html/index.html

然後,新建 html/index.html 文件,寫入上面的網頁源碼。

另外,html 子目錄下面,還要新建兩個文件 example.png 和 style.css。前者可以隨便找一張 PNG 圖片,後者要在裡面寫一些樣式。

h1 {  color: red;}

最後,打開配置文件 conf/conf.d/default.conf ,將 443 埠的部分改成下面的樣子。

server {    listen 443 ssl http2;    server_name  localhost;    ssl                      on;    ssl_certificate          /etc/nginx/certs/example.crt;    ssl_certificate_key      /etc/nginx/certs/example.key;    ssl_session_timeout  5m;    ssl_ciphers HIGH:!aNULL:!MD5;    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;    ssl_prefer_server_ciphers   on;    location / {      root   /usr/share/nginx/html;      index  index.html index.htm;      http2_push /style.css;      http2_push /example.png;    }}

其實就是最後多了兩行 http2_push 命令。它的意思是,如果用戶請求根路徑 /,就推送style.css 和 example.png。

現在可以啟動容器了。

$ docker container run \  --rm \  --name mynginx \  --volume "$PWD/html":/usr/share/nginx/html \  --volume "$PWD/conf":/etc/nginx \  -p 127.0.0.2:8080:80 \  -p 127.0.0.2:8081:443 \  -d \  nginx

打開瀏覽器,訪問 https://127.0.0.2:8081 。瀏覽器會提示證書不安全,不去管它,繼續訪問,就能看到網頁了。

網頁上看不出來伺服器推送,必須打開 "開發者工具",切換到 Network 面板,就可以看到其實只發出了一次請求,style.css 和 example.png 都是推送過來的。

查看完畢,關閉容器。

$ docker container stop mynginx

Apache 也類似,可以在配置文件 httpd.conf 或者 .htaccess 裡面打開伺服器推送。

<FilesMatch "\index.html$">    Header add Link "</styles.css>; rel=preload; as=style"    Header add Link "</example.png>; rel=preload; as=image"</FilesMatch>

上面的伺服器推送,需要寫在伺服器的配置文件裡面。這顯然很不方便,每次修改都要重啟服務,而且應用與伺服器的配置不應該混在一起。

伺服器推送還有另一個實現方法,就是後端應用產生 HTTP 回應的頭信息 Link 命令。伺服器發現有這個頭信息,就會進行伺服器推送。

Link: </styles.css>; rel=preload; as=style

如果要推送多個資源,就寫成下面這樣。

Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image

可以參考 Go、Node、PHP 的實現範例。

這時,Nginx 的配置改成下面這樣。

server {    listen 443 ssl http2;    # ...    root /var/www/html;    location = / {        proxy_pass http://upstream;        http2_push_preload on;    }}

如果伺服器或者瀏覽器不支持 HTTP/2,那麼瀏覽器就會按照 preload 來處理這個頭信息,預加載指定的資源文件。

事實上,這個頭信息就是 preload 標準提出的,它的語法和 as 屬性的值都寫在了標準裡面。

伺服器推送有一個很麻煩的問題。所要推送的資源文件,如果瀏覽器已經有緩存,推送就是浪費帶寬。即使推送的文件版本更新,瀏覽器也會優先使用本地緩存。

一種解決辦法是,只對第一次訪問的用戶開啟伺服器推送。下面是 Nginx 官方給出的示例,根據 Cookie 判斷是否為第一次訪問。

server {    listen 443 ssl http2 default_server;    ssl_certificate ssl/certificate.pem;    ssl_certificate_key ssl/key.pem;    root /var/www/html;    http2_push_preload on;    location = /demo.html {        add_header Set-Cookie "session=1";        add_header Link $resources;    }}map $http_cookie $resources {    "~*session=1" "";    default "</style.css>; as=style; rel=preload";}

伺服器推送可以提高性能。網上測評的結果是,打開這項功能,比不打開時的 HTTP/2 快了8%,比將資源都嵌入網頁的 HTTP/1 快了5%。

可以看到,提升程度也不是特別多,大概是幾百毫秒。而且,也不建議一次推送太多資源,這樣反而會拖累性能,因為瀏覽器不得不處理所有推送過來的資源。只推送 CSS 樣式表可能是一個比較好的選擇。

Tips for deploying nginx(official image) with docker, by Mario Ponticello

How To Run Nginx in a Docker Container on Ubuntu 14.04, by Thomas Taege

Official Docker Library docs, by Docker

How To Create a Self-Signed SSL Certificate for Nginx in Ubuntu 16.04, by Justin Ellingwood

A Comprehensive Guide To HTTP/2 Server Push,by Jeremy Wagner

Introducing HTTP/2 Server Push with NGINX 1.13.9, by Nginx

來源:阮一峰的網絡日誌

原文:http://t.cn/REW4m8m

題圖:來自谷歌圖片搜索

版權:本文版權歸原作者所有



今日思想


有光的地方就會有陰影,所以有陰影的地方也一定會有光。絕望的顏色越是濃厚,在哪裡也一定會存在耀眼的希望之光。

——銀魂



更多精彩熱文:

相關焦點

  • Nginx 1.13.9:支持HTTP/2伺服器端推送
    ,使用http2_push指令:驗證HTTP/2伺服器端推送你可以用下面兩種方法輕鬆地驗證伺服器端推送生效了:自動推送資源給客戶端很多時候,把需要推送的資源列舉在nginx配置中不是一個很好的做法。因此,Ngnix也支持解析Link預加載響應頭,然後自動推送響應頭中提到的資源。想要開啟預加載,在配置中開啟http2_push_preload指令。
  • 使用code-push-server搭建自己的熱更新伺服器
    如何利用code-push-server設計一款自定義熱更新服務呢。這裡以編者的阿里雲esc作一個詳細的描述。 這裡需要說明的是整個服務搭建用到的技術棧包括如下:1 nginx 分布式發布2 nodejs3 oss存儲配置 步驟1 使用遠程工具登錄阿里雲執行獲取code-push-server命令git clone https://github.com/lisong/code-push-server.git
  • Nginx(五):http反向代理的實現
    這已經讓我們對整個nginx有了較深入的了解,但nginx核心固然重要,但其擴展功能才是其吸引大家的地方。而它的擴展功能又是無窮無盡的,這是好事又是壞事,好事是功能特別多,壞事是我們不可能都能探究其每個模塊。個人覺得,nginx至少有兩大必備的功能:http伺服器(正向代理),http反向代理(服務轉發);所以,既然前面我們弄清了其正向代理的實現,接下就是搬另一座大山的時刻了。
  • nginx實現請求的負載均衡 + keepalived實現nginx的高可用
    nginx做負載均衡keepalived實現nginx高可用(HA)注意點參考前言使用集群是網站解決高並發、海量數據問題的常用手段。摘自《大型網站技術架構_核心原理與案例分析》另外,大家可以看我的這兩篇博客:LVS + keepalived + nginx + tomcat 實現主從熱備 + 負載均衡http://www.cnblogs.com/youzhibing/p/5061786.html和主從熱備+負載均衡(LVS + keepalived)http://www.cnblogs.com/youzhibing
  • Git HTTP Server的實現流程及php實現
    再到後來團隊對於代碼規劃化和文檔規範的需求,我們基於php實現了一套完全自主的Git HTTP Server。Git HTTP Server 第一版早期的Git HTTP Server,由於對nginx的堅持,以及git-http-backend對fastcgi的不支持,我們在中間加了facgiwrap作為粘合劑,結合nginx的basic 驗證,使得整套系統能正常運轉起來。
  • Nginx 超簡單教程
    1.1 什麼是Nginx Nginx是一個高性能的http和反向代理伺服器,其特點是佔用內存小,並發能力強。Nginx專為性能優化而開發,性能是其最重要的考量,能經受高負載的考驗,有報告表明能支持高達50000個並發連接數。1.2 反向代理 正向代理:在瀏覽器中配置代理伺服器,通過代理伺服器進行網際網路訪問。
  • Nginx 伺服器安裝及配置文件詳解
    當前nginx支持的幾個指令上下文:2.1 通用下面的nginx.conf簡單的實現nginx在前端做反向代理伺服器的例子,處理js、png等靜態文件,jsp等動態請求轉發到其它伺服器tomcat:12345678910
  • Nginx+SpringBoot實現負載均衡
    2.Least Connections:以最少的活動連接數將請求發送到伺服器,同樣要考慮伺服器權重。upstream xuwujing {least_time header;server www.panchengming.com;server www.panchengming2.com;}6.Random:每個請求將被傳遞到隨機選擇的伺服器。
  • Docker(二)-在Docker中部署Nginx實現負載均衡【完整教程】
    修改本地配置文件nginx.conf編輯nginx.conf文件,在http節點內添加以下內容,並保存server {    listen       80;    server_name  localhost; location / {         root   /usr/share
  • Nginx + Spring Boot 實現負載均衡
    2.Least Connections:以最少的活動連接數將請求發送到伺服器,同樣要考慮伺服器權重。upstream xuwujing { random two least_time=last_byte; server www.panchengming.com; server www.panchengming2.com;}Nginx+SpringBoot 實現負載均衡
  • Nginx 快速極簡入門教程
    nginx.exe -c conf/nginx.conf如果是運行在 Linux 下,寫一個 shell 腳本,大同小異。Http 反向代理我們先實現一個小目標:不考慮複雜的配置,僅僅是完成一個 http 反向代理。nginx.conf 配置文件如下:註:conf/nginx.conf 是 nginx 的默認配置文件。
  • Nginx 從入門到實戰,看這篇夠了!
    nginx 的 http 服務,在配置文件 nginx.conf 中的 http 區域內,配置無數個 server ,每一個 server 對應這一個虛擬主機或者域名http {    ... ...使用nginx靜態資源回源,分發給北京的資源存儲中心,讓用戶請求的動態定位到北京的資源存儲中心請求,實現傳輸延遲的最小化配置域:http、server、location#文件高速讀取http {     sendfile on;
  • NGINX Plus 現在完全支持 HTTP/2
    只需要一點改變,不管用戶選擇什麼樣的瀏覽器,NGINX Plus 都能為用戶同時提供 HTTP/1.x 與HTTP/2 的最佳體驗。要支持 HTTP/2 僅需通過可選的 nginx‑plus‑http2 軟體包。
  • 超實用的 Nginx 極簡教程
    nginx.exe -c conf/nginx.conf複製代碼如果是運行在 Linux 下,寫一個 shell 腳本,大同小異。nginx 配置實戰我始終認為,各種開發工具的配置還是結合實戰來講述,會讓人更易理解。http 反向代理配置我們先實現一個小目標:不考慮複雜的配置,僅僅是完成一個 http 反向代理。nginx.conf 配置文件如下:註:conf / nginx.conf 是 nginx 的默認配置文件。
  • CentOS利用Nginx搭建下載功能伺服器
    利用nginx在伺服器搭建下載功能,安裝Nginx,pcremkdir /usr/local/nginx
  • 雲主機搭建Nginx + RTMP直播推流伺服器
    (你可以改為rtmp://115.28.135.68:1935/yuzhouheike/hades)提前申明 直播推流的方式有很多.網上也能搜出不少教程.3D1641D8-26D5-4F78-A139-6F337FC6D289.png4A938875-F940-401E-9BEE-A66CC981A587.png這個名字決定了你的直播推流伺服器的路徑
  • Nginx入門級教程 | 知識點詳解(內附視頻)
    代理是在伺服器和客戶端之間假設的一層伺服器,代理將接收客戶端的請求並將它轉發給伺服器,然後將服務端的響應轉發給客戶端。不管是正向代理還是反向代理,實現的都是上面的功能。如果你對OSI 七層模型與 TCP/IP 四層模型不是很熟悉可以再回顧下
  • 使用Nginx+Nginx-RTMP-Module+OBS推流搭建流媒體伺服器
    當git下載Nginx失敗時可以去官網下載後放到伺服器Nginx的官方網站為:http://nginx.org/en/download.html下載依賴模塊源碼pcre、OpenSSL、zlib 如果機器上已經安裝了這些模塊就不需要了wget https://www.openssl.org/source/openssl-
  • Nginx如何優雅的實現負載均衡!(建議收藏)
    2.Least Connections:以最少的活動連接數將請求發送到伺服器,同樣要考慮伺服器權重。upstream xuwujing {least_time header;server www.panchengming.com;server www.panchengming2.com;}6.Random:每個請求將被傳遞到隨機選擇的伺服器。
  • Nginx 極簡教程(快速入門)
    多線程內容聚合Nginx 極簡教程本項目是一個 Nginx 極簡教程,目的在於幫助新手快速入門 Nginx。nginx.exe -c conf/nginx.conf如果是運行在 Linux 下,寫一個 shell 腳本,大同小異。