专栏首页梦在深巷Nginx静态资源应用场景与跨域配置示例

Nginx静态资源应用场景与跨域配置示例

静态资源WEB服务应用场景


5.1静态资源WEB服务

5.2静态资源的类型

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

5.3静态资源服务场景-CDN

5.4文件读取配置

5.4.1sendfile配置

#sendfile配置规则
Syntax:    sendfile on | off;
Default:    
sendfile off;
Context:    http, server, location, if in location
  • 随着nginx版本的越来越高,nginx支持--with-file-aio异步文件读取

5.4.2tcp_nopush配置

#tcp_nopush配置规则
Syntax:    tcp_nopush on | off;
Default:    
tcp_nopush off;
Context:    http, server, location
  • 作用:sendfile开启的情况下,提高网络包的传输效率

5.4.3tcp_nodelay配置

#tcp_nodelay配置规则
Syntax:    tcp_nodelay on | off;
Default:    
tcp_nodelay on;
Context:    http, server, location
  • 作用:keepalive链接下,提高网络包的传输实时性

5.4.4gzip压缩

#gzip配置规则
Syntax:    gzip on | off;
Default:    
gzip off;
Context:    http, server, location, if in location

#gzip压缩等级
Syntax:    gzip_comp_level level;
Default:    
gzip_comp_level 1;
Context:    http, server, location

#http版本
Syntax:    gzip_http_version 1.0 | 1.1;
Default:    
gzip_http_version 1.1;
Context:    http, server, location
  • 作用:压缩传输,压缩等级越高.消耗的性能越大!

5.4.5扩展Nginx压缩-预压gzip

#gzip_static配置规则
Syntax:    gzip_static on | off | always;
Default:    
gzip_static off;
Context:    http, server, location

5.4.6图片无压缩预览效果

    listen       80;
    server_name  localhost;

    sendfile on;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.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;
    }

    location ~ ^/download {
    #gzip_static on;
    tcp_nopush on;
    root /opt/app/code;
    }
  • 效果预览

5.4.7图片压缩后效果预览

    listen       80;
    server_name  localhost;

    sendfile on;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.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;
    }

    location ~ ^/download {
    #gzip_static on;
    tcp_nopush on;
    root /opt/app/code;
    }
  • 压缩对比图

5.4.8文本无压缩预览

    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;
    }

    location ~ ^/download {
    #gzip_static on;
    tcp_nopush on;
    root /opt/app/code;
    }

#如果出现配置正确访问出现404则文件用户需要修改为nginx
chown nginx [文件名]
  • 效果预览

5.4.9文本压缩预览

    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;
    }
  • 效果预览

5.4.10预读压缩预览

    location ~ ^/download {
    gzip_static on;
    tcp_nopush on;
    root /opt/app/code;
    }
  • 效果预览

如果gzip_static off的话直接访问http://192.168.0.105/download/test.img是404并且不会下载.

5.5浏览器缓存

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

  • 浏览器无缓存请求流程图
  • 浏览器有缓存请求流程图

5.5.1校验过期机制

5.5.2expires配置
#配置规则
Syntax:    expires [modified] time;
expires epoch | max | off;
Default:    
expires off;
Context:    http, server, location, if in location

#配置方式
location ~ .*\.(html|htm)$ {
    #expires 2m;
    root /opt/app/code;
}

5.5.3未开启缓存过期

  • 第一次请求结果
  • 第二次请求结果

5.2.4开启缓存过期验证

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

5.6跨站访问

  • 跨域访问
  • 为什么浏览器禁止跨站访问

跨站访问不安全,容易出现CSRF攻击!

5.6.1add_header设置

#配置规则
Syntax:    add_header name value [always];
Default:    —
Context:    http, server, location, if in location

#Access-Control-Allow-Origin

#跨站请求代码
<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.0.105/1.html",
        success: function(data) {
                alert("sucess!!!") ;
        },
        error: function(){ 
            alert("fail!!!,请刷新再试!");
        }
    });
});
</script>
<body>
    <h1>测试跨域访问</h1>
</body>
</html>

#配置方法
location ~ .*\.(html|htm)$ {
    add_header Access-Control-Allow-Origin http://192.168.0.105;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    root /opt/app/code;
    }
  • 访问效果

5.7防盗链设置

目的:防止资源被盗用. 防盗链设置思路:区别那些请求是非正常用户的请求.

5.7.1http_referer设置

#设置规则
Syntax:    valid_referers none | blocked | server_names | string ...;
Default:    —
Context:    server, location

#配置方法
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.0.105;
    if ($invalid_referer) { #如果$invalid_referer非0 则返回403
        return 403;
    }

    root /opt/app/code/images;
}
  • 测试结果

referer防盗功能有限,


版权属于:龙之介大人 本文链接:https://i7dom.cn/238/2020/17/nginx-static-doc4.html 本站所有原创文章采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源和作者署名并说明文章非原创且不可用于商业目的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nginx的安装与配置文件详解

    Nginx 是使用一个 master 进程来管理多个 worker 进程提供服务。master 负责管理 worker 进程,而 worker 进程则提供真正的...

    小柒吃地瓜
  • SELinux的基本使用

    从进入了 CentOS 5.x 之后的 CentOS 版本中 (当然包括 CentOS 7),SELinux 已经是个非常完备的核心模块了!尤其 CentOS ...

    小柒吃地瓜
  • linux下文本比对sed与awk使用方法

    sed 本身也是一个管线命令,可以分析 standard input ! 而且 sed 还可以将数据进行取代、删除、新增、撷取特定行等等的功能!

    小柒吃地瓜
  • 【Python环境】Python机器学习库

    Python在科学计算领域,有两个重要的扩展模块:Numpy和Scipy。其中Numpy是一个用python实现的科学计算包。包括: 一个强大的N维数组对象Ar...

    陆勤_数据人网
  • 【Python环境】python数据挖掘领域工具包

    Python在科学计算领域,有两个重要的扩展模块:Numpy和Scipy。其中Numpy是一个用python实现的科学计算包。包括: 一个强大的N维数组对象Ar...

    陆勤_数据人网
  • Python机器学习工具包

    ? 作者 | 空木 来源 | CSDN社区 Python在科学计算领域,有两个重要的扩展模块:Numpy和Scipy。其中Numpy是一个用pytho...

    小小科
  • 第九节 netty前传-NIO 补充Path和File

    Java NIO.Path接口位于java.nio.file包中,所以Java Path接口的完全限定名称是java.nio.file.Path。

    用户1418372
  • nginx部署React项目

    nignx是一款非常优秀的服务器软件,前端工程师在开发完项目后,通常要将项目部署到服务器,我在部署项目时用的就是nginx。

    挥刀北上
  • Python补充02 Python小技巧

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 在这里列举一些我使用Python时积累的小...

    Vamei
  • 【开源】开源CRM系统 Coevery

    官网:http://www.coevery.com/ 源码:https://github.com/Coevery/Coevery 演示:http://coeve...

    逸鹏

扫码关注云+社区

领取腾讯云代金券