Nginx actual operation separation of dynamic and static

Bobo roast duck 2020-11-13 05:00:08
nginx actual operation separation dynamic

In this article, we continue to introduce nginx Actual operation of , Here's how Nginx The realization of the separation of the static and the dynamic .

Dynamic and static separation

 Insert picture description here

Nginx Separation of movement and stillness

The separation of static and dynamic cases

1.nginx Create under directory static Folder , Put in pictures or js file

2. Use the front 8081 Service as our dynamic resource service

3.Nginx The static and dynamic separation is configured in the


listen 80;
server_name localhost;
location / {

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. Reload the configuration file

 Insert picture description here
 Insert picture description here

What are the benefits of separation of movement and stillness ?
first ,Nginx Itself is a high-performance static web The server ;
the second , In fact, a feature of static files is that they basically change little , So after the separation of static and dynamic, we can cache the static files 、 Or compression to improve website performance

Cache handling

The browser cache saves the file on the client , A good caching strategy can reduce the occupation of network bandwidth , Can improve access speed , Improve the user experience , It can also reduce the burden on the server . So it's necessary to understand how it works , To improve the performance of the website .
When a client requests web The server , The content of the request can be obtained from the following places : The server 、 In browser cache or cache server . This depends on the page information output from the server . Page files have three cache states .

  1. Abreast of the times : Choose not to cache pages , Get the latest content from the server on every request .
  2. Unexpired : Cache at a given time , If the user refreshes or the page expires, go to the server to request , Otherwise, the local cache will be read , This will speed up browsing .
  3. overdue : That's the old page , When this page is requested , It has to be recaptured .
    The page cache state is determined by http header Decisive , A browser requests information , One is the server response information . It mainly includes Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since. among Pragma: no-cache from HTTP/1.0 Regulations ,Cache-Control from HTTP/1.1 There is no cache before

 Insert picture description here
Before the cache is set , Visit the appropriate website , If the requested file does not change , There will be from memory cache, Get data from memory . This is because nginx When dealing with local resources , Will automatically add a Etag( The flag of the value object , As far as an object is concerned , The document was modified ,Etag It will also modify ) and Last-modified(WEB The server thinks that the last modification time of the object , For example, the last modification time of the file , Last generation time of dynamic page ) Header information ,chrome And these two resources are not set up in expires In the case of the head , Will automatically determine the expiration policy ,chrome This expiration policy will be saved , The next time you ask for it, it will be directly from memory cache.
But in practice , We have to make it mandatory expire Strategy , Rather than by chrome To decide automatically

Nginx Can pass expires Set the cache , For example, we can cache images , Because information like pictures basically doesn't change .
stay location Set in expires
Format : expires 30s|m|h|d

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

root static;
expires 1d;

 Insert picture description here

Compression optimization of static and dynamic separation

Our website must contain a lot of static files , Such as the picture 、 Script 、 Patterns and so on , And these css/js Maybe it's bigger in itself , Then the network transmission will be slower , This leads to the rendering speed of the website . therefore Nginx Provides a kind of Gzip Compression optimization means , It can compress and transfer the back-end files , The advantage of compression is that it can reduce the size of the file to improve the transmission efficiency . We visit a website , Get one js file , Save the file , Compare the transfer size to the actual size ; The transfer size is much smaller than the actual size , Take an example .
Before compression ,

 Insert picture description here Put in static in , visit

 Insert picture description here

Nothing has changed , And then we add compression

Parameters Default
Gzip on|off Open or not gzip Compress
Gzip_buffers 4 16k Set up gzip Application memory size , The function is to apply for memory space by multiple of the specified size .4 16k Represents the size of the original data to 16k Unit 4 Times application memory .
Gzip_comp_level[1-9] Compression level , The higher the level , Smaller compression , But it will occupy CPU resources
Gzip_disable Regular matching UA Indicates what kind of browser doesn't work gzip
Gzip_min_length Minimum length to start compression ( Less than how much is not compressed ), You can specify units , such as 1k
Gzip_http_version 1.0|1.1 Indicates the beginning of compression http Protocol version
Gzip_proxied nginx Enable this option when acting as a front-end agent , Indicates that no matter the backend server's headers What information does the head return , Compression is enabled unconditionally
Gzip_type text/pliain,application/xml Compress those types of files (conf/mime.conf)
Gzip_vary on|off Whether to transmit gzip Compression label ; Enable reply header "Vary: Accept-Encoding"; For the proxy server , Some browsers support compression , Some don't support , So avoid wasting what you don't support , So according to the client's HTTP Head to judge , Do you need compression
 gzip on;
gzip_min_length 5k;
gzip_buffers 4 16k;
gzip_comp_level 3;
gzip_types application/javascript image/jpeg;
gzip_vary on;

Reload configuration file test You'll find that the image is compressed close to 1/3.

Finally, please pay attention to :

  1. picture 、mp3 Such binary files , There's no need to compress , Because this kind of file compression ratio is very small , Compression costs CPU resources
  2. There is no need to compress files that are too small , Because some header information will be added after compression , Instead, it makes the file bigger
  3. Nginx Default only for text/html Compress , If you want to html The content outside carries on the compression transmission , We need to configure it manually
本文为[Bobo roast duck]所创,转载请带上原文链接,感谢

  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