基于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缓存 客户端缓存 多级缓存技术)
前后端分离技术 便于开发 微服务