Nginx 升级 HTTP / 2 指引

by Jack Pu

引言

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 工具拿到测试截图

测试结果详见后面附录；

升级后常见问题

  1. http2 不生效

你可以输入 ngixn -V

查看下 nginx 和 相关模块的信息, 其中一定要确保 nginx 的版本 和 openssl 版本。其中升级 openssl 最好要 大于等于1.0.2 的版本，这样 ALPN 才能够得到支持。

如何升级 openssl

2） 服务器错误

这个问题比较常见，记得先看下配置，是否正确，如果行的话，在到错误日志目录查看 nginx 错误日志，应该很快就可以找到答案了。

扩展阅读

附录 1

HTTP 1.1

首页

测试 url:

https://www.jackpu.com/

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/