全网最详细的docker配置nginx http2 优化高速访问
Nginx 從 1.13.9 版本開(kāi)始加入了 HTTP/2 的 Server Push 功能，本文將介紹如何在 Nginx 下實(shí)現(xiàn) HTTP/2 服務(wù)器推送 (Server Push) 。這里我們首先用 Docker 搭建一個(gè)支持 HTTP/2 的 Server Push 功能的 Nginx 容器并加入 SSL 證書。如果你還不會(huì) Docker，可以先看 「Docker 入門教程」，非常簡(jiǎn)單。
一、HTTP 服務(wù)
Nginx 的最大作用，就是搭建一個(gè) Web Server。有了容器，只要一行命令，服務(wù)器就架設(shè)好了，完全不用配置。
| 1 2 3 4 5 6 | $ docker container run \-d \-p 127.0.0.2:8080:80 \--rm \--name mynginx \nginx |
上面命令下載并運(yùn)行官方的 Nginx image，默認(rèn)是最新版本（latest），當(dāng)前是 1.13.9。如果本機(jī)安裝過(guò)以前的版本，請(qǐng)刪掉重新安裝，因?yàn)橹挥?1.13.9 才開(kāi)始支持 server push。
上面命令的各個(gè)參數(shù)含義如下。
- -d：在后臺(tái)運(yùn)行
- -p ：容器的80端口映射到127.0.0.2:8080
- –rm：容器停止運(yùn)行后，自動(dòng)刪除容器文件
- –name：容器的名字為mynginx
如果沒(méi)有報(bào)錯(cuò)，就可以打開(kāi)瀏覽器訪問(wèn) 127.0.0.2:8080 了。正常情況下，顯示 Nginx 的歡迎頁(yè)。
然后，把這個(gè)容器終止，由于?--rm?參數(shù)的作用，容器文件會(huì)自動(dòng)刪除。
| 1 | $ docker container stop mynginx |
二、映射網(wǎng)頁(yè)目錄
網(wǎng)頁(yè)文件都在容器里，沒(méi)法直接修改，顯然很不方便。下一步就是讓網(wǎng)頁(yè)文件所在的目錄/usr/share/nginx/html?映射到本地。
首先，新建一個(gè)目錄，并進(jìn)入該目錄。
| 1 2 | $ mkdir nginx-docker-demo $ cd nginx-docker-demo |
然后，新建一個(gè)html子目錄。
| 1 | $ mkdir html |
在這個(gè)子目錄里面，放置一個(gè)index.html文件，內(nèi)容如下。
| 1 | <h1>Hello World</h1> |
接著，就可以把這個(gè)子目錄?html，映射到容器的網(wǎng)頁(yè)文件目錄?/usr/share/nginx/html。
| 1 2 3 4 5 6 7 | $ docker container run \-d \-p 127.0.0.2:8080:80 \--rm \--name mynginx \--volume "$PWD/html":/usr/share/nginx/html \nginx |
打開(kāi)瀏覽器，訪問(wèn) 127.0.0.2:8080，應(yīng)該就能看到 Hello World 了。
三、拷貝配置
修改網(wǎng)頁(yè)文件還不夠，還要修改 Nginx 的配置文件，否則后面沒(méi)法加 SSL 支持。
首先，把容器里面的 Nginx 配置文件拷貝到本地。
| 1 | $ docker container cp mynginx:/etc/nginx . |
上面命令的含義是，把?mynginx?容器的?/etc/nginx?拷貝到當(dāng)前目錄。不要漏掉最后那個(gè)點(diǎn)。
執(zhí)行完成后，當(dāng)前目錄應(yīng)該多出一個(gè)?nginx?子目錄。然后把這個(gè)子目錄改名為?conf。
| 1 | $ mv nginx conf |
現(xiàn)在可以把容器終止了。
| 1 | $ docker container stop mynginx |
四、映射配置目錄
重新啟動(dòng)一個(gè)新的容器，這次不僅映射網(wǎng)頁(yè)目錄，還要映射配置目錄。
| 1 2 3 4 5 6 7 8 | $ 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?子目錄。
瀏覽器訪問(wèn) 127.0.0.2:8080，如果能夠看到網(wǎng)頁(yè)，就說(shuō)明本地的配置生效了。這時(shí)，可以把這個(gè)容器終止。
| 1 | $ docker container stop mynginx |
五、自簽名證書
現(xiàn)在要為容器加入 HTTPS 支持，第一件事就是生成私鑰和證書。正式的證書需要證書當(dāng)局（CA）的簽名，這里是為了測(cè)試，搞一張自簽名（self-signed）證書就可以了。
下面，我參考的是?DigitalOcean?的教程。首先，確定你的機(jī)器安裝了 OpenSSL，然后執(zhí)行下面的命令。
| 1 2 3 4 5 6 7 | $ sudo openssl req \-x509 \-nodes \-days 365 \-newkey rsa:2048 \-keyout example.key \-out example.crt |
上面命令的各個(gè)參數(shù)含義如下。
- req：處理證書簽署請(qǐng)求。
- -x509：生成自簽名證書。
- -nodes：跳過(guò)為證書設(shè)置密碼的階段，這樣 Nginx 才可以直接打開(kāi)證書。
- -days 365：證書有效期為一年。
- -newkey rsa:2048：生成一個(gè)新的私鑰，采用的算法是2048位的 RSA。
- -keyout：新生成的私鑰文件為當(dāng)前目錄下的example.key。
- -out：新生成的證書文件為當(dāng)前目錄下的example.crt。
執(zhí)行后，命令行會(huì)跳出一堆問(wèn)題要你回答，比如你在哪個(gè)國(guó)家、你的 Email 等等。
其中最重要的一個(gè)問(wèn)題是 Common Name，正常情況下應(yīng)該填入一個(gè)域名，這里可以填 127.0.0.2。
| 1 | Common Name (e.g. server FQDN or YOUR name) []:127.0.0.2 |
回答完問(wèn)題，當(dāng)前目錄應(yīng)該會(huì)多出兩個(gè)文件：example.key?和?example.crt。
conf?目錄下新建一個(gè)子目錄?certs，把這兩個(gè)文件放入這個(gè)子目錄。
| 1 2 | $ mkdir conf/certs $ mv example.crt example.key conf/certs |
六、HTTPS 配置
有了私鑰和證書，就可以打開(kāi) Nginx 的 HTTPS 了。
首先，打開(kāi)?conf/conf.d/default.conf?文件，在結(jié)尾添加下面的配置。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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;} } |
然后，啟動(dòng)一個(gè)新的 Nginx 容器。
| 1 2 3 4 5 6 7 8 9 | $ 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 的專用端口。
打開(kāi)瀏覽器，訪問(wèn)?https://127.0.0.2:8081/?。因?yàn)槭褂昧俗院灻C書，瀏覽器會(huì)提示不安全。不要去管它，選擇繼續(xù)訪問(wèn)，應(yīng)該就可以看到 Hello World 了。
至此，Nginx 容器的 HTTPS 支持就做好了。有了這個(gè)容器接下來(lái)我們就可以來(lái)試驗(yàn) HTTP/2 的 Server Push 功能。
七、HTTP/2 服務(wù)器推送的原理
HTTP/2 協(xié)議的主要目的是提高網(wǎng)頁(yè)性能。
頭信息（header）原來(lái)是直接傳輸文本，現(xiàn)在是壓縮后傳輸。原來(lái)是同一個(gè) TCP 連接里面，上一個(gè)回應(yīng)（response）發(fā)送完了，服務(wù)器才能發(fā)送下一個(gè)，現(xiàn)在可以多個(gè)回應(yīng)一起發(fā)送。
服務(wù)器推送（Server Push）是 HTTP/2 協(xié)議里面，唯一一個(gè)需要開(kāi)發(fā)者自己配置的功能。其他功能都是服務(wù)器和瀏覽器自動(dòng)實(shí)現(xiàn)，不需要開(kāi)發(fā)者關(guān)心。
7.1 傳統(tǒng)的網(wǎng)頁(yè)請(qǐng)求方式
下面是一個(gè)非常簡(jiǎn)單的 HTML 網(wǎng)頁(yè)文件index.html。
| 1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head><link rel="stylesheet" href="style.css"> </head> <body><h1>hello world</h1><img src="example.png"> </body> </html> |
這個(gè)網(wǎng)頁(yè)包含一張樣式表?style.css?和一個(gè)圖片文件?example.png。為了渲染這個(gè)網(wǎng)頁(yè)，瀏覽器會(huì)發(fā)出三個(gè)請(qǐng)求。第一個(gè)請(qǐng)求是?index.html。
| 1 | GET /index.html HTTP/1.1 |
服務(wù)器收到這個(gè)請(qǐng)求，就把?index.html?發(fā)送給瀏覽器。瀏覽器發(fā)現(xiàn)里面包含了樣式表和圖片，于是再發(fā)出兩個(gè)請(qǐng)求。
| 1 | GET /style.css HTTP/1.1 |
| 1 | GET /example.png HTTP/1.1 |
這就是傳統(tǒng)的網(wǎng)頁(yè)請(qǐng)求方式。它有兩個(gè)問(wèn)題，一是至少需要兩輪 HTTP 通信，二是收到樣式文件之前，網(wǎng)頁(yè)都會(huì)顯示一片空白，這個(gè)階段一旦超過(guò)2秒，用戶體驗(yàn)就會(huì)非常不好。
7.2 傳統(tǒng)方式的改進(jìn)
一種解決辦法就是把外部資源合并在網(wǎng)頁(yè)文件里面，減少 HTTP 請(qǐng)求。比如，把樣式表的內(nèi)容寫在<style>?標(biāo)簽之中，把圖片改成 Base64 編碼的?Data URL。
另一種方法就是資源的預(yù)加載（preload）。網(wǎng)頁(yè)預(yù)先告訴瀏覽器，立即下載某些資源。比如，上例可以寫成下面這樣。
| 1 2 | <link rel="preload" href="/styles.css" as="style"> <link rel="preload" href="/example.png" as="image"> |
對(duì)于上例來(lái)說(shuō)，preload?命令并沒(méi)有什么幫助。但是，如果前一個(gè)網(wǎng)頁(yè)就使用這個(gè)命令，預(yù)加載后一個(gè)網(wǎng)頁(yè)需要的資源，那么用戶打開(kāi)后一個(gè)網(wǎng)頁(yè)時(shí)，就會(huì)感覺(jué)速度飛快。
這兩種方法都有缺點(diǎn)。第一種方法雖然減少了 HTTP 請(qǐng)求，但是把不同類型的代碼合并在一個(gè)文件里，違反了分工原則。第二種方法只是提前了下載時(shí)間，并沒(méi)有減少 HTTP 請(qǐng)求。
7.3 服務(wù)器推送的概念
服務(wù)器推送（Server Push）指的是，還沒(méi)有收到瀏覽器的請(qǐng)求，服務(wù)器就把各種資源推送給瀏覽器。
比如，瀏覽器只請(qǐng)求了?index.html，但是服務(wù)器把?index.html、style.css、example.png?全部發(fā)送給瀏覽器。這樣的話，只需要一輪 HTTP 通信，瀏覽器就得到了全部資源，提高了性能。
八、配置 Nginx 實(shí)現(xiàn) Server Push
Nginx 從 1.13.9 版開(kāi)始，支持服務(wù)器推送。前面我們已經(jīng)做好了 Nginx 容器，接著就來(lái)體驗(yàn)一下。
首先，進(jìn)入工作目錄，把原來(lái)的首頁(yè)刪除。
| 1 2 | $ cd nginx-docker-demo $ rm html/index.html |
然后，新建?html/index.html?文件，寫入上面的網(wǎng)頁(yè)源碼。
另外，html?子目錄下面，還要新建兩個(gè)文件?example.png?和?style.css。前者可以隨便找一張 PNG 圖片，后者要在里面寫一些樣式。
| 1 2 3 | h1 {color: red; } |
最后，打開(kāi)配置文件?conf/conf.d/default.conf?，將 443 端口的部分改成下面的樣子。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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;} } |
其實(shí)就是最后多了兩行?http2_push?命令。它的意思是，如果用戶請(qǐng)求根路徑?/，就推送style.css?和?example.png。
現(xiàn)在可以啟動(dòng)容器了。
| 1 2 3 4 5 6 7 8 9 | $ 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 |
打開(kāi)瀏覽器，訪問(wèn)?https://127.0.0.2:8081?。瀏覽器會(huì)提示證書不安全，不去管它，繼續(xù)訪問(wèn)，就能看到網(wǎng)頁(yè)了。
網(wǎng)頁(yè)上看不出來(lái)服務(wù)器推送，必須打開(kāi) “開(kāi)發(fā)者工具”，切換到 Network 面板，就可以看到其實(shí)只發(fā)出了一次請(qǐng)求，style.css?和?example.png?都是推送過(guò)來(lái)的。
查看完畢，關(guān)閉容器。
| 1 | $ docker container stop mynginx |
九、配置 Apache 實(shí)現(xiàn) Server Push
Apache 也類似，可以在配置文件?httpd.conf?或者?.htaccess?里面打開(kāi)服務(wù)器推送。
| 1 2 3 4 | <FilesMatch "\index.html$">Header add Link "</styles.css>; rel=preload; as=style"Header add Link "</example.png>; rel=preload; as=image" </FilesMatch> |
十、后端實(shí)現(xiàn)
上面的服務(wù)器推送，需要寫在服務(wù)器的配置文件里面。這顯然很不方便，每次修改都要重啟服務(wù)，而且應(yīng)用與服務(wù)器的配置不應(yīng)該混在一起。
服務(wù)器推送還有另一個(gè)實(shí)現(xiàn)方法，就是后端應(yīng)用產(chǎn)生 HTTP 回應(yīng)的頭信息?Link?命令。服務(wù)器發(fā)現(xiàn)有這個(gè)頭信息，就會(huì)進(jìn)行服務(wù)器推送。
| 1 | Link: </styles.css>; rel=preload; as=style |
如果要推送多個(gè)資源，就寫成下面這樣。
| 1 | Link: </styles.css>; rel=preload; as=style, </example.png>; rel=preload; as=image |
可以參考?Go、Node、PHP?的實(shí)現(xiàn)范例。
這時(shí)，Nginx 的配置改成下面這樣。
| 1 2 3 4 5 6 7 8 9 10 11 12 | server {listen 443 ssl http2;# ...root /var/www/html;location = / {proxy_pass http://upstream;http2_push_preload on;} } |
如果服務(wù)器或者瀏覽器不支持 HTTP/2，那么瀏覽器就會(huì)按照 preload 來(lái)處理這個(gè)頭信息，預(yù)加載指定的資源文件。
事實(shí)上，這個(gè)頭信息就是 preload 標(biāo)準(zhǔn)提出的，它的語(yǔ)法和?as?屬性的值都寫在了標(biāo)準(zhǔn)里面。
十一、緩存問(wèn)題
服務(wù)器推送有一個(gè)很麻煩的問(wèn)題。所要推送的資源文件，如果瀏覽器已經(jīng)有緩存，推送就是浪費(fèi)帶寬。即使推送的文件版本更新，瀏覽器也會(huì)優(yōu)先使用本地緩存。
一種解決辦法是，只對(duì)第一次訪問(wèn)的用戶開(kāi)啟服務(wù)器推送。下面是 Nginx 官方給出的示例，根據(jù) Cookie 判斷是否為第一次訪問(wèn)。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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"; } |
十二、性能提升
服務(wù)器推送可以提高性能。網(wǎng)上測(cè)評(píng)的結(jié)果是，打開(kāi)這項(xiàng)功能，比不打開(kāi)時(shí)的 HTTP/2 快了8%，比將資源都嵌入網(wǎng)頁(yè)的 HTTP/1 快了5%。
可以看到，提升程度也不是特別多，大概是幾百毫秒。而且，也不建議一次推送太多資源，這樣反而會(huì)拖累性能，因?yàn)闉g覽器不得不處理所有推送過(guò)來(lái)的資源。只推送 CSS 樣式表可能是一個(gè)比較好的選擇。
十三、參考鏈接
- 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
總結(jié)
以上是生活随笔為你收集整理的全网最详细的docker配置nginx http2 优化高速访问的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Linux新建用户可以在shell中切换
- 下一篇： PyCharm PyQt5创建主窗口源代