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

Posted 2022-10-18 光仔December

接上篇《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工作原理图：

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配置的，我们可以启动项目后看一下：

可以看到chunk.js的网络请求的回应中，没有content-encoding的压缩回应。
我们可以通过服务器端使用compression做gzip压缩，具体配置如下：

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

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

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

安装完毕后，在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格式：

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

三、配置HTTPS服务

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

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

2、介绍https

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

虽然https加密后的数据无法被解密，但网络传输过程中需要经过很多中间节点，数据在这个过程中有可能被篡改，那如何校验数据的完整性呢？答案就是“校验数字签名”。
数字签名有两种功效：
（1）能确定消息确实是由发送方签名并发出来的，因为别人假冒不了发送方的签名。
（2）数字签名能确定消息的完整性,证明数据是否未被篡改过。
将一段文本先用Hash函数生成消息摘要，然后用发送者的私钥加密生成数字签名，与原文文一起传送给接收者。接下来就是接收者校验数字签名的流程了。

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

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

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

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来管理应用。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/127137440