福州网站制作费用,广东省建设厅官方网站,顺德网站建设公司价位,沈阳网站排名seoNginx 从 1.13.9 版本开始加入了 HTTP/2 的 Server Push 功能#xff0c;本文将介绍如何在 Nginx 下实现 HTTP/2 服务器推送 (Server Push) 。这里我们首先用 Docker 搭建一个支持 HTTP/2 的 Server Push 功能的 Nginx 容器并加入 SSL 证书。如果你还不会 Docker#xff0c;可…Nginx 从 1.13.9 版本开始加入了 HTTP/2 的 Server Push 功能本文将介绍如何在 Nginx 下实现 HTTP/2 服务器推送 (Server Push) 。这里我们首先用 Docker 搭建一个支持 HTTP/2 的 Server Push 功能的 Nginx 容器并加入 SSL 证书。如果你还不会 Docker可以先看 「Docker 入门教程」非常简单。
一、HTTP 服务
Nginx 的最大作用就是搭建一个 Web Server。有了容器只要一行命令服务器就架设好了完全不用配置。 1
2
3
4
5
6$ 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。 上面命令的各个参数含义如下。
-d在后台运行-p 容器的80端口映射到127.0.0.2:8080–rm容器停止运行后自动删除容器文件–name容器的名字为mynginx
如果没有报错就可以打开浏览器访问 127.0.0.2:8080 了。正常情况下显示 Nginx 的欢迎页。 然后把这个容器终止由于 --rm 参数的作用容器文件会自动删除。 1$ docker container stop mynginx二、映射网页目录
网页文件都在容器里没法直接修改显然很不方便。下一步就是让网页文件所在的目录/usr/share/nginx/html 映射到本地。
首先新建一个目录并进入该目录。 1
2$ mkdir nginx-docker-demo
$ cd nginx-docker-demo然后新建一个html子目录。 1$ mkdir html在这个子目录里面放置一个index.html文件内容如下。 1h1Hello World/h1接着就可以把这个子目录 html映射到容器的网页文件目录 /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打开浏览器访问 127.0.0.2:8080应该就能看到 Hello World 了。
三、拷贝配置
修改网页文件还不够还要修改 Nginx 的配置文件否则后面没法加 SSL 支持。
首先把容器里面的 Nginx 配置文件拷贝到本地。 1$ docker container cp mynginx:/etc/nginx .上面命令的含义是把 mynginx 容器的 /etc/nginx 拷贝到当前目录。不要漏掉最后那个点。
执行完成后当前目录应该多出一个 nginx 子目录。然后把这个子目录改名为 conf。 1$ mv nginx conf现在可以把容器终止了。 1$ docker container stop mynginx四、映射配置目录
重新启动一个新的容器这次不仅映射网页目录还要映射配置目录。 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 子目录。
浏览器访问 127.0.0.2:8080如果能够看到网页就说明本地的配置生效了。这时可以把这个容器终止。 1$ docker container stop mynginx五、自签名证书
现在要为容器加入 HTTPS 支持第一件事就是生成私钥和证书。正式的证书需要证书当局CA的签名这里是为了测试搞一张自签名self-signed证书就可以了。
下面我参考的是 DigitalOcean 的教程。首先确定你的机器安装了 OpenSSL然后执行下面的命令。 1
2
3
4
5
6
7$ 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。 1Common Name (e.g. server FQDN or YOUR name) []:127.0.0.2回答完问题当前目录应该会多出两个文件example.key 和 example.crt。
conf 目录下新建一个子目录 certs把这两个文件放入这个子目录。 1
2$ mkdir conf/certs
$ mv example.crt example.key conf/certs六、HTTPS 配置
有了私钥和证书就可以打开 Nginx 的 HTTPS 了。
首先打开 conf/conf.d/default.conf 文件在结尾添加下面的配置。 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19server {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 容器。 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 的专用端口。
打开浏览器访问 https://127.0.0.2:8081/ 。因为使用了自签名证书浏览器会提示不安全。不要去管它选择继续访问应该就可以看到 Hello World 了。
至此Nginx 容器的 HTTPS 支持就做好了。有了这个容器接下来我们就可以来试验 HTTP/2 的 Server Push 功能。
七、HTTP/2 服务器推送的原理
HTTP/2 协议的主要目的是提高网页性能。
头信息header原来是直接传输文本现在是压缩后传输。原来是同一个 TCP 连接里面上一个回应response发送完了服务器才能发送下一个现在可以多个回应一起发送。
服务器推送Server Push是 HTTP/2 协议里面唯一一个需要开发者自己配置的功能。其他功能都是服务器和浏览器自动实现不需要开发者关心。 7.1 传统的网页请求方式
下面是一个非常简单的 HTML 网页文件index.html。 1
2
3
4
5
6
7
8
9
10!DOCTYPE html
html
headlink relstylesheet hrefstyle.css
/head
bodyh1hello world/h1img srcexample.png
/body
/html这个网页包含一张样式表 style.css 和一个图片文件 example.png。为了渲染这个网页浏览器会发出三个请求。第一个请求是 index.html。 1GET /index.html HTTP/1.1服务器收到这个请求就把 index.html 发送给浏览器。浏览器发现里面包含了样式表和图片于是再发出两个请求。 1GET /style.css HTTP/1.11GET /example.png HTTP/1.1这就是传统的网页请求方式。它有两个问题一是至少需要两轮 HTTP 通信二是收到样式文件之前网页都会显示一片空白这个阶段一旦超过2秒用户体验就会非常不好。
7.2 传统方式的改进
一种解决办法就是把外部资源合并在网页文件里面减少 HTTP 请求。比如把样式表的内容写在style 标签之中把图片改成 Base64 编码的 Data URL。
另一种方法就是资源的预加载preload。网页预先告诉浏览器立即下载某些资源。比如上例可以写成下面这样。 1
2link relpreload href/styles.css asstyle
link relpreload href/example.png asimage对于上例来说preload 命令并没有什么帮助。但是如果前一个网页就使用这个命令预加载后一个网页需要的资源那么用户打开后一个网页时就会感觉速度飞快。
这两种方法都有缺点。第一种方法虽然减少了 HTTP 请求但是把不同类型的代码合并在一个文件里违反了分工原则。第二种方法只是提前了下载时间并没有减少 HTTP 请求。
7.3 服务器推送的概念
服务器推送Server Push指的是还没有收到浏览器的请求服务器就把各种资源推送给浏览器。
比如浏览器只请求了 index.html但是服务器把 index.html、style.css、example.png 全部发送给浏览器。这样的话只需要一轮 HTTP 通信浏览器就得到了全部资源提高了性能。
八、配置 Nginx 实现 Server Push
Nginx 从 1.13.9 版开始支持服务器推送。前面我们已经做好了 Nginx 容器接着就来体验一下。
首先进入工作目录把原来的首页删除。 1
2$ cd nginx-docker-demo
$ rm html/index.html然后新建 html/index.html 文件写入上面的网页源码。
另外html 子目录下面还要新建两个文件 example.png 和 style.css。前者可以随便找一张 PNG 图片后者要在里面写一些样式。 1
2
3h1 {color: red;
}最后打开配置文件 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
21server {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。
现在可以启动容器了。 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打开浏览器访问 https://127.0.0.2:8081 。浏览器会提示证书不安全不去管它继续访问就能看到网页了。
网页上看不出来服务器推送必须打开 “开发者工具”切换到 Network 面板就可以看到其实只发出了一次请求style.css 和 example.png 都是推送过来的。 查看完毕关闭容器。 1$ docker container stop mynginx九、配置 Apache 实现 Server Push
Apache 也类似可以在配置文件 httpd.conf 或者 .htaccess 里面打开服务器推送。 1
2
3
4FilesMatch \index.html$Header add Link /styles.css; relpreload; asstyleHeader add Link /example.png; relpreload; asimage
/FilesMatch十、后端实现
上面的服务器推送需要写在服务器的配置文件里面。这显然很不方便每次修改都要重启服务而且应用与服务器的配置不应该混在一起。
服务器推送还有另一个实现方法就是后端应用产生 HTTP 回应的头信息 Link 命令。服务器发现有这个头信息就会进行服务器推送。 1Link: /styles.css; relpreload; asstyle如果要推送多个资源就写成下面这样。 1Link: /styles.css; relpreload; asstyle, /example.png; relpreload; asimage可以参考 Go、Node、PHP 的实现范例。
这时Nginx 的配置改成下面这样。 1
2
3
4
5
6
7
8
9
10
11
12server {listen 443 ssl http2;# ...root /var/www/html;location / {proxy_pass http://upstream;http2_push_preload on;}
}如果服务器或者浏览器不支持 HTTP/2那么浏览器就会按照 preload 来处理这个头信息预加载指定的资源文件。
事实上这个头信息就是 preload 标准提出的它的语法和 as 属性的值都写在了标准里面。
十一、缓存问题
服务器推送有一个很麻烦的问题。所要推送的资源文件如果浏览器已经有缓存推送就是浪费带宽。即使推送的文件版本更新浏览器也会优先使用本地缓存。
一种解决办法是只对第一次访问的用户开启服务器推送。下面是 Nginx 官方给出的示例根据 Cookie 判断是否为第一次访问。 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20server {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 session1;add_header Link $resources;}
}map $http_cookie $resources {~*session1 ;default /style.css; asstyle; relpreload;
}十二、性能提升
服务器推送可以提高性能。网上测评的结果是打开这项功能比不打开时的 HTTP/2 快了8%比将资源都嵌入网页的 HTTP/1 快了5%。 可以看到提升程度也不是特别多大概是几百毫秒。而且也不建议一次推送太多资源这样反而会拖累性能因为浏览器不得不处理所有推送过来的资源。只推送 CSS 样式表可能是一个比较好的选择。
十三、参考链接
Tips for deploying nginx(official image) with docker, by Mario PonticelloHow To Run Nginx in a Docker Container on Ubuntu 14.04, by Thomas TaegeOfficial Docker Library docs, by DockerHow To Create a Self-Signed SSL Certificate for Nginx in Ubuntu 16.04, by Justin EllingwoodA Comprehensive Guide To HTTP/2 Server Pushby Jeremy WagnerIntroducing HTTP/2 Server Push with NGINX 1.13.9, by Nginx
