Nginx实战操作-动静分离

波波烤鸭 2020-11-13 05:00:08
nginx 实战 分离 操作 动静


本文我们继续来介绍nginx的实际操作,本文来介绍下Nginx的动静分离的实现。

动静分离

在这里插入图片描述

Nginx动静分离实战

动静分离案例

1.nginx目录下创建static文件夹,放入图片或者js文件

2.利用前面的8081服务作为我们的动态资源服务

3.Nginx中配置动静分离

server{

listen 80;
server_name localhost;
location / {

proxy_pass http://192.168.12.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
proxy_connect_timeout 60s;
}
location ~ .*\.(gif|jpg|ico|png|css|svg|js)$ {

root static;
}
}

4.重新加载配置文件

在这里插入图片描述
在这里插入图片描述

动静分离的好处是什么呢?
第一个,Nginx本身就是一个高性能的静态web服务器;
第二个,其实静态文件有一个特点就是基本上变化不大,所以动静分离以后我们可以对静态文件进行缓存、或者压缩提高网站性能

缓存处理

浏览器缓存将文件保存在客户端,好的缓存策略可以减少对网络带宽的占用,可以提高访问速度,提高用户的体验,还可以减轻服务器的负担。因此我们有必要了解它的实现原理,用来提高网站的性能。
当一个客户端请求web服务器, 请求的内容可以从以下几个地方获取:服务器、浏览器缓存中或缓存服务器中。这取决于服务器端输出的页面信息。页面文件有三种缓存状态。

  1. 最新的:选择不缓存页面,每次请求时都从服务器获取最新的内容。
  2. 未过期的:在给定的时间内缓存,如果用户刷新或页面过期则去服务器请求,否则将读取本地的缓存,这样可以提高浏览速度。
  3. 过期的:也就是陈旧的页面,当请求这个页面时,必须进行重新获取。
    页面缓存状态是由http header决定的,一个浏览器请求信息,一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定,Cache-Control由HTTP/1.1规定没有缓存之前

在这里插入图片描述
在没设置缓存之前,访问相应的网站,如果请求的文件没有变化,会出现 from memory cache,从内存中获取数据。这是因为nginx在处理本地资源的时候,会自动追加一个Etag(对象的标志值,就一个对象而言,文件被修改,Etag也会修改)和Last-modified(WEB 服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间)头部信息,chrome在收到携带了这两个信息的资源并且在没有设置expires头部的情况下,会自动决定过期策略,chrome会保存这个过期策略,下次请求的时候会直接from memory cache。
但是在实际应用中,我们必须要强制指定expire策略,而不是由chrome来自动决定

Nginx可以通过expires设置缓存,比如我们可以针对图片做缓存,因为图片这类信息基本上不会改变。
在location中设置expires
格式: expires 30s|m|h|d

location ~ .*\.(jpg|jpeg|gif|bmp|png|js|css|ico)$ {

root static;
expires 1d;
}

在这里插入图片描述

动静分离的压缩优化

我们一个网站一定会包含很多的静态文件,比如图片、脚本、样式等等,而这些css/js可能本身会比较大,那么在网络传输的时候就会比较慢,从而导致网站的渲染速度。因此Nginx中提供了一种Gzip的压缩优化手段,可以对后端的文件进行压缩传输,压缩以后的好处在于能够降低文件的大小来提高传输效率。我们访问某个网站,获取一个js文件,将该文件保存下来,对比传输大小和实际大小; 传输大小比实际大小要小很多,举个例子来看看。
没有压缩前,

在这里插入图片描述放入到static中,访问

在这里插入图片描述

没有什么变化,然后我们加上压缩

参数 默认
Gzip on|off 是否开启gzip压缩
Gzip_buffers 4 16k 设置gzip申请内存的大小,作用是按指定大小的倍数申请内存空间。4 16k代表按照原始数据大小以16k为单位的4倍申请内存。
Gzip_comp_level[1-9] 压缩级别, 级别越高,压缩越小,但是会占用CPU资源
Gzip_disable 正则匹配UA 表示什么样的浏览器不进行gzip
Gzip_min_length 开始压缩的最小长度(小于多少就不做压缩),可以指定单位,比如 1k
Gzip_http_version 1.0|1.1 表示开始压缩的http协议版本
Gzip_proxied nginx 做前端代理时启用该选项,表示无论后端服务器的headers头返回什么信息,都无条件启用压缩
Gzip_type text/pliain,application/xml 对那些类型的文件做压缩 (conf/mime.conf)
Gzip_vary on|off 是否传输gzip压缩标识; 启用应答头"Vary: Accept-Encoding";给代理服务器用的,有的浏览器支持压缩,有的不支持,所以避免浪费不支持的也压缩,所以根据客户端的HTTP头来判断,是否需要压缩
 gzip on;
gzip_min_length 5k;
gzip_buffers 4 16k;
gzip_comp_level 3;
gzip_types application/javascript image/jpeg;
gzip_vary on;

重新加载配置文件测试 你会发现图片被压缩了近1/3.

最后大家注意:

  1. 图片、mp3这样的二进制文件,没必要做压缩处理,因为这类文件压缩比很小,压缩过程会耗费CPU资源
  2. 太小的文件没必要压缩,因为压缩以后会增加一些头信息,反而导致文件变大
  3. Nginx默认只对text/html进行压缩 ,如果要对html之外的内容进行压缩传输,我们需要手动来配置
版权声明
本文为[波波烤鸭]所创,转载请带上原文链接,感谢
https://dpb-bobokaoya-sm.blog.csdn.net/article/details/106275209

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple