Nginx 教程-动静分离

r囧r小猫 2024-03-26 21:36 34阅读 0赞

![54ce108b800dbfca674aaf142ef47464.png][]

## **一、Nginx 动静分离理论** ##

### **1、概念** ###

今天学习和梳理Nginx动静分离，动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，之所以要进行动静分离，其一为了提高前端的响应速度，其二就是为了将动态请求和静态请求进行分别部署，后端各个服务各司其职，提高处理性能。这里的“动静分离”，看似是动态资源和静态资源的分离，也可以看成是静态请求和动态请求的分离。即使用Nginx将静态请求和动态请求分开，使用Nginx处理静态页面，后端服务处理动态请求。

### **2、实现方案** ###

目前动静分离的实现分为两种。第一种就是单独将静态资源单独部署，即有独立的域名存放。第二种就静态资源和动态资源混和部署通过Nginx来区分。当然业界主流的方式就是第一种，今天咱们就通过模拟这种方式感受一些动静分离的实现。静态资源部署当然也有很多方式，比如Nginx当作资源服务器，Node、CDN都可以作为静态资源费服务器。今天就使用Nginx作为静态资源服务器实验。

### **3、好处** ###

api接口服务化：动静分离之后，后端应用更为服务化，只需要通过提供api接口即可，可以为多个功能模块甚至是多个平台的功能使用，接口职责更加单一，更便于功能维护。

前后端开发并行：前后端只需要关心接口协议，各自的开发相互不干扰，并行开发，并行自测，可以有效的提高开发时间，也可以有些的减少联调时间。

减轻后端服务压力，提高静态资源访问效率：通过动态页面和静态请求交给不同的服务器来解析，达到加快解析速度，提高请求访问频率，降低单位服务器的压力。

下面就是Nginx动静分离的示意图。

![11a3f2a019922792b4be3400a364dda8.png][]

## **二、Nginx 动静分离实战** ##

### **1、环境准备** ###

1、因为我这边一直使用的 mac 和 docker 所以今天的实践就是使用docker 容器进行。

2、之前咱们讲到的使用docker挂载，当然这次也是使用挂载技术，有同学没有掌握的可以看这篇文章《docker 挂载、修改文件》[传送门][Link 1]

### **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

![f340da256aa3f169b10344892e5e283b.png][]

### **3、挂在文件修改** ###

在配置文件里咱们创建三个 location 模块，分别路由图片，html、反响代理后端请求。达到将静态资源（图片和html资源）和动态资源（后端服务的请求）分离的目的。最后分别是请求图片，html文件，后端服务的实验结果图。大家配置完毕之后可以尝试感受。

![12a3d7c6dbed20c5bc472fcdf279f015.png][]

# ######## 动静分离开始 ########
        # 匹配图片
        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动静分离：图片资源实践** ####

![59cf452677733ad567f4d6f0fdd0b4ba.png][]

#### **Nginx动静分离：html资源实践Nginx** ####

![ff4ef86f111ca8a00e710e43bc926837.png][]

#### **Nginx动静分离：动态资源实践** ####

![0b4bafdc830dd7fd9863dd47c93d7eb6.png][]

## **三、最后** ##

最后一个小参数大家可能没有注意："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>

[54ce108b800dbfca674aaf142ef47464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/be66ca80cd114c789c7304eacb50db48.png
[11a3f2a019922792b4be3400a364dda8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5982194db1654d35b9c81003273983cb.png
[Link 1]: https://blog.csdn.net/lly576403061/article/details/129507650?spm=1001.2014.3001.5502
[f340da256aa3f169b10344892e5e283b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ca1372fdd1414bf28eb7642fd5cbba2b.png
[12a3d7c6dbed20c5bc472fcdf279f015.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e2411b875ba34a89a15b9b3dc26fcbac.png
[59cf452677733ad567f4d6f0fdd0b4ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/baa7973cd3474e7ea80d2d8156460999.png
[ff4ef86f111ca8a00e710e43bc926837.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5ba50dfacb60438eb45a13a71b4e8016.png
[0b4bafdc830dd7fd9863dd47c93d7eb6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/234bbf2e79bf47d499ab8f3bcf93a40c.png