HTTP--http之Nginx緩存(九)

時間 2019-11-16

原文原文鏈接

目錄結構

nginx

test.conf

proxy_cache_path 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:8888;
            proxy_set_header Host $host;
        }
    }

本地

server.js
max-age=20用於設置服務器的緩存

const http = require('http');
const fs = require('fs');
const wait = (seconds) => {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve()
        },seconds * 1000)
    })
}
http.createServer(function(req, res) {
    console.log('request come', req.headers.host);
    if (req.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8');
        res.writeHead(200, {

        })
        res.end(html)   
    }
    if(req.url === '/data'){
        res.writeHead(200, {
            'Cache-Control':'max-age=20'
        })
        wait(2).then(() => {
            res.end('success') 
        })
    }
}).listen(8888)
console.log('server start at port 8888')

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>this is content, <span id="data"></span></div>
    <script>
        fetch('/data').then(function(res){
            return res.text()
        }).then(function(text){
            document.getElementById('data').innerText = text;
        })
    </script>
</body>
</html>

運行

第一次請求，等了2秒才顯示content
刷新，不用等待，直接顯示
等待20秒，請求2秒才顯示

請求頭

s-maxage=20

用於設置nginx的緩存html

第一次請求，等了2秒才顯示content
刷新，不用等待，直接顯示
等待20秒，請求2秒才顯示

if(req.url === '/data'){
        res.writeHead(200, {
            'Cache-Control':'max-age=2,s-maxage=20;'
        })
        wait(2).then(() => {
            res.end('success') 
        })
    }

private

每次請求，等了2秒才顯示contentnginx

if(req.url === '/data'){
        res.writeHead(200, {
            'Cache-Control':'max-age=2,s-maxage=20,private;'
        })
        wait(2).then(() => {
            res.end('success') 
        })
    }

驗證緩存

除了url相同外，還有別的判斷緩存的東西緩存

server.js

if(req.url === '/data'){
        res.writeHead(200, {
            'Cache-Control':'s-maxage=200;',
            'Vary':'X-Test-Cache'
        })
        wait(2).then(() => {
            res.end('success') 
        })
    }

test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>this is content, <span id="data"></span></div>
    <button id="button">click</button>
    <script>
        var index = 0;

        function doRequest() {
            var data = document.getElementById('data');
            data.innerText = '';
            fetch('/data',{
                headers:{
                    'X-Test-Cache':index++
                }
            }).then(function (res) {
                return res.text()
            }).then(function (text) {
                document.getElementById('data').innerText = text;
            })
        }
        document.getElementById('button').addEventListener('click',doRequest)
    </script>
</body>

</html>

因爲每次X-Test-Cache都不一樣，因此並不會緩存
服務器