作品展示网站 源码,做外贸推广哪个网站好,北京海大网智网站建设制作公司,工程建设企业网站一、Nginx 动静分离理论1、概念今天学习和梳理Nginx动静分离#xff0c;动静分离是将网站静态资源#xff08;HTML#xff0c;JavaScript#xff0c;CSS#xff0c;img等文件#xff09;与后台应用分开部署#xff0c;之所以要进行动静分离#xff0c;其一为了提高前端…一、Nginx 动静分离理论1、概念今天学习和梳理Nginx动静分离动静分离是将网站静态资源HTMLJavaScriptCSSimg等文件与后台应用分开部署之所以要进行动静分离其一为了提高前端的响应速度其二就是为了将动态请求和静态请求进行分别部署后端各个服务各司其职提高处理性能。这里的“动静分离”看似是动态资源和静态资源的分离也可以看成是静态请求和动态请求的分离。即使用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的挂载技术。--restartalways: 异常关闭后重新尝试启动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 --restartalways --namenginx -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:latest3、挂在文件修改在配置文件里咱们创建三个 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资源实践NginxNginx动静分离动态资源实践三、最后最后一个小参数大家可能没有注意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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgemeta nameKeywords content关键字,关键词meta nameDescription content描述和简介titleTitle/titlestyle typetext/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
bodydiv classheartdiv classleft/divdiv classmiddle/divdiv classright/divpI Love You/p/div
/body
/html
