NGINX is a powerful tool for static content delivery (ex. images, JavaScript, CSS, etc.). It proposes a simple mechanism for caching on a client’s side allowing to reduce server load and increase content delivery speed.
Below an example of server configuration is shown.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
server { listen 80; server_name www.example.com; root /var/www/html/example.com/; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Host $host; location ~* .(ico|jpg|png|gif|jpeg|css|swf|js|woff)$ { access_log off; gzip_static on; gzip_comp_level 5; expires 1M; add_header Cache-Control private; # add_header Cache-Control public; try_files $uri @proxy; } location @proxy { proxy_pass http://www.example.com:8080; } location ~ { proxy_pass http://www.example.com:8080; } } |
Let us examine it.
We specify the port which should be used by our caching proxy (NGINX):
|
1 |
listen 80; |
We specify website URL:
|
1 |
server_name www.example.com; |
Then we configure directory where server should look for the static files:
|
1 |
root /var/www/html/example.com/; |
In order to serve the dynamic content properly we specify the following instructions that allow sending query and IP variables:
|
1 2 3 4 |
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Host $host; |
The next step will be to define processed extensions of static content files.
|
1 2 |
# caching of files with the following extensions ico, jpg, png, gif, jpeg, css, swf, js, woff location ~* .(ico|jpg|png|gif|jpeg|css|swf|js|woff)$ |
We disable logging of static content (increases content delivery speed and reduces the size of log files).
|
1 |
access_log off; |
Further on we enable gzip compression:
|
1 2 |
gzip_static on; gzip_comp_level 5; |
Most favorable compression size is 5. This can be seen from the table below:
| Compression rate | Number queries per second | Compressed size(original 170kb) |
| 1 | 370 | 51,7 |
| 2 | 350 | 48,9 |
| 3 | 294 | 45,7 |
| 4 | 242 | 44,2 |
| 5 | 181 | 41,3 |
| 6 | 134 | 39,7 |
| 7 | 115 | 39,5 |
| 8 | 103 | 39,4 |
| 9 | 102 | 39,4 |
Later we specify cache lifetime:
|
1 |
expires 1M; # - cached files will be stored by the client’s browser for 1 month |
The next step is to specify caching area:
|
1 |
add_header Cache-Control private; |
Directive «private» allows only browser caching, while «public» option tells to any invisible proxies to cache our content as well (more about Cache-Control header).
Then we try to deliver the requested file or if it is not found — pass request to the dynamic processor:
|
1 |
try_files $uri @proxy; |
In the end we should specify server address for processing dynamic content:
|
1 2 3 4 5 6 |
location ~ { proxy_pass http://www.example.com:8080;# - we proxy a query to the dynamic server. } location @proxy{ proxy_pass http://www.example.com:8080; } |
The NGINX configuration for static content delivery is finished.
Check out BelVG’s quality Magento extensions at our official store.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
hi, here is the answer.
Change
“location ~ {”
on 21 line
“location ~ ^/([A-Za-z0-9]+) {“
your code not work and return error:
nginx: [emerg] “proxy_pass” cannot have URI part in location given by regular expression, or inside named location, or inside “if” statement, or inside “limit_except” block
Thanks!