引言
HTTP/2 目前已经逐渐推广开来,很多站点都开始迁移至 HTTP/2 ,比如 https://v.qq.com/ 或者 https://www.google.com.hk/ 都启用了 HTTP/2;
我们可以先看下浏览器的支持情况:
HTTP/2 相对 HTTP1 带来了诸多特性;
- 多路复用 (Multiplexing)
- 头部压缩
- 服务端推送
- HTTP/2 采用二进制格式而非文本格式
这些好处无疑对提升 Web 性能有很大的帮助,不过还是建议详细阅读 HTTP/2:新的机遇与挑战 了解这背后究竟发生了什么;本文不详细讨论 HTTP/2 的具体特性和实现,更多提供升级实践。
升级 Nginx
机器环境,亚马逊的 EC2 和 ubuntu 系统;
确保你的 Nginx 版本是 > 1.9.5
如果没有的话,可以先自行升级 nginx (你也可以尝试其他的 nginx repository,自己用的是 ppa:ondrej/nginx)。
sudo add-apt-repository -y ppa:rtcamp/nginx
sudo apt-get update
sudo apt-get install nginx
如果你 Ubuntu 系统版本过低你可以先升级你的系统; AWS 升级可以通过:
sudo do-release-upgrade
完成;
修改 Nginx 配置
sudo vim /etc/nginx/sites-available/your_domain
添加 443 端口的监听然后增加 http2 模块;
listen [::]:443 ssl http2 ipv6only=on;
listen 443 ssl http2;
记住 http2 是建立在 https 基础上的,所以你必须先有申请的证书,如果没有你需要去 腾讯云 ,阿里云也有相关服务
然后下载完我们的证书,我们需要把他们拷贝到 /etc/nginx/ssl
目录下。然后再配置 ssl 证书
ssl_certificate /etc/nginx/ssl/your_domain.crt;
ssl_certificate_key /etc/nginx/ssl/your_domain.key;
接下来修改 nginx.conf 文件,
sudo vim /etc/nginx/nginx.conf
然后在 ssl_prefer_server_ciphers on;
下面添加下面的配置:
ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
接下来我们测试下:
sudo nginx -t
如果看到 successful
字样,那就意味着配置没有问题;
我们重启 nginx 服务器:
sudo service nginx restart
接下来我们验证下 是否生效,我们打开 chrome ,然后把 Protocol 添加上,在 Network 工具栏上。
然后请求网站,看是否有 h2 的协议产生。
测试结果
我们使用了 webpagetest 作为第三方数据测试工具。
测试地址:
https://www.jackpu.com/pinterest-pwa-an-li-xue-xi/
透过图中我们可以看到在 First Byte 的提升很明显,而且 Start Render 时间也有很大比例的提升。
下面是首页的对比:
4G 网速情况;
下图是用过 Chrome 自带的 Audit 工具拿到测试截图
测试结果详见后面附录;
升级后常见问题
- http2 不生效
你可以输入 ngixn -V
查看下 nginx 和 相关模块的信息, 其中一定要确保 nginx 的版本 和 openssl 版本。其中升级 openssl 最好要 大于等于1.0.2
的版本,这样 ALPN 才能够得到支持。
2) 服务器错误
这个问题比较常见,记得先看下配置,是否正确,如果行的话,在到错误日志目录查看 nginx 错误日志,应该很快就可以找到答案了。
扩展阅读
- What is HTTP/2 – The Ultimate Guide
- 更新openssl
- How To Set Up Nginx with HTTP/2 Support on Ubuntu 18.04
- Introducing HTTP/2 Server Push with NGINX 1.13.9
- Update an Ubuntu EC2 instance on Amazon AWS
Upgrading to Nginx 1.6 on Ubuntu- How To Install And Update OpenSSL On Ubuntu 16.04
- How To Set Up Nginx with HTTP/2 Support
- HTTP/2:新的机遇与挑战
附录 1
HTTP 1.1
首页
测试 url:
New York 4G:
https://www.webpagetest.org/result/181009_DH_cef1a7874dc5f25cf53be02cc27bfce9/
New York Native Connection
https://www.webpagetest.org/result/181009_4G_5d0f70125a91442b848e302c139ac652/
详情页
测试 url:
https://www.jackpu.com/pinterest-pwa-an-li-xue-xi/
New York 4G
https://www.webpagetest.org/result/181009_DW_a957cdf0c986b9700c3313d5fb2c37ba/
New York Native Connection
https://www.webpagetest.org/result/181009_74_3af8980723e22a027aac6d3c5fb37b1c/
HTTP/2
详情页
4G
http://www.webpagetest.org/result/181010_A0_a0e3062ad2aec3de0a7f071debcd8224/
首页
New York Native Connection
http://www.webpagetest.org/result/181010_T3_3c66179e660b0a59d6a1c0b7e325be77/
4G
http://www.webpagetest.org/result/181010_4D_99ddc32faa809a39ff1941dc8d30fe7e/