Nginx js and JPG image cache

Source: Internet
Author: User

Nginx js and JPG image cache settings

650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/78/4A/wKiom1Z5dgCyofYtAACJgMbHiSQ692.png "title=" image 201512231.png "alt=" Wkiom1z5dgcyofytaacjgmbhisq692.png "/>

Listen 80;

server_name xxxxx;

Index index.htm index.html;

root/to/path/;


Location ~. *\. (JS|CSS)? $

{

Expires 5d;


}

Location ~. *\. (gif|jpg|jpeg|png|bmp|swf) $

{

Expires 30d;

Valid_referers none blocked Www.xxxx *.xxxxxx;

if ($invalid _referer) {

Rewrite ^/http://www.xx.com/403.html;


}}

Http_referer is a part of the header, when the browser sends a request to the Web server, usually take referer, tell the server I was from which page link, server can get some information for processing.



Nginx Referer Restrictions

Syntax: valid_referers [None|blocked|server_names]

Using fields: Server, location

This instruction assigns a value of 0 or 1 to the $invalid _referer variable based on the Referer header.

This command can be used to implement the anti-theft chain function, if the Valid_referers list does not have a Referer header value, $invalid _referer will be set to 1.

Parameters can be made in the following form:

None means that there is no Referer header (empty, that is, direct access, such as opening a picture directly in the browser)

Blocked means to disguise the Referer header according to the firewall, such as: "Referer:xxxxxxx".

Server_names is a list of one or more servers, 0.5. Version 33 You can use the "*" wildcard character in the name later.


Example:


location/chat/{

Valid_referers none blocked so.com *.so.com;

if ($invalid _referer) {

return 403;

}

}






Use expires to enhance browser caching in Nginx

Expires [TIME|EPOCH|MAX|PFF] Default: The offexpires instruction controls the "expires" and "Cache-control" header headers in the HTTP reply, starting the role of the control page cache time: You can use positive or negative numbers. The value of the "Expires" header will be set by the current system time plus the set value. The time value also controls the value of "Cache-control": A negative number indicates a no-cache positive or zero means Max-age=time epoch: Specifies that the value of "Expires" is 1january,1970,00:00:01 Gmtmax: Specify " The value of Expires "is 31december2037 23:59:59gmt, and the value of" Cache-control "is 10 years. -1: Specifies that the value of "Expires" is the current server time -1s, which expires forever. OFF: Do not modify values for "Expires" and "Cache-control"


Expires uses a specific time and requires that the server and the client are in strict sync.

The Cache-control is used with the Max-age directive to specify how long the component is cached.

For browsers that do not support http1.1, you still need expires to control it. Therefore, it is best to specify two response headers. However, the HTTP specification specifies that the MAX-AGE directive overrides the expires header.


If you do not want the proxy or browser to cache, add the No-cache parameter or the private parameter:

# expires 1d;

Add_header Cache-control No-cache;

Add_header Cache-control Private;

This way, when the browser F5 refreshes, it still returns 200 instead of 304.


An example of a Nginx control cache is logged:

Expires 1d;

Add_header Cache-control No-cache;

Add_header Cache-control Private;

if (!-e $request _filename) {

Rewrite ^ (. *) http://test.zhaopin.com/index.html break;

# Add_header Cache-control No-cache;

# Add_header Cache-control Private;

When I wrote Add_header in rewrite, I found Add_header didn't work. Because it's written into the IF.



Apache's Mod_expires module makes it possible to set the date in a relative way, like Max-age, with the expires header, through the ExpiresDefault command. For example, a picture such as an expiration time of 10 years after the start of the request

<filematch "\. (GIF|JPG|JS|CSS) $ ">

ExpiresDefault "Access plus 10years"

</FileMatch>

It sends expires headers and Cache-control max-age headers like in the response.


Expires|etag Control Page Cache differences Expires: As mentioned in the previous article: the Expires Directive controls the "expires" and "Cache-control" header information in the HTTP response, starting the role of the control page cache time: You can use positive or negative numbers. The value of the "Expires" header will be set by the current system time plus the set value. The time value also controls the value of "Cache-control": A negative number indicates a no-cache positive or zero means Max-age=time epoch: Specifies that the value of "Expires" is 1january,1970,00:00:01 Gmtmax: Specify " The value of Expires "is 31DECEMBER203723:59:59GMT, and the value of" Cache-control "is 10 years. -1: Specifies that the value of "Expires" is the current server time -1s, which expires forever. OFF: Do not modify values for "Expires" and "Cache-control"


Expires uses a specific time and requires that the server and the client are in strict sync.

The Cache-control is used with the Max-age directive to specify how long the component is cached.

For browsers that do not support http1.1, you still need expires to control it. Therefore, it is best to specify two response headers. However, the HTTP specification specifies that the MAX-AGE directive overrides the expires header. Generally used to change the page is not very fast, if the cache expires, the browser before reusing it will first confirm that he is valid, is a "conditional GET request", if valid, return 304 status code. The expires is determined by the last-modified response header.




There are three main HTTP header messages that can be cached by the browser:


1, last-modified implement browser cache

Last-modified is based on the file update time to determine whether to send the load again. By returning the last-modified header information:


Get/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js http/1.1

Host:www.3mc2.com

user-agent:mozilla/5.0 (Windows NT6.1; wow64;rv:26.0) gecko/20100101firefox/26.0

accept:*/*

accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

Accept-encoding:gzip,deflate

Referer:http://www.3mc2.com/category/architecture

cookie:wp-settings-1=hidetb%3d0%26librarycontent%3dbrowse%26align%3dcenter%26urlbutton%3dnone%26editor% 3dtinymce%26wplink%3d0%26ed_size%3d508%26mfold%3do;wp-settings-time-1=1389840828

Connection:keep-alive

Http/1.1200ok

Server:nginx

Date:thu,16jan201415:47:24gmt

Content-type:application/x-javascript

Last-modified:thu,16jan201402:29:13gmt

Transfer-encoding:chunked

Connection:keep-alive

Content-encoding:gzip

Request again with If-modified-since header information and return 404:


get/wp-includes/js/jquery/jquery.js?ver=1.10.2http/1.1

Host:www.3mc2.com

user-agent:mozilla/5.0 (Windows NT6.1; wow64;rv:26.0) gecko/20100101firefox/26.0

accept:*/*

accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

Accept-encoding:gzip,deflate

Referer:http://www.3mc2.com/category/architecture/nginx

Connection:keep-alive

If-modified-since:thu,16jan201402:29:13gmt

Http/1.1304not Modified

Server:nginx

Date:thu,16jan201415:53:34gmt

Last-modified:thu,16jan201402:29:13gmt

Connection:keep-alive

My test environment is Firefox, the file with "? ver=" parameter in the URL will send the request again (return 304), the other files are not requested again.


2. ETag determines browser cache:

The principle of the ETag is the file resource number of an ETag value, response to the visitor, the visitor requests again, with this etag value, and the server side of the file requested by the ETag comparison, if it is different to resend the load, if the same, then return 304.


3. Expires Browser cache:

Expires is to set an expiration time for a resource, that is, no need to go to the server verification, directly through the browser itself to confirm whether it expires, so there is no additional traffic. This approach is well suited to infrequently changing resources. If the file changes more frequently, do not use expires to cache.


For this blog, CSS styles and JS scripts have basically been trained, so the best way is to expires to cache some content to the visitor's browser. Configure the Nginx configuration file to implement the relevant features:



server{

.....

root/www.3mc2.com;

Index index.html index.htm index.php;

Location~.*\. (gif|jpg|jpeg|bmp|png|ico|txt|mp3|mp4|swf) {

expires15d;

}

Location~.*\. (CSS|JS) {

expires12h;

}

......

}


This article from the "16 Period Squirrel & Frog" blog, declined reprint!

Nginx js and JPG image cache

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.