设置头

中间代理在 http 协议下, 很轻松就可以修改 header 头, 比如常见的手机中国移动等运营商的广告.

server {
  listen      80;
  server_name test.com;

  location / {
    proxy_pass http://127.0.0.1:8888;
    # 如果不设置就是 http://127.0.0.1:8888 设置了的话就是 test.com
    proxy_set_header Host $host;
  }
}
1
2
3
4
5
6
7
8
9
10

Nginx 代理缓存

代理缓存设置

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

server {
	listen 		80;
	server_name a.test.com;

	location / {
		proxy_cache my_cache;
		proxy_pass http://localhost:8888;
		proxy_set_header Host $host;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

代理缓存测试

chrome 浏览器访问 a.test.com, 第一次结果延迟两秒展示, 再次刷新速度大幅提升

换别的浏览器如 firfox 去访问 a.test.com 第一次结果并没有延迟两秒展示, 这是因为 nginx 做了代理缓存设置,

当一个用户访问了资源, 就会缓存下来, 当其他用户访问时就从缓存取

header 设置

同时设置 max-age 和 s-maxage, 代理缓存会设置 s-maxage

response.writeHead(200, {
  'Cache-Control': 'max-age=20, s-maxage=20'
});
1
2
3

private 只允许浏览器缓存, 不允许代理服务器缓存.

response.writeHead(200, {
  'Cache-Control': 'max-age=20, private'
});
1
2
3

no-store 浏览器和代理服务器都不允许缓存

Vary 只有头信息一致才缓存.

response.writeHead(200, {
  'Cache-Control': 's-maxage=20',
  Vary: 'X-Test-Cache'
});
1
2
3
4
<body>
  <div>This is content <span id="data"><span></div>
  <button id="button">click me</button>
  <script>
    var index = 0

    function doRequest() {
      var data = document.getElementById('data')
      data.innerText = ''
      fetch('/data', {
        headers: {
          'X-Test-Cache': index++
        }
      }).then(function (response) {
        return response.text()
      }).then(function (text) {
        data.innerText = text
      })
    }
    document.getElementById('button').addEventListener('click', doRequest)
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

HTTPS

HTTP 明文传输, 传输的任意一层, 别人都可以抓到.

HTTPS 有公钥和私钥 image

Nginx 部署 HTTPS 服务

生成证书

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -keyout localhost-privkey.pem -out localhost-cert.pem
1

配置 HTTPS

server {
  listen 443;
  server_name a.test.com;

  ssl on;
  ssl_certificate_key certs/localhost-privkey.pem;
  ssl_certificate certs/localhost-cert.pem;

  location / {
    proxy_cache my_cache;
    proxy_pass http://localhost:8888;
    proxy_set_header Host $host;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

配置 HTTP 到 HTTPS

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name test.com;
  return 302 https://$server_name$request_uri;
}
1
2
3
4
5
6

HTTP2 优势 和 Nginx 配置 HTTP2

我们做 Node 开发只要做 HTTP/1.1 就好了, 用 Nginx 处理 HTTP2

优势

信道复用

分帧传输 (不一定要按顺序发送)

Server Push, 主动向客户端推送

推送实例

'Link': '</test.jpg>; as=image; rel=preload', 这里的路径跟 html 图片的路径保持一致.

rel=preload 服务端推送.

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

http
  .createServer(function(request, response) {
    console.log('request come', request.url);

    const html = fs.readFileSync('test.html', 'utf8');
    const img = fs.readFileSync('test.jpg');
    if (request.url === '/') {
      response.writeHead(200, {
        'Content-Type': 'text/html',
        Connection: 'keep-alive',
        Link: '</test.jpg>; as=image; rel=preload'
      });
      response.end(html);
    } else {
      response.writeHead(200, {
        'Content-Type': 'image/jpg',
        Connection: 'keep-alive' // or close
      });
      response.end(img);
    }
  })
  .listen(8888);

console.log('server listening on 8888');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

test.html <img src="/test.jpg" alt=""> 与上面 server.js 的图片路径保持一致

Nginx 开启 HTTP2

server {
  listen       443 http2;
  server_name  test.com;
  http2_push_preload on;

  ssl on;
  ssl_certificate   ../certs/214758036890959.pem;
  ssl_certificate_key  ../certs/214758036890959.key;

  location / {
  proxy_cache my_cache;
  proxy_pass http://localhost:8888;
  proxy_set_header Host $host;
  add_header Strict-Transport-Security max-age=200;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

HTTP2 性能测试网站

性能测试网站

TOC