基于Nginx构建动静分离架构

什么是动静分离

动静就是将动态资源(jsp/ftl)与静态资源(img/css/js)分开,从而提高网站响应的速度；

nginx作为静态资源服务器比tomcat响应吞吐很多；

动静分离与前后分离区别

前后分离 将前端业务逻辑与后端完全分开 比如 vue+SpringBoot架构

动静分离 将静态资源资源与动态资源分开部署；

基于Nginx构建动静分离架构

主要有两种方案

基于location判断前缀，项目名称；基于location判断后缀；

本地获取图片

location /static/ { alias E:/static/imgs/; } location / { proxy_pass http://127.0.0.1:8080; index index.html index.htm; }

远程获取图片

location /static/ { proxy_pass http://www.mayikt.com/static/imgages/index-img/; index index.html index.htm; } location / { proxy_pass http://127.0.0.1:8080; index index.html index.htm; }

静态资源服务器

为什么将静态资源存放到第三方服务器效率非常高呢？

云服务器签订带宽都是将T算；

CDN内容分发，能够将静态资源缓存到全国各地节点能够减少客户端与cdn带宽距离传输提高响应速度； 就近原则

带宽传输的速度也是和服务器与客户端部署距离也是有关系的；

CDN分发底层的原理

将静态资源存到购买的服务器中，然后将资源缓存到全国各地的服务器中，用户在访问的时候会访问距离最近的服务器上的资源。

静态资源压缩

人工压缩

Css/JS/IMG实现压缩地址：http://tool.oschina.net/jscompress/

Maven自动打包压缩 自动生成.min文件

maven的pom文件

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.1.RELEASE</version> </parent> <dependencies> <!-- SpringBoot整合Web组件 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies> <!-- 构建相关配置 --> <build> <!-- maven插件配置 --> <plugins> <plugin> <!-- YUI Compressor Maven压缩插件 --> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <version>1.3.0</version> <configuration> <!-- 读取js,css文件采用UTF-8编码 --> <encoding>UTF-8</encoding> <!-- 不显示js可能的错误 --> <jswarn>false</jswarn> <!-- 若存在已压缩的文件，会先对比源文件是否有改动。有改动便压缩，无改动就不压缩 --> <force>false</force> <!-- 在指定的列号后插入新行 --> <linebreakpos>-1</linebreakpos> <!-- 压缩之前先执行聚合文件操作 --> <preProcessAggregates>true</preProcessAggregates> <!-- 压缩后保存文件后缀 --> <suffix>.min</suffix> <!-- 源目录，即需压缩的根目录 --> <sourceDirectory>${basedir}/mobile</sourceDirectory> <!-- 压缩js和css文件 --> <includes> <include>**/*.js</include> <include>**/*.css</include> </includes> <!-- 以下目录和文件不会被压缩 --> <excludes> <exclude>**/*.min.js</exclude> <exclude>**/*.min.css</exclude> <exclude>scripts/data/*.js</exclude> </excludes> </configuration> </plugin> </plugins> </build>

人工压缩和maven自动打包压缩属于传统压缩，主要操作是：去注释、空格去除、换成一行。

Nginx自带压缩

将下面配置信息加到nginx.conf文件中去，加到server里面去。

Nginx压缩非常耗CPU

主要思路：nginx将js等文件中的常用的语法，使用字段匹配，将较长的语法function替换成短字典a，重复次数比较多的语法会替换。

gzip on; gzip_buffers 32 4K; gzip_comp_level 6; gzip_min_length 100; gzip_types application/javascript text/css text/xml; gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） gzip_vary on

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUQg4Lii-1602197606482)(D:\学习文件\md学习笔记\images\nginx压缩静态文件配置.png)]

配置文件内容详细介绍

gzip配置的常用参数

gzip on|off; #是否开启gzip

gzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?)

gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)

gzip_disable #正则匹配UA 什么样的Uri不进行gzip

gzip_min_length 200 # 开始压缩的最小长度(再小就不要压缩了,意义不在)

gzip_http_version 1.0|1.1 # 开始压缩的http协议版本(可以不设置,目前几乎全是1.1协议)

gzip_proxied # 设置请求者代理服务器,该如何缓存内容

gzip_types text/plain application/xml # 对哪些类型的文件用压缩 如txt,xml,html ,css

gzip_vary on|off # 是否传输gzip压缩标志

静态资源缓存控制

Http协议304状态 第一次访问会将资源缓存到浏览器客户端，如果该资源文件没有发生变化的情况下 不会重复向服务器端发送请求；

注意：七牛云CDN可能会缓存静态资源，建议每次发布生产环境中加上时间戳；

http协议304缓存

客户端（浏览器）发送请求到服务器端，第一次请求的时候会缓存所有的静态资源到浏览器；客户端发送第二次请求的时候，如果本地浏览器有缓存，就使用本地浏览器的。

key：访问的url value

如果远程的文件发生的变化的情况下，就使用远程的。

缓存流程

客户端缓存（浏览器缓存）------》CDN缓存（七牛云）-----》Nginx缓存-----》Jvm内置缓存-----》Redis分布式缓存-----》数据库

需要考虑的问题：

Redis与数据库一致性的问题：mq访阅binlog，同步数据一致性问题。Jvm与Redis保持一致性问题。Nginx缓存与服务器端真实缓存一致性问题。

使用Nginx缓存

在配置文件中加入配置：

# 代理缓存配置 proxy_cache_path "./meite_cachedata" levels=1:2 keys_zone=meitecache:256m inactive=1d max_size=1000g; server { listen 80; server_name localhost; gzip on; gzip_buffers 32 4K; gzip_comp_level 6; gzip_min_length 100; gzip_types application/javascript text/css text/xml; gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） gzip_vary on; location /details { #使用缓存名称 proxy_cache meitecache; #对以下状态码实现缓存 proxy_cache_valid 200 206 304 301 302 1d; #缓存的key proxy_cache_key $request_uri; add_header X-Cache-Status $upstream_cache_status; proxy_pass http://127.0.0.1:8080; index index.html index.htm; } location /all { proxy_pass http://127.0.0.1:8080; index index.html index.htm; } }

数据一致性问题解决：

lua+openresty动态渲染模板；手动清除Nginx缓存 需要物理删除请求路径加版本号；

互联网高并发前端优化

动静分离架构模式

使用cdn缓存静态资源 就近原则 减少服务器带宽传输

减少客户端与服务器端带宽传输 ，对我们静态资源实现压缩

使用缓存机制 （Nginx、jvm内置缓存 分布式redis缓存 客户端缓存 多级缓存技术）

前后端分离技术 便于开发 微服务

数据一致性问题解决：

lua+openresty动态渲染模板；手动清除Nginx缓存 需要物理删除请求路径加版本号；

互联网高并发前端优化

动静分离架构模式

使用cdn缓存静态资源 就近原则 减少服务器带宽传输

减少客户端与服务器端带宽传输 ，对我们静态资源实现压缩

使用缓存机制 （Nginx、jvm内置缓存 分布式redis缓存 客户端缓存 多级缓存技术）

前后端分离技术 便于开发 微服务