静态资源WEB服务 | 不是第一

app
----static
    ------resources
    静态文件所在


location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
        # 静态文件所在目录
        root /app/static;
        index index.html;
        #expires定义用户浏览器缓存的时间为1天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力
        expires 1d;
}

# 页面 访问
# 去找寻 static 目录下的  resources/assets/spa.png
# http://192.168.1.60/resources/assets/spa.png
# http://192.168.1.60/resources/js/vue.js

静态资源类型非服务器动态运行生成的文件，换句话说，就是可以直接在服务器上找到对应文件的请求浏览器端渲染：HTML,CSS,JS 图片：JPEG,GIF,PNG 视频：FLV,MPEG 文件：TXT，任意下载文件
静态资源服务场景-CDN

什么是CDN？例如一个北京用户要请求一个文件，而文件放在的新疆的资源存储中心，如果直接请求新疆距离太远，延迟久。使用nginx静态资源回源，分发给北京的资源存储中心，让用户请求的动态定位到北京的资源存储中心请求，实现传输延迟的最小化
nginx静态资源配置


# 配置域：http、server、location

#文件高速读取
http {
     sendfile on;
}
#在 sendfile 开启的情况下，开启 tcp_nopush 提高网络包传输效率
#tcp_nopush 将文件一次性一起传输给客户端，就好像你有十个包裹，快递员一次送一个，来回十趟，开启后，快递员讲等待你十个包裹都派件，一趟一起送给你
http {
     sendfile on;
     tcp_nopush on;
}
#tcp_nodelay 开启实时传输，传输方式与 tcp_nopush 相反，追求实时性，但是它只有在长连接下才生效
http {
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;
}

#将访问的文件压缩传输 （减少文件资源大小，提高传输速度）
#当访问内容以gif或jpg结尾的资源时
location ~ .*\.(gif|jpg)$ {
    gzip on; #开启
    gzip_http_version 1.1; #服务器传输版本
    gzip_comp_level 2; #压缩比，越高压缩越多，压缩越高可能会消耗服务器性能
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png; #压缩文件类型
    root /opt/app/code; #对应目录（去该目录下寻找对应文件）
}

#直接访问已压缩文件
#当访问路径以download开头时，如www.baidu.com/download/test.img
#去/opt/app/code目录下寻找test.img.gz文件，返回到前端时已是可以浏览的img文件
location ~ load^/download {
    gzip_static on #开启;
    tcp_nopush on;
    root /opt/app/code;
}

实际项目


# linux 服务器项目为 8090
# 静态路径为 8090后的全路径 在 static 目录下配置
# 查看 nginx / logs / assess.log 可
# 浏览器 返回静态文件   Status Code: 200 OK (from memory cache)
# Response Headers Server: nginx/1.20.1





upstream lusifer.os.org {
    #server 192.168.1.60:8881;
    #server 192.168.1.60:8882;
    server 192.168.1.60:8090;
}



    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
     location / {
        proxy_pass http://lusifer.os.org;
           # root   html;
           # index  index.html index.htm;
        }

 location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {
root /app/static;
index index.html;
#expires定义用户浏览器缓存的时间为1天，如果静态页面不常更新，可以设置更长，这样可以节省带宽和缓解服务器的压力
expires 1d;
}

浏览器缓存

HTTP协议定义的缓存机制（如：Expires; Cache-control等）减少服务端的消耗，降低延迟

浏览器无缓存 浏览器请求 -> 无缓存 -> 请求WEB服务器 -> 请求相应 -> 呈现 在呈现阶段会根据缓存的设置在浏览器中生成缓存
浏览器有缓存 浏览器请求 -> 有缓存 -> 校验本地缓存时间是否过期 -> 没有过期 -> 呈现 若过期从新请求WEB服务器
语法配置

location ~ .*\.(html|htm)$ {
    expires 12h; #缓存12小时
}

服务器响应静态文件时，请求头信息会带上 etag 和 last_modified_since 2个标签值
浏览器下次去请求时，头信息发送这两个标签，服务器检测文件有没有发生变化，如无,直接头信息
返 etag 和last_modified_since，状态码为 304 ，浏览器知道内容无改变,于是直接调用本地缓存，这个过程也请求了服务，但是传着的内容极少

# 实际项目

# 浏览器缓存

实际项目

浏览器缓存