前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Nginx静态资源应用场景与跨域配置示例

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

作者头像
小柒吃地瓜
发布2020-04-23 17:21:57
1.9K0
发布2020-04-23 17:21:57
举报
文章被收录于专栏:梦在深巷

静态资源WEB服务应用场景


5.1静态资源WEB服务

5.2静态资源的类型

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

5.3静态资源服务场景-CDN

5.4文件读取配置

5.4.1sendfile配置
代码语言:javascript
复制
#sendfile配置规则
Syntax:    sendfile on | off;
Default:    
sendfile off;
Context:    http, server, location, if in location
  • 随着nginx版本的越来越高,nginx支持--with-file-aio异步文件读取
5.4.2tcp_nopush配置
代码语言:javascript
复制
#tcp_nopush配置规则
Syntax:    tcp_nopush on | off;
Default:    
tcp_nopush off;
Context:    http, server, location
  • 作用:sendfile开启的情况下,提高网络包的传输效率
5.4.3tcp_nodelay配置
代码语言:javascript
复制
#tcp_nodelay配置规则
Syntax:    tcp_nodelay on | off;
Default:    
tcp_nodelay on;
Context:    http, server, location
  • 作用:keepalive链接下,提高网络包的传输实时性
5.4.4gzip压缩
代码语言:javascript
复制
#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
代码语言:javascript
复制
#gzip_static配置规则
Syntax:    gzip_static on | off | always;
Default:    
gzip_static off;
Context:    http, server, location
5.4.6图片无压缩预览效果
代码语言:javascript
复制
    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图片压缩后效果预览
代码语言:javascript
复制
    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文本无压缩预览
代码语言:javascript
复制
    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文本压缩预览
代码语言:javascript
复制
    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预读压缩预览
代码语言:javascript
复制
    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配置
代码语言:javascript
复制
#配置规则
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开启缓存过期验证
代码语言:javascript
复制
location ~ .*\.(html|htm)$ {
    expires 2m;
    root /opt/app/code;
}

5.6跨站访问

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

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

5.6.1add_header设置
代码语言:javascript
复制
#配置规则
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设置
代码语言:javascript
复制
#设置规则
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://cloud.tencent.com/developer/article/1619676

本站所有原创文章采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源和作者署名并说明文章非原创且不可用于商业目的。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020 年 02 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 静态资源WEB服务应用场景
    • 5.1静态资源WEB服务
      • 5.2静态资源的类型
        • 5.3静态资源服务场景-CDN
          • 5.4文件读取配置
            • 5.4.1sendfile配置
            • 5.4.2tcp_nopush配置
            • 5.4.3tcp_nodelay配置
            • 5.4.4gzip压缩
            • 5.4.5扩展Nginx压缩-预压gzip
            • 5.4.6图片无压缩预览效果
            • 5.4.7图片压缩后效果预览
            • 5.4.8文本无压缩预览
            • 5.4.9文本压缩预览
            • 5.4.10预读压缩预览
          • 5.5浏览器缓存
            • 5.5.1校验过期机制
            • 5.5.3未开启缓存过期
            • 5.2.4开启缓存过期验证
          • 5.6跨站访问
            • 5.6.1add_header设置
          • 5.7防盗链设置
            • 5.7.1http_referer设置
        相关产品与服务
        文件存储
        文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档