首页手记基于Nginx进行缓存配置

基于Nginx进行缓存配置

标签：

Html/CSS Nginx

之前有讲解过基于http协议讲解缓存头Cache-Control在服务中的应用，没有看过的同学感兴趣可以去了解下，本次基础Nginx代理服务器层面讲解下缓存的基本配置。

安装

可以在自己的本机或云服务器上进行调试，没有安装过Nginx看以下步骤进行安装使用，只讲解基于Mac系统的安装

安装 brew install nginx
查看版本 nginx -v
安装位置 /usr/local/etc/nginx
启动 sudo nginx
查看 nginx 是否启动成功

在浏览器中访问 http://localhost:8080，如果出现如下界面，则说明启动成功.

关闭nginx sudo nginx -s stop
重新加载nginx sudo nginx -s reload

修改hosts文件配置本地域名

在本机配置一个自己的域名，使用域名进行调试，主要是做了一个域名的解析映射，不清楚的了解下域名的DNS解析过程。

hosts位置:

Windows C:\windows\system32\drivers\etc\hosts
Mac /private/etc/hosts
Ubuntu /etc/hosts

vim hosts

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1 test.com

保存以上配置即可，127.0.0.1 test.com 在浏览中输入www.test.com域名，就可访问本地指定的网站，仅限于本地。

注意 Nginx中，要做好conf配置，让这些域名有所访问的对象，例如下面Nginx配置缓存处的test.com指向http://127.0.0.1:3010

查看是否配置成功可以打开cmd ping 一下配置的余名，例如上面配置的

ping test.com

PING test.com (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.047 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.095 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.084 ms
64 bytes from 127.0.0.1: icmp_seq=3 ttl=64 time=0.055 ms

nginx配置缓存

levels 是否要创建二级文件夹
keys_zone=my_cache:10m 代理缓存查找一个缓存之前要有个地方保存，一个url对应的缓存保存在哪个地方，这个关系是存在内存里的，这里要声明一个内存大小进行保存，my_cache是缓存的名字，在每个server里面可以去设置

修改conf配置，文件目录了 /usr/local/etc/nginx/servers/

vim nginx-cache.conf

proxy_cache_path /var/cache levels=1:2 keys_zone=my_cache:10m;

server {
    listen          80;
    server_name     test.com;

    location / {
        proxy_cache my_cache;
        proxy_pass http://127.0.0.1:3010;
        proxy_set_header Host $host; # 设置浏览器请求的host
    }
}

nginx-cache.js

以下s-maxage会代替max-age，只有在代理服务器（nginx代理服务器）才会生效
用来指定在发送一个请求时，只有在Vary指定的http的headers是相同的情况下，才会去使用缓存，例如User-Agent，IE、Firefox打开这个页面，CDN／代理服务器就会认为这是不同的页面，将会使用不同的缓存

const http = require('http');
const fs = require('fs');
const port = 3010;

const wait = seconds => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, seconds);
    })
}

http.createServer((request, response) => {
    console.log('request url: ', request.url);

    if (request.url === '/') {
        const html = fs.readFileSync('nginx-cache.html', 'utf-8');
    
        response.writeHead(200, {
            'Content-Type': 'text/html',
        });

        response.end(html);
    } else if (request.url === '/data') {
        response.writeHead(200, {
            'Cache-Control': 'max-age=20, s-max-age=20',
            'Vary': 'Test-Cache-Val'
        });

        wait(3000).then(() => response.end("success!"));
    }

}).listen(port);

console.log('server listening on port ', port);

ngxin-cache.html

<html>
    <head>
        <meta charset="utf-8" />
        <title>nginx-cache</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>
    </head>
    <body>
        <div>
            this is nginx-cache, and data is: <span id="data">请等待，数据获取中...</span>
        </div>
        <script>
            fetch('/data', {
                headers: {
                    'Test-Cache-Val': '123'
                }
            }).then((res => res.text())).then(text => {
                document.getElementById('data').innerText = text;
            });
        </script>
    </body>
</html>