nginx如何配置HTTP/2服务器推送(Server Push)
Author：zhoulujun Date：
先安利下基础课：
下面是内容总结：
Nginx开启http2推送
Nginx开启http2前提条件
必须配置https证书，RFC并用规定HTTP2一定要用https2，但是目前的浏览器都要求必须配备https
nginx必须1.13.9以上
nginx编译必须加上 ngx_http2_v2_module模块，可用nginx -V 查看模块情况
OpenSSL 必须1.0.2版本以上，可用openssl version 查看OpenSSL版本情况
nginx开启http2
server {
# listen在原https配置文件基础上添加http2
listen 443 ssl http2;
}这样，就开启http2了。浏览器请求会显示h2
nginx开启server push
服务端写死静态推送
location / {
root /usr/share/nginx/html;
index index.html index.htm;
http2_push /style.css;
http2_push /example.png;
}这种方法，更不无法用。因为页面内容不可能全部写死的
客服端标志推送
server {
# listen在原https配置文件基础上添加http2
listen 443 ssl http2;
# 添加一句http2_push_preload on表示开启server push功能
http2_push_preload on;
}这样，服务端就可以开启推送能力，然后让客户端告知nginx 需要推送那些资源。
标识依赖资源
W3C候选推荐标准（https://www.w3.org/TR/preload/）建议了依赖资源的两种做法：文件内<link>标签和HTTP头部携带, 表示该资源后续会被使用, 可以预请求, 关键字preload修饰这个资源, 写法如下：
a) 静态Link标签法:
<link rel="preload" href="push.css" as="style">
<link rel="preload" href="/push.css" as="style"> <link rel="preload" href="/push.js" as="script"> <link rel="preload" href="/push.png" as="image"> <link rel="preload" href="https://fonts.example.com/push.woff2" as="style" type="font/woff2" crossorigin="true">
这个适合在webpack 打包时候使用。
b) HTTP头表示法：
Link: <push.css>; rel=preload; as=style
其中rel表明了资源</push.css>是预加载的，as表明了资源的文件类型。另外，link还可以用nopush修饰，表示浏览器可能已经有该资源缓存，指示有推送能力的服务端不主动推送资源，只有当浏览器先检查到没有缓存，才去指示服务端推送资源，nopush格式写成：
Link: </app/push.js>; rel=preload; as=script;nopush link: </push.css>; rel=preload; as=style link: </push.png>; rel=preload; as=image
当然，也可以吧link合并起来
<?php
header('link: </styles.css>; rel=preload; as=style, </script.js>; rel=preload; as=script, </example.png>; rel=preload; as=image, <https://fonts.example.com/font.woff2>; rel=preload; as=font; crossorigin; type="font/woff2"', false);这个适合在后端做
转载本站文章《nginx如何配置HTTP/2服务器推送(Server Push)》,
请注明出处：https://www.zhoulujun.cn/html/tools/webServer/nginx/2021_0817_8663.html