当前位置：首页 > news >正文

Nginx 教程-动静分离

news 2025/7/8 12:44:40

一、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挂载，当然这次也是使用挂载技术，有同学没有掌握的可以看这篇文章《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>