前端需要了解的nginx

简述

Nginx是一款轻量级的http服务器,采用事件驱动的异步非阻塞处理方式,具有较好的IO性能,时常用于服务端的反向代理和负载失衡

nginx优势

IO多路复用: 多个描述的IO操作可以在一个线程里并发交替顺利完成,复用线程
CPU亲和: 一种CPU核心和Nginx工作进程绑定方式,把每个worker进程固定在一个cpu核上执行
sendfile: 零拷贝传输模式不需要经过用户空间

nginx作用

gzip压缩

gzip on;  # 开启gzip压缩 默认仅支持html文件
gzip_http_version 1.1; # 压缩版本
gzip_min_length 1k;  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_comp_level 2; # 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;  # 进行压缩的文件类型
gzip_disable "MSIE [1-6]\."; # 禁用IE 6 gzip

可以在请求头中的Accept-Encoding来查看是都开启gzip压缩。

适配pc环境与移动环境

用于实现根据用户的浏览环境自动切换站点。Nginx可以通过内置变量$http_user_agent识别出用户是pc端还是移动端，进而控制重定向到H5站还是PC站。配置如下：

location / {
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod)') {
        set $mobile_request '1';
    }
    if ($mobile_request = '1') {
        rewrite ^.+ http://mysite-base-H5.com; # 重定向
    }
}

代理和跨域

在server1.com向server2.com发起请求时,可以配置代理,或者通过设置请求头解决跨域.配置如下:

server {
    listen 80; # 监听端口
    server_name  http://server1.com; ## 当前服务器名称
    location / {
        proxy_pass http://server2.com; # 进行服务器代理,也可依次实现跨域
        add_header Access-Control-Allow-Origin *; # 设置请求头实现跨域
    }
}

负载均衡

nginx负载均衡策略:

轮询(默认):每个请求按照时间顺序逐一分配到不同的后端服务器,如果服务器down掉,可以自动剔除

upstream balanceServer {
    server  10.1.22.33:12345;
    server  10.1.22.34:12345;
}

ip_hash:给每个访问ip指定hash,根据hash固定访问某个服务器,由此可以解决session不能跨域的问题

upstream balanceServer {
    ip_hash;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
}

weight:加权轮询,weight和访问比率成正比,用于后端服务器性能不均

upstream balanceServer {
    server  10.1.22.33:12345 weight=2;
    server  10.1.22.34:12345 weight=1;
}

least_conn:最小连接数哪个连接少就分配给谁

upstream balanceServer {
    least_conn;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
}

图片文件防盗链

校验refer实现,配置如下:

location ~ .\.(jpg|png)$ {
    valid_referers none blocked http://39.107.64.34; # 默认协议和指定域名可以打开
    if ($invalid_referer) { # 无权限访问时 返回403
        return 403;
        #rewrite ^/ http://XXXX/403.gif; # 这个图片不能被防盗链，不然显示不正常。除非把上面的GIF过滤删除。
    }
}

对于源为none(源为空 )、blocked(不为空，但是里面的值被代理或者防火墙删除)、指定源如http://39.107.64.34,则内置变量$invalid_referer为0,可以访问该站点图片.否则为1,不能访问,进行查看403页面提示: 如果用户直接在浏览器输入你的图片地址,那么图片显示正常，因为它符合none这个规则

其他

进行移动端调试
对页面文件访问权限的处理等

参考文献:

配置Nginx实现负载均衡 www.cnblogs.com/qlqwjy/p/85…
前端开发者必备的Nginx知识 juejin.cn/post/684490…
Nginx与前端开发 juejin.cn/post/684490…
客户端内实时调试H5方案——nginx反向代理的使用 www.jianshu.com/p/4751d47dd…