HTTP/2 Server push —— 加速你的网页加载(使用 Nginx、Nuxt.js 实践)

全栈设计运维后端开发Nginx

发表时间:
作者:Ivan
热度:0

没有废话

首先,用上 HTTP/2 协议实际前提得是你的协议名是 https,Ngxin 1.13.9 可以开启 http2 server push。然后,咱得知道 HTTP/2 相比 HTTP/1.1,提升了网络传输性能。最后,用上 HTTP/2 是个不错的选择!

我们这次配置,不是直接在 Nginx 上配置推送的具体文件,而是使用 Nginx 的拦截预加载头的方式: 通过上游服务器在响应头中添加类似下面这样的头:

Link: </style.css>; as=style; rel=preload

由 Nginx 拦截并启动一个 server push of /style.css,自动将资源推送给客户端。

Nginx 配置

注意!,如果之前有安装旧版本的 Ngxin,需要先卸载!

卸载旧版本的 Nginx

sudo apt remove nginx nginx-common nginx-full nginx-core

备份 Nginx 主配置

sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

卸载 nginx.server 文件

sudo systemctl unmask nginx

完成后可以继续安装新版本的 Nginx

安装新版本的 Nginx

因为我的服务器是 Ubuntu 16.04,目前(2018.2.27)Ubuntu 的 apt 给的还是 1.10.3 版本的 Nginx,所以我们首先升级下 Nginx:

# 获取并导入 Nginx 的公钥
wget http://nginx.org/keys/nginx_signing.key
sudo apt-key add nginx_signing.key

打开文件:

sudo nano /etc/apt/sources.list

在文件末尾添加以下两行(按 ctrl+w 紧接着按ctrl+v 可跳到文件末尾):

deb http://nginx.org/packages/mainline/ubuntu/ xenial nginx
deb-src http://nginx.org/packages/mainline/ubuntu/ xenial nginx

(按 ctrl + o 保存文件,然后按 ctrl + x 退出 nano)

现在,更新存储库信息并安装 Nginx

sudo apt update
sudo apt install nginx

启动服务

sudo systemctl start nginx

如果出现以下提示则表示你没卸载 nginx.server

failed to start nginx.service: unit nginx.service is masked.

自动启动 Nginx:

sudo systemctl enable nginx

最后,检查 Nginx 的状态和版本:

systemctl status nginx
nginx -v

不知道为什么,这个版本没自动引入 sites-enabled 的配置,想要引入可以在 nginx.conf 中的 http { }块中加入以下命令:

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

配置 Nginx

例子:

server {
    # Ensure that HTTP/2 is enabled for the server
    listen 443 ssl http2;

    ssl_certificate ssl/certificate.pem;
    ssl_certificate_key ssl/key.pem;


    root /var/www/html;


    # Intercept Link header and initiate requested Pushes
    location = /myapp {
        proxy_pass http://upstream;
        http2_push_preload on;
    }
}

Nuxt.js 配置

在 Nuxt.js 1.3.0 中开启 http/2 server push 可谓是十分简单的,直接在 nuxt.config.js 中加入 render: { http2: { push: true } } 即可,层次结构大概下面这样:

...

module.exports = {
  ...

  render: {
    http2: { push: true }
  },

  ...
}

最后一步

重启 Nginx 服务,重新编译 Nuxt.js 项目并运行

sudo nginx -t
sudo systemctl reload nginx

# 重新编译 Nuxt.js 项目并运行

如何看成功吃上鸡配好 http2 server push 了没?在 Chrome 开发者工具中,看看紧跟第一个请求(没被重定向的那个)后面的请求时间线那悬停鼠标,出来的悬浮窗里有没有个 Receiving Push 的属性?有的话就是啦!或者你可以看下,没有 waiting 的就是。(不要问我为什么用文字描述,我忘记做图片上传的接口了 TAT )

登录 后发言

评论列表

暂时没有评论,快快抢个沙发吧!

共 0 条