Nginx front-end must master the skills (3)

Outline

As a front-end, I think we must learn to use nginx to dry the following things:

Acting static resources
Setting up a Reverse Proxy (add https)
Setting Cache
Set log
Smtp service deployment
Set redis cache (selected)

Here I follow the rhythm eleven research again, the experience recorded for later reference when developing, we believe it is useful to others.

Setting Cache

Location cache is typically disposed inside a block, the following sample code:

events {
    # worker_connections  1024;  ## Default: 1024
}

http {
    server {
        listen  8767;
        server_name  192.168.2.32;
        location / {
            deny 192.168.2.32;
            root /Users/zhouyang/Documents/tencent/test/local-nginx;
            expires      30s;
        }
        location /haha {
            valid_referers none blocked server_names
               *.example.com example.* www.example.org/galleries/
               ~\.google\.;

            if ($invalid_referer = '') {
                return 401;
            }
        }
        location /baidu {
            proxy_pass http://www.baidu.com;
        }
        location /yaya {
            return 302 /baidu;
        }
    }
}

Which expires 30s;is to set the cache to 30 seconds. units expire instruction is as follows:

expires 30s; #30秒
expires 30m; #30分钟
expires 2h; #2个小时
expires 30d; #30天

If not set the cache, then change to the following code:

expires -1s;
add_header Cache-Control no-cache;

By browser to view detailed information requests, we can see:

// 设置缓存多了如下字段
Cache-Control: max-age=30
Expires: Fri, 27 Sep 2019 01:00:47 GMT

// 取消缓存多了如下字段
Cache-Control: no-cache;
Expires: Fri, 27 Sep 2019 00:57:40 GMT;

Note: vue project, we do not recommend to set the cache html, but we recommend js, css file cache settings, because we already packed when he added a hash, so even if the file changes, they will be a new file name not the old file name. We can use location inside if control is realized.

Gzip compression settings

Gzip compression want to open, just add the following code:

gzip on;                     # 开启Gzip
gzip_min_length  1k;         # 不压缩临界值，大于1K的才压缩
gzip_types text/plain text/css application/x-javascript application/javascript application/xml;   # 哪些类型需要压缩

After being tested, this code can Gzip added http instruction block, server location instruction block instruction block even inside . It can be configured according to their needs.