《前端运维》二、Nginx–3静态资源服务、跨域与其他「建议收藏」

一、静态资源服务首先,静态资源一般是指客户端发送请求到Web服务器,web服务器从内存中取得相应的文件,返回给客户端,客户端解析并渲染出来。动态资源呢,则是由客户端发起请求,先交由web容器,web

大家好,又见面了,我是你们的朋友全栈君。

一、静态资源服务

  首先,静态资源一般是指客户端发送请求到Web服务器,web服务器从内存中取得相应的文件,返回给客户端,客户端解析并渲染出来。动态资源呢,则是由客户端发起请求,先交由web容器,web容器连接数据库,数据库处理数据之后,将内容交给web服务器,web服务器返回给客户端解析并渲染。

  一般的静态资源有:HTML、CSS、JS、JPEG、PNG、MPEG、Word、EXCEL等。

  CDN的全称是Content Delivery Network,即内容分发网络。CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

一、配置语法

1、sendfile

  不经过用户内核发送文件。

语法:

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

2、tcp_nopush

  在sendfile开启的情况下,合并多个数据包,提高网络包的传输效率。

语法:

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

3、tcp_nodelay

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

语法:

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

4、gzip

  压缩文件可以节约带宽和提高网络传输效率。

语法:

Syntax: gzip on / off;
Default: gzip off
Context: http,server,location

5、gzip_comp_level

  压缩比率越高,文件被压缩的体积越小。

语法:

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

6、gzip_http_version

  压缩版本。

语法:

Syntax: gzip_http_version 1.0/1.1
Default: gzip_http_version 1.1
Context: http,server,location

7、http_gzip-static_module

   先找磁盘上找同名的.gz这个文件是否存在,节约CPU的压缩时间和性能损耗。

  http_gzip_static_module:预计gzip模块。

  http_gunzip_module :应用支持gunzip的压缩方式。

语法:

Syntax: gzip_static on/off
Default: gzip_static off
Context: http,server,location

二、实战例子

  首先,我们先建个目录:

mkdir -p /data/www/images
mkdir -p /data/www/html
mkdir -p /data/www/js
mkdir -p /data/www/css
mkdir -p /data/www/download

  文件夹有了,我们可以创建一些对应的文件,随便写,放到对应的目录下就好了。(这里,如果觉得vi不好用的话,可以在本地创建后,通过ftp传输到服务器)。

  然后,我们到/etc/nginx/nginx.conf中进行配置:

    location ~ .*\.(jpg|png|gif)$ {
        gzip off;# 关闭压缩
        root /data/www/images;
    }

    location ~ .*\.(html|js|css)$ {
        gzip_static on;
        gzip on; # 启用压缩
        gzip_min_length 1k;    # 只压缩超过1K的文件
        gzip_http_version 1.1; # 启用gzip压缩所需的HTTP最低版本
        gzip_comp_level 9;     # 压缩级别,压缩比率越高文件被压缩的体积越小
        gzip_types  text/css application/javascript;# 进行压缩的文件类型
        root /data/www/html;
    }

    location ~ ^/download {
        gzip_static on; # 启用压缩
        tcp_nopush on;  # 不要着急发,攒一波再发
        root /data/www; # 注意此处目录是`/data/www`而不是`/data/www/download`
    } 

  这段代码写在符合语法的位置即可。然后重启nginx服务。但是呢,你访问html页面的时候,发现,欸?http的header中没有gzip的字段。咋回事?可能是因为你的文件体积太小,没有触发压缩。咱们换个大点的试试,比如下载个jquery,复制到你的服务器上试一下。

《前端运维》二、Nginx--3静态资源服务、跨域与其他「建议收藏」

 

  然后,它就压缩了。

 

二、跨域与其他

1、跨域

  跨域的概念简单来说就是是指一个域下的文档或脚本试图去请求另一个域下的资源。

语法:

Syntax: add_header name value
Default: add_header --
Context: http,server,location

实战:

  我们参照之前的模式,创建一个json的文件夹,在里面加上一个json文件。

mkdir -p /data/json
cd /data/json
vi user.json
# 随便写点内容

  然后配置:

location ~ .*\.json$ {
     add_header Access-Control-Allow-Origin http://127.0.0.1:8080;
     add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
     root /data/json;
}

  然后再index.html里请求这个json:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<script>
let xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://115.29.148.6/user.json', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
xhr.send();
</script>
</body>
</html>

  然后呢,我们可以在本地启动一个http-server,访问咱们的这个index页面,启动的话,在index.html所属的目录下启动http-server即可。要安装node哦,http-server是node的一个模块。

2、浏览器缓存

  我们先来看张图,理解下:

《前端运维》二、Nginx--3静态资源服务、跨域与其他「建议收藏」

  浏览器缓存这一块,实际上就是通过nginx配置头字段就可以了。比如:

语法:

Syntax: expires time
Default: expires off
Context: http,server,location

实战:

location ~ .*\.(jpg|png|gif)$ {
    expires 24h;
}

 

3、防盗链

  防盗链的作用,主要是用来防止网络资源被盗用,保证信息安全,防止流量过量。需要区别出哪些请求是非正常的用户请求。简单来说,就是允许哪些源(ip地址)来访问我的服务器资源。

语法:

Syntax: valid_referers none、block、server_names、IP
Default: --
Context: server,location

实战:

location ~ .*\.(jpg|png|gif)$ {
        expires 1h;
        gzip off;
        gzip_http_version 1.1;
        gzip_comp_level 3;
        gzip_types image/jpeg image/png image/gif;
        # none没有refer blocked非正式HTTP请求 特定IP
        valid_referers none blocked 115.29.148.6;
        if ($invalid_referer) { # 验证通过为0,不通过为1
            return 403;
        }
        root /data/images;
    }

   服务器的nginx里配置好了之后,跟跨域的例子类似,我们可以新建一个html文件,引用服务器的图片,开启了referer后,本地的请求就获取不到图片资源了,因为我们在服务器上做了限制。当然,如果你嫌麻烦的话,也可以使用curl来做测试:

curl -v -e "115.29.148.6" http://115.29.148.6/kf.jpg
curl -v -e "http://www.baidu.com" http://115.29.148.6/kf.jpg

 

  好啦,今天就到这里,后面还有一篇文章,学学代理和重定向啥的。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/124353.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 米的换算单位和公式_米的单位换算公式大全(长度单位大全表)

    米的换算单位和公式_米的单位换算公式大全(长度单位大全表)位换算题是小学低年级数学学习重点之一。单位换算记忆不够深刻,孩子经常混淆运用,容易出现计算失误,进率错误等问题。牢记单位换算口诀,才能准确计算。口诀:大化小,往右移,进率有几个“0”,就移几位。小化大,往左移,进率有几个“0”,就移几位。长度单位国际单位是“米”。最常见的有千米(km)、米(m)、分米(dm)、厘米(cm)、毫米(mm)。换算公式1千米(km)=1000米(m),1米(m)=10分…

    2022年7月11日
  • java 调用win32 api 学习总结

    java 调用win32 api 学习总结java使用JInvoke调用windowsAPI使用jinvoke调用windowsAPI。jna使用比较麻烦,需要写c代码和参数转换,jinvoke的使用就像jdk中的包一样。 官网使用参考:http://www.jinvoke.com/calling-the-win32-api-from-java 一个弹出框的例子(这种代码用于调用任何dll,不只是windows的

    2022年10月9日
  • Mac 安装 node.js 及环境配置[通俗易懂]

    Mac 安装 node.js 及环境配置[通俗易懂]目录安装node1:官网下载2:安装3:验证4:环境配置安装node1:官网下载访问nodejs官网,点击蓝色选框区域稳定版,并下载https://nodejs.org/en2:安装双击刚下载的文件,按步骤默认安装就行3:验证安装完成后打开终端输入npm-vnode-v两个命令,如下图出现版本信息,说明安装成功4:环境配置1:打开Mac终端,配置全局环境变量vim.bash_profile2:打开之后添加一行以下代码,(Mac的node,npm可执行文件都在/usr

    2022年5月13日
  • 进制转换(二进制、八进制、十进制、十六进制)涵盖整数与小数部分,超详细

    进制转换(二进制、八进制、十进制、十六进制)涵盖整数与小数部分,超详细今天来总结一下各种进制转换问题,详细齐全易于理解,希望对你有帮助哦!先从我们最熟悉的十进制入手吧,其他进制与十进制的转换方法都是一样的,保证能全部记住!整型有4种进制形式:1.十进制:都是以0-9这九个数字组成,不能以0开头。2.二进制:由0和1两个数字组成。3.八进制:由0-7数字组成,为了区分与其他进制的数字区别,开头都是以0开始。4.十六进制:由0-9和A-F组成。为了区分于其他数字的区别,开头都是以0x开始。先来贴一张进制转换表:一、十进制转换成二进制、八进制、十六进制

    2022年10月17日
  • js动画效果大全_jquery 动画

    js动画效果大全_jquery 动画动画基础(1)位置(2)时间(3)设置时间增量(4)抽象用动画增强网页效果(1)设置动画(2)变量作用域(3)改进(4)生成HTML标记添加安全检查

    2022年8月31日
  • ORACLE中函数MONTHS_BETWEEN的使用

    ORACLE中函数MONTHS_BETWEEN的使用转自:https://www.cnblogs.com/pumushan/p/6655204.html格式:MONTHS_BETWEEN(DATE1,DATE2)MONTHS_BETWEEN函数返回两个日期之间的月份数。SQL&gt;selectmonths_between(to_date(‘20090228′,’yyyymmdd’),to_date(‘20080228’,’y…

    2022年7月12日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号