用nginx配置响应头和gzip，及测试实际效果

背景

想通过配置nginx，设置资源的响应头，从而来测试 Cache-Control里的配置字段对缓存的影响，并设置gzip，看看gzip的效果

此文假设您已安装好了nginx

操作前

先了解一些基本的linux操作

lsof -i:80
- 查看80端口，被使用的情况，可以看看nginx是否启动成功
kill 26032 pid （可以杀死对应的pid进程）

使用nginx的一些先决知识

nginx 默认开启在80端口，访问是 0.0.0.0
nginx -h 查看帮助
nginx -c filePath 可以使用自己自定义的nginx.conf

实际配置nginx

首先设计一下我们的目标：

访问 0.0.0.0/a 可以访问到本地我们自己写的 index.html，执行index.html后，根据里面的<link><script>在访问本地css或js资源，并为这些资源设置响应头，和gzip压缩
- 为什么此处不设计访问根路径0.0.0.0。直接访问80端口的根路径，可能会代理到其他地方去，保险起见，用其他路径

围绕目标，开始配置：

准备好index.html及对应资源代码，假设放在 /nginxTest （根路径下的nginxTest文件夹内）

copy一份nginx原生的nginx.conf 到 /nginxTest 目录内，或者直接改原生的，

copy的方法是 cp -R [path-A] [path-B] 把A copy一份到B

nginx原生的nginx.conf在哪个路径？输入：nginx -h，找到-c的位置，后面写了路径

xxxMacBook-Pro ~ % nginx -h       
nginx version: nginx/1.19.4
Usage: nginx [-?hvVtTq] [-s signal] [-c filename] [-p prefix] [-g directives]

Options:
  -?,-h         : this help
  -v            : show version and exit
  -V            : show version and configure options then exit
  -t            : test configuration and exit
  -T            : test configuration, dump it and exit
  -q            : suppress non-error messages during configuration testing
  -s signal     : send signal to a master process: stop, quit, reopen, reload
  -p prefix     : set prefix path (default: /usr/local/Cellar/nginx/1.19.4/)
  -c filename   : set configuration file (default: /usr/local/etc/nginx/nginx.conf)
  -g directives : set global directives out of configuration file
复制代码

读取nginx配置文件，启动nginx服务
- 终端输入 nginx，起nginx服务，就是读的原生nginx.conf
- 要读取自定义nginx.conf的方法：nginx -c /nginxTest/nginx.conf （上面步骤已cp）

配置nginx.conf，实现增加响应头和gzip

首先看看原生的长啥样（删除了部分注释）

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    include servers/*;
}
复制代码

根据原生的nginx.conf，我们增加几行

- #gzip  on;  # 找到这一行，删掉，在添加下面2行
+ gzip  on;
+ gzip_types application/javascript text/css text/xml;  # 给这里面的几种文件类型配置gzip

location / {
    ...
}
# 在上面的location对象的下面增加
location /a { # 配置代理/a路径， 0.0.0.0/a
     alias  /nginxTest;  # 访问/nginxTest 文件夹内的 index.html
     if ($request_filename ~ .*\.(css|js)$) # 如果文件是.css或.js 则，增加响应头
     {
           add_header Cache-Control max-age=36003600; # 返回200 测试强制缓存，不会发起请求（不会有请求头）
           # add_header Cache-Control no-cache; # 测试代码 返回304 测试协商缓存，会发起请求，确认资源是否更改（请求头会有 If-Modified-Since 字段，确认资源是否变更）
           # add_header Cache-Control no-store; # 测试代码 返回200 不缓存，必然要发起全新的请求（自然不会有 If-Modified-Since 字段）
     }
}
复制代码

最终测试效果

验证响应头Cache-Control 是否添加成功，以及Cache-Control设置max-age=36003600，no-cache，no-store的效果
看看gzip是否添加成功，以及gzip的效果

都添加成功！

Cache-Control的效果和预期的一致，预期如下，看注释：

add_header Cache-Control max-age=36003600; # 返回200 测试强制缓存，不会发起请求（不会有请求头）
# add_header Cache-Control no-cache; # 测试代码 返回304 测试协商缓存，会发起请求，确认资源是否更改（请求头会有 If-Modified-Since 字段，确认资源是否变更）
# add_header Cache-Control no-store; # 测试代码 返回200 不缓存，必然要发起全新的请求（自然不会有 If-Modified-Since 字段）
复制代码

增加gzip后，文件大小 从 392kb 降到 90kb 非常顶！！