Nginx 静态资源
静态资源类型
Nginx 作为静态资源 Web 服务器部署配置, 传输⾮常的⾼效, 常常⽤于静态资源处理, 请求, 动静分离
⾮服务器动态运⾏⽣成的⽂件属于静态资源
| 类型 | 种类 |
|---|---|
| 浏览器端渲染 | HTML、CSS、JS |
| 图片 | JPEG、GIF、PNG |
| 视频 | FLV MP4 |
| 文件 | TXT 任意下载文件 |
静态资源场景
静态资源传输延迟最⼩化
静态资源配置语法
1.⽂件读取⾼效 sendfile
Syntax: sendfile on | off;
Default: sendfile off;
Context: http, server, location, if in location2.提⾼⽹络传输效率 nopush
Syntax: tcp_nopush on | off;
Default: tcp_nopush off;
Context: http, server, location
作⽤: sendfile开启情况下, 提⾼⽹络包的’传输效率’2.与 tcp_nopush 之对应的配置 tcp_nodelay
Syntax: tcp_nodelay on | off;
Default: tcp_nodelay on;
Context: http, server, location
作⽤: 在keepalive连接下,提⾼⽹络的传输’实时性’
静态资源⽂件压缩
Nginx 将响应报⽂发送⾄客户端之前可以启⽤压缩功能，这能够有效地节约带宽，并提⾼响应⾄ 客户端的速度。
1.gzip 压缩配置语法
Syntax: gzip on | off;
Default: gzip off;
Context: http, server, location, if in location
作⽤: 传输压缩
2.gzip 压缩⽐率配置语法
Syntax: gzip_comp_level level;
Default: gzip_comp_level 1;
Context: http, server, location
作⽤: 压缩本身⽐较耗费服务端性能
3.gzip 压缩协议版本
Syntax: gzip_http_version 1.0 | 1.1;
Default: gzip_http_version 1.1;
Context: http, server, location
作⽤: 压缩使⽤在http哪个协议, 主流版本1.1
4.扩展压缩模块
Syntax: gzip_static on | off | always;
Default: gzip_static off;
Context: http, server, location
作⽤: 预读gzip功能
图⽚压缩案例
创建网页存放目录 并使用rz上传一张动态图片
mkdir -p /soft/code/images
cd /soft/code/images/
yum -y install lrzsz
rz
vi /usr/local/nginx/conf/nginx.conf
server {
listen 80;
server_name 192.168.1.1;
location ~ .*\.(jpg|gif|png)$ {
sendfile on;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png;
root /soft/code/images;
index index.html index.htm;
}
systemctl restart nginx ##重启nginx服务
访问:
http://192.168.1.1/1.gif
然后打开Fiddler 4进行抓包
下载地址点击获取
提取码:t9tj
没有开启 gzip 图⽚压缩
启⽤ gzip 压缩图⽚后(由于图⽚之前压缩过, 所以压缩⽐率不太明显)
⽂件压缩案例
创建文件
mkdir -p /soft/code/doc
cd /soft/code/doc
[root@localhost doc]# ls -lh /var/log/messages
-rw-------. 1 root root 180K 6月 3 00:38 /var/log/messages
[root@localhost doc]# cp /var/log/messages zps.txt
[root@localhost doc]# ll
总用量 180
-rw------- 1 root root 183329 6月 3 00:39 zps.txt
修改配置文件
vi /usr/local/nginx/conf/nginx.conf
server {
listen 80;
index index.html index.htm;
server_name 192.168.1.1;
location ~ .*\.(txt|xml)$ {
sendfile on;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/json application/x-javascript application /css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png;
root /soft/code/doc;
}
systemctl restart nginx ##重启nginx服务
访问:
http://192.168.1.1/zps.txt
然后打开Fiddler 4进行抓包
静态资源浏览器缓存
HTTP协议定义的缓存机制(如: Expires; Cache-control 等)
1.浏览器⽆缓存
浏览器请求->⽆缓存->请求WEB服务器->请求响应->呈现2.浏览器有缓存
浏览器请求->有缓存->校验过期->是否有更新->呈现
校验是否过期 Expires HTTP1.0, Cache-Control(max-age) HTTP1.1缓存配置语法 expires
Syntax: expires [modified] time;
expires epoch | max | off;
Default: expires off;
Context: http, server, location, if in location
作⽤: 添加Cache-Control Expires头
配置静态资源缓存
mkdir /soft/code/js
cd /soft/code/js
echo "zps
" > index.html
vi /usr/local/nginx/conf/nginx.conf
location ~ .*\.(js|css|html)$ {
root /soft/code/js;
expires 1h;
}
location ~ .*\.(jpg|gif|png)$ {
root /soft/code/images;
expires 7d;
}
systemctl restart nginx ##重启nginx服务
浏览器访问：
http://192.168.1.1/
http://192.168.1.1/1.gif
然后打开Fiddler 4进行抓包
开发代码没有正式上线时, 希望静态⽂件不被缓存
取消js css html等静态⽂件缓存
修改配置文件：
vi /usr/local/nginx/conf/nginx.conf
location ~ .*\.(css|js|swf|json|mp4|htm|html)$ {
add_header Cache-Control no-store;
add_header Pragma no-cache;
}
systemctl restart nginx ##重启nginx服务
浏览器访问：
http://192.168.1.1/
http://192.168.1.1/1.gif
然后打开Fiddler 4进行抓包
静态资源跨域访问
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个例子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器禁⽌跨域访问, 主要不安全, 容易出现 CSRF 攻击
Nginx 跨域访问配置
Syntax: add_header name value [always];
Default: —
Context: http, server, location, if in location
Access-Control-Allow-Origin
1.准备 html ⽂件
mkdir -p /web/benet
vi /web/benet/index.html
<!DOCTYPE html>