Nginx配置Server Push

本文介绍在Nginx上配置Server Push

一、Server Push的优点

Server Push可以让服务器通过指定的配置,在访问某些资源时(如页面主文件index.html等),主动推送该页面需要用到的资源(如公共css、js等),浏览器会将资源缓存下来,当页面需要这些资源时,浏览器不会再向服务器发送请求,直接用之前服务器推送来的资源,可以节省再次请求的时间开销。

二、配置前提
1. Nginx版本:>=1.13.9
2. Nginx编译:需要增加–with-http_v2_module参数,以支持HTTP2
3. https证书:HTTP2需要使用https协议,所以需要一个https证书(测试可以用自签名证书)
4. openssl版本:>=1.0.2

三、配置步骤
1. 获取证书
自签名证书生成参考:https://blog.lyz810.com/article/2016/11/generate-certificate-for-nginx-with-openssl/
使用Let’s Encrypt证书参考:
nginx服务器使用acme.sh申请Let’s Encrypt泛域名证书

在CentOS7上的nginx中部署Let’s Encrypt免费证书

2. 配置HTTP2

server {
    listen 443 ssl http2;

    ssl_certificate server.crt;
    ssl_certificate_key server.key;
}

其中server.crt是服务器的证书,server.key为服务器的私钥

3. 配置Server Push

location =/index.html {
    http2_push /css/common.css?ver=1.0;
    http2_push /js/common.js?ver=1.0;
}

说明:
http2_push后面是url的是需要推送的资源,注意需要与主文档(index.html)中引用的url保持一致,例如引用时带了queryString作为版本号,此处配置也要配成一样的,否则是不会推送该文件的。
上面示例中,访问页面index.html时会推送相关的css和js文件,当index.html中通过script、link标签引用js和css文件时,会直接从缓存中读出来,而不必再次发起请求。
默认配置中,http2_max_concurrent_pushes的值为10,表示一个连接最多推送10个文件,可以更改这个值以一次推送更多的文件。
这个指令需要配置在serverhttp的上下文中。

4. 验证配置
配置好并重启nginx后,可使用Chrome访问站点的主页面,此时查看控制台Network下被推送的文件

图中可以看到推送的文件访问速度非常快,因为不需要再向服务器发送请求,服务器之前已经在第一个请求中把指定的文件推送过来,这里匹配了推送的url直接读取的数据,所以速度很快,而没有配置推送的资源访问速度就比较慢(本站服务器位于境外,故国内直接访问速度比较慢,国内外分别配置了CDN服务,所以正常用户访问本站是看不到Server Push的,需要访问源站才可以)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You must enable javascript to see captcha here!