一、Nginx 动静分离理论
1、概念
今天学习和梳理Nginx动静分离，动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，之所以要进行动静分离，其一为了提高前端的响应速度，其二就是为了将动态请求和静态请求进行分别部署，后端各个服务各司其职，提高处理性能。这里的“动静分离”，看似是动态资源和静态资源的分离，也可以看成是静态请求和动态请求的分离。即使用Nginx将静态请求和动态请求分开，使用Nginx处理静态页面，后端服务处理动态请求。
2、实现方案
目前动静分离的实现分为两种。第一种就是单独将静态资源单独部署，即有独立的域名存放。第二种就静态资源和动态资源混和部署通过Nginx来区分。当然业界主流的方式就是第一种，今天咱们就通过模拟这种方式感受一些动静分离的实现。静态资源部署当然也有很多方式，比如Nginx当作资源服务器，Node、CDN都可以作为静态资源费服务器。今天就使用Nginx作为静态资源服务器实验。
3、好处
api接口服务化：动静分离之后，后端应用更为服务化，只需要通过提供api接口即可，可以为多个功能模块甚至是多个平台的功能使用，接口职责更加单一，更便于功能维护。
前后端开发并行：前后端只需要关心接口协议，各自的开发相互不干扰，并行开发，并行自测，可以有效的提高开发时间，也可以有些的减少联调时间。
减轻后端服务压力，提高静态资源访问效率：通过动态页面和静态请求交给不同的服务器来解析，达到加快解析速度，提高请求访问频率，降低单位服务器的压力。
下面就是Nginx动静分离的示意图。
二、Nginx 动静分离实战
1、环境准备
1、因为我这边一直使用的 mac 和 docker 所以今天的实践就是使用docker 容器进行。
2、之前咱们讲到的使用docker挂载，当然这次也是使用挂载技术
2、Nginx启动
咱们本次使用Nginx作为静态之源服务器，所以在Nginx容器内创建一个data的目录放置静态资源。还是使用docker的挂载技术。
- --restart=always: 异常关闭后重新尝试启动
- 8088:80 制定服务8088端口映射ng的80端口
- -v /Users/liluyang/docker/volumes/nginxVolume/data/image:/nginx/data/image 挂在容器的/nginx/data/image目录到本地的/Users/liluyang/docker/volumes/nginxVolume/data/image下，剩余的类似。
容器启动之后进入容器即可看到创建在容器中的目录（自动创建哦）。
docker run -dit --restart=always --name=nginx -p 8088:80
-v /Users/liluyang/docker/volumes/nginxVolume/data/image:/nginx/data/image
-v /Users/liluyang/docker/volumes/nginxVolume/data/html:/nginx/data/html
-v /Users/liluyang/docker/volumes/nginxVolume/index:/usr/share/nginx/html
-v /Users/liluyang/docker/volumes/nginxVolume/config/nginx.conf:/etc/nginx/nginx.conf
-v /Users/liluyang/docker/volumes/nginxVolume/config/default.conf:/etc/nginx/conf.d/default.conf
nginx:latest
3、挂在文件修改
在配置文件里咱们创建三个 location 模块，分别路由图片，html、反响代理后端请求。达到将静态资源（图片和html资源）和动态资源（后端服务的请求）分离的目的。最后分别是请求图片，html文件，后端服务的实验结果图。大家配置完毕之后可以尝试感受。
# ######## 动静分离开始 ########
# 匹配图片
location ~ .*\.(gif|jpg|pdf|jpeg|png)$ {
expires 8h;
root /nginx/data/image;
}
# 匹配html文件
location ~ .*\.(html)$ {
root /nginx/data/html;
}
# 拦截后台请求，正则匹配 api 路径
location ~* ^/(lb) {
# 配置代理地址
proxy_pass http://myserver;
}
# ######## 动静分离结束 ########4、动静分离验证
Nginx动静分离：图片资源实践
Nginx动静分离：html资源实践Nginx
Nginx动静分离：动态资源实践
三、最后
最后一个小参数大家可能没有注意："expires 8h;",通过 location指定不同的后缀名实现不同的请求转发。通过 expires参数设置，可以使浏 览器缓存过期时间，减少与服务器之前的请求和流量。具体 Expires定义：是给一个资源 设定一个过期时间，也就是说无需去服务端验证，直接通过浏览器自身确认是否过期即可， 所以不会产生额外的流量。此种方法非常适合不经常变动的资源。（如果经常更新的文件， 不建议使用 Expires 来缓存），我这里设置8h，表示在这 8小时内之内访问这个URL，发送一 个请求，比对服务器该文件最后更新时间没有变化，则不会从服务器抓取，返回状态码304， 如果有修改，则直接从服务器重新下载，返回状态码 200。
这里就引申出前端的另一个重要的概念就是缓存，缓存也是大有门道，大致分为“强制缓存”和“协议缓存”，缓存有分别存储在memary cache 和 disk cache，即“磁盘缓存”和“内存缓存”，这个在后面有机会的时候在聊聊。都是为了加速而采取的一些主要措施。
还有个概念就是缓存有有效性的判断是基于 Etag和Last-modified。Etag就是操作系统给文件生成的一个Hash值，Last-modified就是对文件的最后修改时间。
都是机遇以上各种结束的合理使用，才使得那么多炫酷的多媒体很快的呈现在一个页面上。
四、彩蛋
“Nginx动静分离：html资源实践Nginx” 这个部分的设计是一个跳动的心形动图，大家可以直接copy代码过去玩。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after {content: "";display: block;clear: both;}
.fl{ float: left;}
.fr{ float: right;}
html{
height: 100%;
background: -webkit-radial-gradient(center,#153170,#000);
}
.heart{ position: relative; width: 300px; height: 300px; margin: 200px auto;transform: rotate(45deg);
animation: move 2s infinite alternate ;}
.heart div{ position: absolute; width: 200px; height: 200px; background: red;}
.heart .middle{ right: 0; bottom: 0; width: 200px; height: 200px;}
.heart .left{ left: 0; bottom: 0; border-radius: 50%;}
.heart .right{ top: 0; right: 0;border-radius: 50%;}
.heart p{ width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;}
.heart p{ position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);}
@-webkit-keyframes move{
10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}
90%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
}
</style>
</head>
<body>
<div class="heart">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<p>I Love You</p>
</div>
</body>
</html>
