0
点赞
收藏
分享

微信扫一扫

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务


接上篇《​​66、上线-通过node创建Web服务器​​》
上一篇我们学习了上线准备内容,以及如何通过node创建Web服务器。本篇我们来讲解如何开启gzip配置来减少文件访问体积,并配置HTTPS服务。

一、什么是gzip、有何用?

gzip是GNUzip的缩写,最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如Apache,Nginx,IIS同样支持gzip。

gzip压缩比率在3到10倍左右,可以大大节省服务器的网络带宽。而在实际应用中,并不是对所有文件进行压缩,通常只是压缩静态文件。

gzip工作原理图:

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务_gzip


gzip的工作过程如下:

1)浏览器请求url,并在request header中设置属性accept-encoding:gzip。表明浏览器支持gzip。

2)服务器收到浏览器发送的请求之后,判断浏览器是否支持gzip,如果支持gzip,则向浏览器传送压缩过的内容,不支持则向浏览器发送未经压缩的内容。一般情况下,浏览器和服务器都支持gzip,response headers返回包含content-encoding:gzip。

3)浏览器接收到服务器的响应之后判断内容是否被压缩,如果被压缩则解压缩显示页面内容。

注:上述文字引用来自【​​CSDN博主「张驰Zhangchi」什么是gzip?​​

那么我们的项目使用gzip有什么用呢?
说白了,使用gzip可以减小文件体积,使传输速度更快,可以加快我们系统首屏页面的打开速度。

二、使用gzip

我们的项目默认是没有打开gzip配置的,我们可以启动项目后看一下:

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务_compression_02


可以看到chunk.js的网络请求的回应中,没有content-encoding的压缩回应。

我们可以通过服务器端使用compression做gzip压缩,具体配置如下:

//安装相应包
npm install compression -S
// 导入包
const compression = require('compression');
// 启动中间件
app.use(compression())

这里的“compression”插件能够通过压缩算法,将前端打包好的资源文件进一步压缩,生成指定的、体积更小的压缩文件,让浏览器能够更快的加载资源。

我们停止生产客户端的运行,然后安装compression插件:

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务_compression_03


安装完毕后,在app.js文件中,引入compression并启动中间件:

//导入express
const express = require('express')
// 导入compression压缩插件包
const compression = require('compression');
//创建web服务器
const app = express()

// 启动compression压缩插件中间件
app.use(compression())
//在这里调用express.static()方法, 快速对外提供静态资源
//如果要对外提供多个静态资源目录,重复写更换文件目录即可
app.use(express.static('./dist'))

//启动web服务器
app.listen(8088,(req,res)=>{
console.log('express server running at 127.0.0.1:8088')

})

注意这里的use,一定要先启用compression压缩,再托管目录,否则gzip压缩不会生效。

保存后重启服务,然后回到浏览器,再次查看chunk.js的网络请求的回应,发现已经有了content-encoding的压缩回应,为gzip格式:

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务_vue.js_04

至此gzip压缩的配置讲解完毕。

三、配置HTTPS服务

1、为什么要启用https服务?

基于系统数据安全性考虑,系统所有涉及敏感信息的网络接口采用HTTPS数据传输协议在传输过程中对数据进行进行加密,规避数据传输过程中信息泄露与数据篡改的风险。
所以我们也来配置一下HTTPS的服务,来保证我们的网络传输更加安全。

2、介绍https

简单介绍一下https,https就是在地传输层上发送的http,它在将http报文发送给TCP之前,现将其发送给了安全层(SSL或TLS协议),对其进行加密后在进行下一步通信。

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务_https_05


虽然https加密后的数据无法被解密,但网络传输过程中需要经过很多中间节点,数据在这个过程中有可能被篡改,那如何校验数据的完整性呢?答案就是“校验数字签名”。

数字签名有两种功效:

(1)能确定消息确实是由发送方签名并发出来的,因为别人假冒不了发送方的签名。

(2)数字签名能确定消息的完整性,证明数据是否未被篡改过。

将一段文本先用Hash函数生成消息摘要,然后用发送者的私钥加密生成数字签名,与原文文一起传送给接收者。接下来就是接收者校验数字签名的流程了。

而我们日常常用的数字签名就是认证机构颁发的“数字证书”,它处于客户端与服务器双方都可信赖的第三方机构的立场上。
网站运营公司会向第三方CA机构提交申请和证明真身的资料,审核过后机构会颁发证书给网站运营公司,然后网站运营公司将证书安装在服务端。客户端 Client 向服务器 Server 发出请求时,Server 返回证书文件,客户端 Client 读取证书中的相关的明文信息,采用相同的散列函数计算得到信息摘要,然后,利用对应CA的公钥解密签名数据,对比证书的信息摘要,如果一致,则可以确认证书的合法性,即服务器的公开密钥是值得信赖的。

客户端还会验证证书相关的域名信息、有效时间等信息; 客户端会内置信任CA的证书信息(包含公钥),如果CA不被信任,则找不到对应 CA的证书,证书也会被判定非法。

整个https的工作流程如下:

【VUE项目实战】67、上线-开启gzip和配置HTTPS服务_compression_06


说白了就是一个加密和解密的过程,客户端提供一个随机的秘钥即可,这样即使信息被截获了,对方不知道秘钥也解不开信息,即使解开信息并篡改了,接收者发现签名不对,同时解密后发现完整性标志也不对,也会发现信息被截胡篡改了。

3、开始配置https服务

下面我们在自己的项目中配置https服务。
我们先声明一点,配置https服务在真实的开发场景中,不是由前台开发人员完成的,而是由后台开发人员完成的(Java或Php再部署项目的时候开启https)。

按照顺序,我们需要做以下步骤:
(1)申请ssl证书(https://freessl.cn)
一般情况下,商业版的ssl证书都是收费的,而我们自己个人学习用的话,可以申请免费的ssl证书,前往https://freessl.cn即可申请。
申请步骤:
●进入https://freessl.cn官网,注册后,输入要申请的域名并选择品牌
●输入自己的邮箱并选择相关选项
●验证DNS(在域名管理后台添加TXT记录)
●验证通过之后,下载ssl证书(full_chain.pem公钥;private.key私钥)
这部分一般由后台开发人员搞定。

(2)在后台项目导入证书

//启用https核心模块
const https = require('https');
//启用fs文件操作模块
const fs = require('fs');
//创建一个options操作对象
const options = {
//读取公钥和私钥文件为字符串,赋值给cert和key属性
cert: fs.readFileSync('./full_chain.pem'),
key: fs.readFileSync('./private.key')
}
//包裹https启动服务(app是之前创建的express服务对象)
//http服务默认运行在80端口,而https服务默认运行在443端口
https.createServer(options,app).listen(443);

加在我们app.js代码中的完整效果为:

//导入express
const express = require('express')
// 导入compression压缩插件包
const compression = require('compression');
//启用https核心模块
const https = require('https');
//启用fs文件操作模块
const fs = require('fs');
//创建一个options操作对象
const options = {
//读取公钥和私钥文件为字符串,赋值给cert和key属性
cert: fs.readFileSync('./full_chain.pem'),
key: fs.readFileSync('./private.key')
}
//创建web服务器
const app = express()

// 启动compression压缩插件中间件
app.use(compression())
//在这里调用express.static()方法, 快速对外提供静态资源
//如果要对外提供多个静态资源目录,重复写更换文件目录即可
app.use(express.static('./dist'))

//包裹https启动服务(app是之前创建的express服务对象)
//http服务默认运行在80端口,而https服务默认运行在443端口
https.createServer(options,app).listen(443);

至此,我们的https的配置也讲解完毕。

下一篇是本系列的最后一篇,讲解的是如何使用pm2来管理应用。


举报

相关推荐

0 条评论