Nginx学习笔记——场景实践之《静态资源web服务》

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012525096/article/details/82944399

前备知识

适用场景

在这里插入图片描述

静态资源

非服务器动态运行生成的文件

类型 种类
浏览器端渲染 HTML、CSS、JS
图片 JPEG、GIF、PNG
视频 FLV、MPEG
文件 TXT等任意下载文件

CDN

内容分发网络,草图如下:
在这里插入图片描述

功能1:静态资源的访问

语法配置

Linux下零拷贝技术:

Syntax:sendfile on | off;
Default:sendfile off;
Context:http,server,location,if in location

sendfile开启的情况下,提高网络包的传输效率

Syntax:tcp_nopush on | off;
Default:tcp_nopush off;
Context:http,server,location

keepalive连接下,提高网络包的传输实时性

Syntax:tcp_nodelay on | off;
Default:tcp_nodelay on;
Context:http,server,location

压缩配置

压缩传输:

Syntax:gzip on | off;
Default:gzip off;
Context:http,server,location,if in location

压缩比:

Syntax:gzip_comp_level level;
Default:gzip_comp_level 1;
Context:http,server,location

压缩版本:

Syntax:gzip_http_version 1.0 | 1.1;
Default:gzip_http_version 1.1;
Context:http,server,location

扩展Nginx压缩模块

(1)http_gzip_static_module,预读gzip功能
(2)http_gunzip_module,应用支持gunzip的压缩方式(很少)

场景演示

首先修改配置文件如下:

server {
    sendfile on;
    #charset koi8-r;
    access_log  /var/log/nginx/log/static_access.log  main;
    
    location ~ .*\.(jpg|gif|png)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root  /opt/app/code/images;
    }

    location ~ .*\.(txt|xml)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 1;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root  /opt/app/code/doc;
    }
![在这里插入图片描述](https://img-blog.csdn.net/20181005152546199?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1MjUwOTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
    location ~ ^/download {
        gzip_static on;
        tcp_nopush on;
        root /opt/app/code;
    }
}

注:
(1)以*.jpg|gif|png的链接都会去/opt/app/code/images下寻找资源,下同。
(2)开启gzip后,会使文件大小变小,但主要针对文本压缩比大一点。
(3)ip/download/...,若开启gzip_static功能,会自动寻找对应的.gz压缩文件去进行下载,若没开启且进行了压缩,则文件找不到。

功能2:浏览器缓存

HTTP协议定义的缓存机制(如:Expires,Cache-control等)

流程

无缓存

在这里插入图片描述

有缓存

在这里插入图片描述

校验过期机制

校验是否过期 Expires(HTTP1.0)、Cache-Control(max-age)(HTTP1.1)
协议中Etag头信息的校验 Etag
Last-Modified头信息校验 Last-Modified

流程图

在这里插入图片描述

配置语法

expires

添加Cache-control、Expires头

Syntax:expires [modified] time;
        expries epoch | max | off;
Default:expires off;
Context:http,server,location,if in location

配置

/etc/nginx/conf.d/static_server.conf中增加如下代码:

    location ~ .*\.(html|htm)$ {
        #expires 24h;
        root /opt/app/code;
    }

测试

没配置expires

(1)首次访问:
在这里插入图片描述
(2)二次访问:
在这里插入图片描述

配置expires

(1)首次访问,response信息多了Cache-Control和Expires头信息。
在这里插入图片描述
(2)二次访问
在这里插入图片描述

功能3:跨域访问

跨域访问如下图所示:
在这里插入图片描述
注:浏览器禁止跨域访问,因为不安全,容易出现CSRF攻击!

配置语法

Syntax:add_header name value [always];
Default:默认无
Context:http,server,location,if in location

配置

/etc/nginx/conf.d/static_server.conf中增加如下代码:

    location ~ .*\.(html|htm)$ {
        add_header Access-Control-Allow-Origin http://192.168.174.132;
        add_header Access-Control-Allow-Method GET,POST,PUT,DELETE,OPTIONS;
        root /opt/app/code;
    }

添加测试HTML:

<html lang="en">
<head>  
<meta charset="UTF-8" />  
<title>测试ajax和跨域访问</title>  
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
</head>
<script type="text/javascript">  
$(document).ready(function(){  
    $.ajax({  
        type: "GET",  
        url: "http://192.168.174.132/1.html",  
        success: function(data) {   
            alert("sucess!!!");  
        },  
        error: function() {  
            alert("fail!!!,请刷新再试!");  
        }  
    });  
});  
</script>
<body>
     <h1>测试跨域访问</h1>
</body>
</html>

测试

在未开启add_header时,访问该页面:
弹出提示fail,打开F12,Console,提示该网站禁止Access-Control-Allow-Origin。
在这里插入图片描述
开启Access-Control-Allow-Origin 后,提示success。

功能4:防盗链

目的:防止资源被盗用

防盗链的首要方式:区别哪些请求时非正常的用户请求。

http_refer防盗链配置语法

Syntax:valid_referers none | blocked | server_names | string ...;
Default:默认无
Context:server,location

valid_referers表示允许哪些IP进行访问(后面的string)。
none表示没有带refer信息的进行访问。
blocked表示refer信息不是标准的HTTP也可以进行访问。

配置

/etc/nginx/conf.d/static_server.conf中加入如下配置:

    location ~ .*\.(jpg|gif|png)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        valid_referers none blocked 192.168.174.132;
        if ($invalid_referer) {
            return 403;
        }
        root  /opt/app/code/images;
    }

当不符合上面的规则时,invalid_referer将会是1,返回403。
补:valid_referers后的string,也是支持正则的形式,如~/google\./

测试

使用curl -e "http://www.baidu.com" -I http://192.168.174.132/wei.png
日志显示:192.168.174.132 - - [05/Oct/2018:17:25:41 +0800] "HEAD /wei.png HTTP/1.1" 403 0 "http://www.baidu.com" "curl/7.29.0" "-"
注:返回状态码是403。
使用curl -e "http://192.168.174.132" -I http://192.168.174.132/wei.png
日志显示:192.168.174.132 - - [05/Oct/2018:17:26:15 +0800] "HEAD /wei.png HTTP/1.1" 200 0 "http://192.168.174.132" "curl/7.29.0" "-"
注:返回状态码是200。

猜你喜欢

转载自blog.csdn.net/u012525096/article/details/82944399