Nginx 教程-动静分离
一、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>
Nginx 教程-动静分离相关推荐
- Docker构建Nginx+Tomcat动静分离架构
随着主流Nginx WEB服务器的发展,现在基于Nginx的WEB服务器已广泛应用于各大互联网企业.今天我们来使用docker构建我们的Linux+Nginx+Tomcat动静分离服务器. 1) ...
- nginx+tomcat动静分离结构
本文采用另一种策略对动静分离进行演示,它的大致结构如图 2 所示. 图 2. 本文设计的动静分离结构 在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 ...
- tomcat 如何跳转到apache_第二十期:基于tomcat部署jforum站点,并结合nginx实现动静分离...
一. 基于tomcat部署站点,并nginx实现动静分离 1.1 Tomcat部署 1.1.1 配置jdk #二进制安装 #解压 [root@node2local]# tar -xzvf jdk ...
- Nginx——配置动静分离
Nginx的动静分离是把不同的资源放到不同的服务器中,动态资源可以放到tomcat中,而静态资源可以放到其他位置 所谓动静分离,是为了加快网站的解析速度,把动态页面和静态页面分别部署到不同的服务器上来 ...
- K8S高可用集群架构部署 dashborad插件部署 Nginx实现动静分离 K8S在线升级
K8S官方文档 注意:该集群每个master节点都默认由kubeadm生成了etcd容器,组成etcd集群.正常使用集群,etcd的集群不能超过一半为down状态. docker的namespace: ...
- 使用nginx实现动静分离的负载均衡集群
架构图 本次要实现的架构图: 工作中我们希望这样: 静态文件处理:可以使用nginx 或apache 动文件处理: apache ,tomcat 图片文件处理: squid 我们可以使用nginx实现 ...
- Nginx的动静分离实验
Nginx的动静分离实验 1.如何区分静态文件和动态文件? location中: expires 60d:静态资源–>可以缓存,不会向服务器去请求: proxy_pass:把请求转发给某个组 f ...
- nginx使用-动静分离
一.概念 Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,简单的可以理解成使用 Nginx处理静态页面 ...
- 【网络编程】利用Nginx实现动静分离--分离动态请求和静态请求(Nginx+Tomcat)
文章目录 一.什么是动静分离 1.1 动静分离原理 1.2 Nginx实现动静分离的优势 二.动静分离的实现 2.1 先了解一下location语法 2.1.1 nginx模块 2.1.2 Nginx ...
最新文章
- SAP QM 通过控制图 (Control Chart) 的实现提升企业质量管理水平
- 日志服务器搭建之多服务器日志转发与格式化处理
- 学python心得体会1000字-Python学习心得体会总结,不要采坑
- 经典算法题每日演练——第十九题 双端队列
- pci总线定时协议_汽车总线测试的“解忧杂货店”
- 十六进制的几种输出方式
- 斗地主案例的代码实现
- go 关闭通道的必要性
- .NET CORE(C#) WPF亚克力窗体
- 【BZOJ - 3036】绿豆蛙的归宿(概率DAG图dp,拓扑排序,概率dp,期望的线性性)
- 信息学奥赛一本通(1223:An Easy Problem)
- 评“CPQuery, 解决拼接SQL的新方法”
- 学生管理系统(软件工程)
- 12000字深度研究六大消费品牌,挖掘私域战略价值
- 遇见CUBA CLI
- 小米MIX 2还没上一代震撼,为什么却说雷军更自信了?
- AngularJS PrimeNG 上传文件 进度条
- 程序中unsigned char 类型的意义
- JavaScript从初级往高级走系列————prototype
- H.324M 3G-324M