前段时间把站点升级成了 HTTPS 和 HTTP2 ,主要是受不了 Chrome 和 Safari 不安全的提示,所以顺便分享出来,来看看如何让站点支持 HTTPS 和 HTTP2。
Tips:HTTPS 和 HTTP2最好配合一起使用,因为是最好的搭档,就像一对兄妹,一起使用才会发挥最大的好处😋
下面用一段对话的形式,简单了解下HTTP、HTTPS 和 HTTP2
@HTTP 你知道 SPDY吗?
1. SPDY优雅的采取了多路复用,降低了延迟同时提高了带宽的利用率。
2. 你的header很多时候都是重复多余的,SPDY选择合适的压缩算法可以减小包的大小和数量。
3. 基于我妹来传输的,保障传输安全。
4. 服务端推送,SPDY可以推送文件到客户端。
而我就是SPDY升级版 🙃
通过,这段对话,想必也清楚为什么要 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 之后,性能应该有一定的提升,如想了解更多 性能优化 方面的知识,可以参考我之前写过的一篇文章
Anonymous
Anonymous
Anonymous
小彦
哦哦哦,HTTP2主要是性能的提高,提高延时和数据量……我比较关注有没有新功能可以玩@ω@
小彦
科普了HTTP2,可以推送文件给客户端,这个可以做一些事情啊,不过是不是也可以弹窗给他下载??
persilee
@小彦 : 这个应该不是网络要解决的问题,程序里写代码就可以实现吧。。
HTTP2之前只是了解,现在才用到,但是推送功能还没用过,据了解,HTTP2推送功能是解决传输延迟及网络未充分利用等问题的。。。
通常情况,对网络服务器的初始请求通常是一个 HTML 文档。在这种情况下,服务器会用所请求的 HTML 资源进行响应。接着浏览器开始对 HTML 进行解析,过程中识别其他资源的引用,例如样式表、脚本和图片。紧接着,浏览器对这些资源分别发起独立的请求,等待服务器返回。
这一机制的问题在于,它迫使用户等待这样一个过程:直到一个 HTML 文档下载完毕后,浏览器才能发现和获取页面的关键资源。从而延缓了页面渲染,拉长了页面加载时间。
有了HTTP2的推送功能,就有了解决上述问题的方案。他能让服务器在用户没有明确询问下,抢先地“推送”一些网站资源给客户端。只要正确地使用,我们可以根据用户正在访问的页面,给用户发送一些即将被使用的资源。