Nginx实战操作-动静分离

布满荆棘的人生 2023-02-11 07:19 11阅读 0赞

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

# 动静分离 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70]

## 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.重新加载配置文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 2]

动静分离的好处是什么呢？  
第一个，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规定没有缓存之前

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 3]  
  在没设置缓存之前，访问相应的网站，如果请求的文件没有变化，会出现 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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 4]

## 动静分离的压缩优化 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 5]放入到static中，访问

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 6]

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

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

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之外的内容进行压缩传输，我们需要手动来配置

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522104759476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200522104851261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200522104856514.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200522104943273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/202005221050326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200522105057473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200522105110715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTI2NTcz,size_16,color_FFFFFF,t_70