Nginx作为一款Web服务器，对静态资源的存取是基本功能。本文主要实战静态资源部署、及其压缩、缓存、防盗链。
什么是静态资源
- 图片
- 视频
- 音乐
- Word、PDF等文档
- 其他文件文档
静态资源部署的两种场景：
- 纯静态资源的web网页（有HTML、CSS、JS、img等）
- 专门存储和获取静态资源的服务器
- 在企业级开发中，通常会提供一个文件上传的功能，专门保存项目的所有文件资源。例如，我们在写博客时，通常会将图片上传到一个专门的地址（图床）
- 我们也会提供文件下载功能，专门为某些资源文件提供下载服务。例如，我们在下载游戏时，就是专门的文件下载服务器在提供支持
内容导览
第一个实例
- 准备静态资源项目
- 配置conf，指定静态资源的目录，以及映射关系
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types; # 导入资源类型文件
default_type application/octet-stream; # 默认类型
sendfile on;
keepalive_timeout 65;
server {
listen 8888; # 监听来自所有请求8000端口的IP
server_name localhost; # 指定服务器名字
location / {
root D:/temp/www/StaticWeb; # 指定静态Web项目的根地址
index index.html hello.html; # 指定默认的页面，即访问根目录时的页面
}
}
}
第10行代码以前的配置项，在【Nginx基础02：配置文件nginx.conf（Part1）】中搜索配置项关键字
第10行以后的配置项，在【Nginx基础03：配置文件nginx.conf（Part2）】中搜索配置项关键字root的作用是指定请求的根目录：也就是符合location后的匹配条件的请求，都将在root指定的配置目录下寻找静态资源
index：指定首页
- 测试
静态资源压缩
请仔细阅读下列nginx.conf源码及注释
# 省略worker_processes、events
http {
include mime.types;
default_type application/octet-stream;
#静态资源的优化配置。配置项说明：https://blog.hackyle.com/article/server/nginx-conf-part1#mcetoc_1gmn4f8ts2o
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
#只针对这个server中的静态资源进行压缩
#配置项说明：https://blog.hackyle.com/article/server/nginx-conf-part1#mcetoc_1gmn4f8ts2p
gzip on; #开启gzip功能
#gzip_types *; #压缩源文件类型,根据具体的访问资源类型设定
gzip_types image/jpeg;
gzip_comp_level 6; #gzip压缩级别
gzip_min_length 1024; #进行压缩响应页面的最小长度,content-length
gzip_buffers 4 16K; #缓存空间大小
gzip_http_version 1.1; #指定压缩响应所需要的最低HTTP请求版本
gzip_vary on; #往头信息中添加压缩标识
gzip_disable "MSIE [1-6]\."; #对IE6以下的版本都不进行压缩
location / {
root html;
index index.html index.htm;
}
#说明："~*"-开启正则，忽略大小写；"^ $"：正则的开头结尾
#"."-一个字符；"*"-0或任意个字符；"\."-转义小数点
#以任意字符开头，以png/jpg/jpeg结尾的请求将会打到这里
location ~* ^.*\.(png|jpg|jpeg)$ {
root images; #位置/usr/local/nginx/images/
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}没有开启缓存时的Response Headers
开启静态资源压缩后的Response Header
静态资源缓存
首次请求
- 用户首次通过浏览器发送请求到服务端获取数据，客户端是没有对应的缓存，所以需要发送request请求来获取数据；
- 服务端接收到请求后，获取服务端的数据及服务端缓存的允许后，返回200的成功状态码并且在响应头上附上对应资源以及缓存信息；
再次访问相同资源
- 客户端会在浏览器的缓存目录中查找是否存在响应的缓存文件
- 如果没有找到对应的缓存文件，则走首次请求的逻辑
- 如果有缓存文件，判断缓存文件是否过期（Expires）
- 如果没有过期，则直接从本地缓存中返回数据进行展示
- 如果Expires过期，请求服务器判断缓存文件是否发生过变化（ETag(Entity Tag)， Last-Modified）
- 判断结果是未发生变化，则服务端返回304，直接从缓存文件中获取数据
- 如果判断是发生了变化，重新从服务端获取数据，并根据缓存协商(服务端所设置的是否需要进行缓存数据的设置)来进行数据缓存。
http {
include mime.types;
default_type application/octet-stream;
#静态资源的优化配置
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
#配置项说明：https://blog.hackyle.com/article/server/nginx-conf-part1#mcetoc_1gmnct1mm5n
expires 10; #指定缓存的时间为10s
add_header Cache-Control public; #向响应头添加内容
location / {
root html;
index index.html index.htm;
}
#说明："~*"-开启正则，忽略大小写；"^ $"：正则的开头结尾
#"."-一个字符；"*"-0或任意个字符；"\."-转义小数点
location ~* ^.*\.(png|jpg|jpeg)$ { #以任意字符开头，以png/jpg/jpeg结尾的请求将会打到这里
root images; #位置/usr/local/nginx/images/
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
成功控制了Response Header中的Cache-Control
静态资源防盗链
Referer：出现在Request Header，告诉服务器，我本次请求是从那个页面来的
主要思想
- 后台服务器可以根据获取到的这个Referer信息来判断是否为自己信任的网站地址
- 如果是则放行继续访问，如果不是则可以返回403(服务端拒绝访问)的状态信息。
- 注意：可以使用地址重写（rewrite）将403替换为rewrite，返回一张带有提示用户这是一张盗链的图片
http {
include mime.types;
default_type application/octet-stream;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /test_referer {
#检查请求是否来自于本个服务
valid_referers hackyle.com;
if ($invalid_referer){
return 403;
}
default_type text/plain;
return 200 "test referer passed!";
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}测试
- 在html/index.html中新增一个超链接：<a href=”/test_referer”>test referrer</a>
- 重新加载Nginx配置文件：nginx -s reload
- 访问主页：http://localhost/
- 点击页面上的“test referer”，看到被限制了访问
Name:
Email:
Link: