HTTP2 and HTTPS

前段时间把站点升级成了 HTTPSHTTP2 ,主要是受不了 Chrome 和 Safari 不安全的提示,所以顺便分享出来,来看看如何让站点支持 HTTPS 和 HTTP2。

Tips:HTTPS 和 HTTP2最好配合一起使用,因为是最好的搭档,就像一对兄妹,一起使用才会发挥最大的好处😋

下面用一段对话的形式,简单了解下HTTP、HTTPS 和 HTTP2


HTTP:我是一种常用于应用层的协议,基于文本传输内容。

HTTPS:我比你更安全,在你的基础上增加了SSL(安全套接层)或者TSL(安全传输层),在SSL或TSL传输层对数据进行了加密处理。

HTTP:我是直接运行在TCP之上的,你在我的基础上新增SSL层,总需要花费时间,通过算法计算来加密,速度肯定没我快!

HTTP2:@HTTPS 妹,别怕,我来了。。。🤗
@HTTP 你知道 SPDY吗?

HTTP:我不知道!🙄

HTTP2:好吧!我给你科普一下。
1. SPDY优雅的采取了多路复用,降低了延迟同时提高了带宽的利用率。
2. 你的header很多时候都是重复多余的,SPDY选择合适的压缩算法可以减小包的大小和数量。
3. 基于我妹来传输的,保障传输安全。
4. 服务端推送,SPDY可以推送文件到客户端。
而我就是SPDY升级版 🙃

HTTPS:哇!哥,好强👏

HTTP:。。。

HTTP2:我是采用新的二进制格式、多路复用、header压缩等,比你明文、单路线(还得排队)、header信息冗余传输速度要快吧。

HTTP:好吧,你们赢了,我先溜了。。。


通过,这段对话,想必也清楚为什么要 HTTPS 和 HTTP2 一起使用了吧。

如,对 wordpress 开发环境自动化部署感兴趣,也可以参考以下文章:


下面我们来看看如何部署 HTTPS 和 HTTP2。

HTTPS 部署

我的站点使用的是 nginx web服务器,下面会以 nginx 为例(这里我不会写的很细,主要写大概的流程和思路)。

申请证书

首先,我们需要在一些服务商那申请CA证书(比如:阿里云)。

申请步骤不算复杂,可自行百度、google。

如果一切正常,几分钟后,证书就可以申请成功(如,旁边预览图,可以下载)。

上传证书到服务器

证书申请成功且下载到本地后,就可以配置web服务器,让他支持 HTTPS。

到服务器创建一个存储证书的目录,如:

sudo mkdir -p /etc/nginx/ssl/lishaoy.net

把下载的证书上传到服务器,或者新建文件,把内容拷贝到文件,如:

vi mkdir -p /etc/nginx/ssl/lishaoy.net/1526357810099.key
vi mkdir -p /etc/nginx/ssl/lishaoy.net/1526357810099.pem

这里我是新建了两文件,把本地文件内容拷贝到服务器文件 wq 保存即可

配置 nginx 文件

我们的网站可以同时支持 HTTP 和 HTTPS,HTTP默认端口是 80 ,HTTPS默认端口是 443

然后,我们可以创建一个文件来监听 443 端口,如:

Tips:记得要去空间服务商开通 443 端口,否则 HTTPS无法运行。

touch /etc/nginx/conf.d/ssl.wordpress.conf

再把以下代码粘贴过去,记得改成自己的域名、证书目录、站点目录等

server {
  listen        443;
  server_name   lishaoy.net; #域名,改成自己的域名
  ssl           on;
  ssl_certificate   ssl/lishaoy.net/1526357810099.pem; #证书公钥,改成自己的
  ssl_certificate_key  ssl/lishaoy.net/1526357810099.key; #证书私钥,改成自己的
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  root          /persilee/www/wordpress; #站点目录,改成自己的
  index         index.php index.html;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
        }
}

然后,重启服务

sudo systemctl reload nginx

如一切正常,在浏览器输入 HTTPS 的地址可看到小锁(如,旁边预览图)。


HTTP2 部署

首先,我们可以去看看,站点传输的协议是什么,我的站点已经是 HTTP2(如,旁边预览图)

上面的4个资源是来自我的 nginx 服务器。

查看 nginx 版本

在配置 HTTP2 之前,我们要先查看下 nginx 的版本,如:

# nginx -V
nginx version: nginx/1.11.10
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC) 
built with OpenSSL 1.0.2o  27 Mar 2018
TLS SNI support enabled
......

可以看到 OpenSSL 这一行 built with OpenSSL 1.0.2o 已是1.0.2o,如你们没有升级到 HTTP2 的话,应该看到的是 1.0.1e 字样

编译 nginx

所以,我们需要重新编译下 nginx,让他支持 HTTP2

我们可以去到这个地址: https://github.com/persilee/docker-nginx

找到 Dockerfile 文件,按照步骤执行命令。

# 安装必备工具
RUN yum install wget curl perl gcc pcre-devel zlib-devel make -y

# 进入工作目录
WORKDIR /usr/local/src

# 下载 openssl 源
RUN curl -L --progress https://www.openssl.org/source/openssl-1.0.2-latest.tar.gz | tar xz
RUN mv openssl*/ openssl/

# 下载 nginx 源
RUN curl -L --progress http://nginx.org/download/nginx-1.11.10.tar.gz | tar xz
RUN mv nginx*/ nginx/

# 编译 nginx
WORKDIR /usr/local/src/nginx
RUN  ./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log  --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid  --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp  --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-http_auth_request_module --with-threads --with-stream --with-stream_ssl_module --with-http_slice_module --with-mail --with-mail_ssl_module --with-file-aio --with-http_v2_module --with-stream_realip_module --with-openssl=/usr/local/src/openssl \
  && make \
  && make install \
  && useradd nginx \
  && mkdir /etc/nginx/conf.d \
  && mkdir /var/cache/nginx \
  && chown nginx:root /var/cache/nginx \
  && rm -rf /usr/local/src/nginx \
  && rm -rf /usr/local/src/openssl \
  && rm -rf /var/cache/yum

# 复制准备好的配置文件
COPY ./config/nginx.conf /etc/nginx/
COPY ./config/default.conf /etc/nginx/conf.d/

修改配置文件

如上面的步骤顺利完成,我们还需要修改下配置文件,如:

vi /etc/nginx/conf.d/ssl.wordpress.conf

然后,加上 ssl http2 即可,如:

server {
  listen        443 ssl http2; #修改新增
  server_name   lishaoy.net;
  ssl           on;
  ssl_certificate   ssl/lishaoy.net/1526357810099.pem;
  ssl_certificate_key  ssl/lishaoy.net/1526357810099.key;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  root          /persilee/www/wordpress;
  index         index.php index.html;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
        }
}

重启服务后,我们的站点就支持 HTTP2

sudo systemctl reload nginx

开启了 HTTP2 之后,性能应该有一定的提升,如想了解更多 性能优化 方面的知识,可以参考我之前写过的一篇文章

6 条评论
  • Anonymous
    Google ChromeGoogle Chrome WindowsWindows

    :arrow:

    Reply
  • Anonymous
    Google ChromeGoogle Chrome WindowsWindows

    :twisted: :shock: :cool: :razz:

    Reply
  • Anonymous
    Sogou ExplorerSogou Explorer WindowsWindows

    :razz:

    Reply
  • 小彦
    Google ChromeGoogle Chrome AndroidAndroid

    哦哦哦,HTTP2主要是性能的提高,提高延时和数据量……我比较关注有没有新功能可以玩@ω@

    Reply
  • 小彦
    Google ChromeGoogle Chrome AndroidAndroid

    科普了HTTP2,可以推送文件给客户端,这个可以做一些事情啊,不过是不是也可以弹窗给他下载??

    Reply
    • persilee
      SafariSafari MacMac

      @小彦 : 这个应该不是网络要解决的问题,程序里写代码就可以实现吧。。
      HTTP2之前只是了解,现在才用到,但是推送功能还没用过,据了解,HTTP2推送功能是解决传输延迟及网络未充分利用等问题的。。。
      通常情况,对网络服务器的初始请求通常是一个 HTML 文档。在这种情况下,服务器会用所请求的 HTML 资源进行响应。接着浏览器开始对 HTML 进行解析,过程中识别其他资源的引用,例如样式表、脚本和图片。紧接着,浏览器对这些资源分别发起独立的请求,等待服务器返回。
      这一机制的问题在于,它迫使用户等待这样一个过程:直到一个 HTML 文档下载完毕后,浏览器才能发现和获取页面的关键资源。从而延缓了页面渲染,拉长了页面加载时间。
      有了HTTP2的推送功能,就有了解决上述问题的方案。他能让服务器在用户没有明确询问下,抢先地“推送”一些网站资源给客户端。只要正确地使用,我们可以根据用户正在访问的页面,给用户发送一些即将被使用的资源。

      Reply