帮酷LOGO
0 0 评论

正文
文章标签:IMP  Nginx  模块  Header  浏览  HEAD  browser-caching  CAC  

介绍

在本教程中,我们介绍如何使用Nginx header模块实现浏览器缓存。

前提条件

要遵循本教程,你需要:

使用此初始服务器设置教程建立Ubuntu服务器,包括sudo非root用户。

在你的服务器上安装了Nginx。

除了header模块,我们还将在本文中使用Nginx map 模块,

步骤1创建测试文件

在这个步骤中,我们在缺省Nginx目录中创建几个测试文件,稍后使用这些文件来检查Nginx行为的默认值,然后测试浏览器缓存是否正在工作。

在默认Nginx目录中使用truncate创建一个叫test.html的文件,


sudo truncate -s 1k /var/www/html/test.html

以同样的方式创建几个测试文件: 一个jpg图像文件,一个css样式表和一个js JavaScript文件。


sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

下一步是检查Nginx是如何在我们刚刚创建的文件上发送缓存控制头的方式的。

步骤2检查默认行为

默认情况下,所有文件都有相同的默认缓存行为,为了探索这个问题,使用在步骤1中创建的HTML文件,但是你可以使用例子文件运行这些测试。

下面的命令从本地Nginx服务器请求一个文件,并且显示响应头。


curl -I http://localhost/test.html

你应该可以看到几个HTTP响应标头:


Output: Nginx response headersHTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:12:26 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag:"57d40685-400"
Accept-Ranges: bytes

在第二行中,你可以看到ETag头,它包含这个特定修订的特殊标识符,如果重复执行前面的curl命令,你将看到完全相同的ETag值。

当使用web浏览器时,如果浏览器想要在刷新页面时再次请求ETag,则将值存储并发回服务器。

我们可以用下面的命令在命令行上模拟,确保更改此命令中的ETag值以匹配以前输出中的ETag值。


curl -I -H 'If-None-Match:"57d40685-400"' http://localhost/test.html

响应现在将不同:


Output: Nginx response headersHTTP/1.1 304 Not Modified
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:20:31 GMT
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag:"57d40685-400"

这次,nginx会响应304 Not Modified,它不会再次通过网络发送文件; 而是告诉浏览器,它可以重用已经在本地下载的文件。

这种方法很有用,因为它减少了网络流量,但是它的缓存性能还不够好,ETag的问题是浏览器总是向服务器发送请求,询问它是否可以重用缓存文件,即使服务器用304响应而不是再次发送文件,但是,发出请求和接收响应仍然需要时间。

在下一步中,使用headers模块来附加缓存控制信息,这将使浏览器在本地缓存一些文件,而不用询问服务器是否可以这样做。

步骤3- -配置缓存控制和过期报头

除了ETag文件验证头,还有两个高速缓存控制响应标头: Cache-ControlExpiresCache-Control是更新版本,它比Expires更有用,如果你想更好地控制缓存行为,通常更有用。

如果设置了这些标头,它们可以告诉浏览器可以将请求的文件在本地保留一定的时间(一直到永远),而无需再次请求。如果未设置headers,浏览器将始终从服务器请求文件,需要响应200或304 not Modified。

我们可以使用header模块来设置这些HTTP头,header模块是Nginx核心模块,这意味着它不需要单独安装就可使用。

要添加header模块,请在nano或你喜欢的文本编辑器中打开默认的Nginx配置文件。


sudo nano /etc/nginx/sites-available/default

查找server配置块,它外观如下所示:

/etc/nginx/sites-available/default

. . .
# Default server configuration
#

server {
 listen 80 default_server;
 listen [::]:80 default_server;

. . .

在这里添加以下两个新部分: 在server块之前,定义缓存不同文件类型的时间,并在其中设置一个文件,以适当地设置缓存头。

修改/etc/nginx/sites-available/default

. . .
# Default server configuration
#

# Expires map
map $sent_http_content_type $expires {
 default off;
 text/html epoch;
 text/css max;
 application/javascript max;
 ~image/ max;
}

server {
 listen 80 default_server;
 listen [::]:80 default_server;

 expires $expires;
. . .

我们在此map中使用了几种不同的设置:

默认值设置为off,它不会添加缓存控制头,

对于text/html,我们值设置为epoch ,这是一个特殊值,它显式地在没有缓存的情况下结果,这强制浏览器总是询问网站是否最新。

对于text/cssapplication/javascript,它们是样式表和Javascript文件,我们值设置为max ,这意味着浏览器将缓存这些文件,从而减少了很多这些文件的请求量。

最后一个设置是~image/,它是一个正则表达式,它将在它MIME类型名称(image/jpgimage/png )中匹配所有包含image/的文件类型,像样式表一样,网站上经常有很多可以安全缓存的图像,所以,我们它设置为max

在服务器块中,Expires指令(标header模块的一部分)设置缓存控制头,它使用映射中$expires变量设置的值,这样,由于文件类型的不同,生成的header将不同。

保存并关闭文件以便退出。

若要启用新配置,请重新启动Nginx 。


sudo systemctl restart nginx

接下来,来确定我们的新配置。

步骤4测试浏览器缓存

对测试HTML文件执行与前面相同的请求。


curl -I http://localhost/test.html

这次响应将是不同的,你应该会看到另外两个HTTP响应标头:

nginx响应标头

HTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:48:53 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag:"57d40685-400"
Expires: Thu, 01 Jan 1970 00:00:01 GMT
Cache-Control: no-cache
Accept-Ranges: bytes

Expires标头显示过去的日期,Cache-Controlno-cache设置,这告诉浏览器如果有新版本的文件(使用ETag头,如前所示)。


curl -I http://localhost/test.jpg

nginx响应标头

HTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:50:41 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:36 GMT
Connection: keep-alive
ETag:"57d40688-400"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Accept-Ranges: bytes

在这种情况下,Expires在远程显示日期,Cache-Control包含max-age信息,它告诉浏览器缓存文件的时间,这告诉浏览器缓存下载的图像,所以,此图像的后续都将使用本地缓存。

结果应该与test.jstest.css相同,因为JavaScript和样式表文件都设置了缓存头文件。



文章标签:IMP  bro  浏览  模块  Ubuntu  CAC  HEAD  Header  

正文

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语