部署以及HTTP优化

正在加载今日诗词....

2022-08-10

部署上线以及服务端的优化
HTTP 缓存详解

部署上线以及服务端的优化

**前端部署：https://cli.vuejs.org/zh/guide/deployment.html **

原理就是：将构建生成的产物直接拷贝到任何的静态文件服务器当中。

**后端部署： https://eggjs.org/zh-cn/core/deployment.html **

几乎没有构建过程：除非你用了 typescript 等需要编译的语言。
方案一：直接将本地的源代码打个压缩包拷贝到目标服务器，然后启动服务器。
方案二：在服务器中直接 pull 源代码，install，然后启动服务器。

Nginx 作为服务器软件，它的优点：

特别适合前后端分离的项目
保证安全
非常快
支持负载均衡

Nginx 下载地址：http://nginx.org/en/download.html

HTTP 缓存详解

Expires https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Expires
Expires 响应头包含日期/时间，即在此时候之后，响应过期
使用 nginx 添加对应的响应头：expires 指令
文档地址：http://nginx.org/en/docs/http/ngx_http_headers_module.html
Cache-Control：通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。
文档地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
Etag : ETagHTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。
文档地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/ETag
Last-Modified：是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时间。
文档地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Last-Modified
nginx 配置 Etag：http://nginx.org/en/docs/http/ngx_http_core_module.html#etag
304 Not Modified ：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/304

使用 gzip 实现静态文件的压缩 Gzip是一种压缩文件格式并且也是一个在类 Unix 上的一种文件压缩的软件文档地址：http://nginx.org/en/docs/http/ngx_http_gzip_module.html

nginx gzip 的设置

# 开启gzip
gzip on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 1;

# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

# 设置压缩所需要的缓冲区大小     
gzip_buffers 32 4k;