前端需要了解的Nginx知识

Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。

Nginx发布于2004年，经历了15个年头的发展和沉淀，到目前为止已经成为构建大型网站的标配。反向代理和负载均衡是Nginx的两个最重要的标签，构成了大众对它的第一印象，下面就先介绍一下这两个概念。

一、反向代理和负载均衡

1.首先了解下正向代理

例如翻墙服务器，翻墙的方式是先找到一个可以访问国外网站的代理服务器，我们将请求发送给代理服务器，代理服务器去访问国外的网站，然后将访问到的数据传递给我们。

正向代理最大的特点是客户端非常明确要访问的服务器地址；服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。

正向代理是代理了客户端。

2.反向代理

一个大型网站能处理高并发需求已经成为最基本的要求，此时单凭一台服务器已经不能处理大量的请求，于是出现了分布式部署，把请求分发给多台服务器来处理高并发。

多个客户端给服务器发送的请求，nginx服务器接收到之后，按照一定的规则分发给了后端的业务处理服务器进行处理了。此时客户端是明确的，但是请求具体由哪台服务器处理的并不明确了，nginx扮演的就是一个反向代理角色。

反向代理是代理了服务器。

3.负载均衡

负载均衡是 Nginx 比较常用的一个功能，可优化资源利用率，最大化吞吐量，减少延迟，确保容错配置，将流量分配到多个后端服务器。

负载均衡可以按照一定的规则，把流量分发给其他代理服务器，以保证服务器集群中的各台服务器的压力相对平衡，面对高并发时能最大化服务器吞吐量。

这是张售票处的图片，很形象的反应了负载均衡的作用。

负载均衡的几种模式如下：

轮询(默认):每个请求按时间顺序逐一分配到不同的后端服务器;
ip_hash:每个请求按访问IP的hash结果分配，同一个IP客户端固定访问一个后端服务器。可以保证来自同一ip的请求被打到固定的机器上，可以解决session问题。
url_hash:按访问url的hash结果来分配请求，使每个url定向到同一个后端服务器。后台服务器为缓存的时候效率。
fair:这是比上面两个更加智能的负载均衡算法。此种算法可以依据页面大小和加载时间长短智能地进行负载均衡，也就是根据后端服务器的响应时间来分配请求，响应时间短的优先分配。Nginx本身是不支持 fair的，如果需要使用这种调度算法，必须下载Nginx的 upstream_fair模块。

二、Nginx如何赋能前端？

1. 解决跨域

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

因为同源策略的存在，不同源的前后端直接不能直接通信，需要先解决跨域问题，解决方案可以是cors、jsonp，或者通过nginx。

假设前端所在的域名为www.a.com，是通过nginx部署的；API所在的域名为api.a.com。前端直接请求接口api.a.com/getList会因为跨域而报错。而现在可以通过配置nginx，拦截/api开头的请求：

location /api {
    # 设置请求头Host
    proxy_set_header Host $host;
    # 路径重写
    rewrite  /api/(.*)  /$1  break;
    # 代理服务器
    proxy_pass api.a.com;
}

前端现在可以请求www.a.com/api/getList，请求将被转发到API服务器，绕过浏览器的跨域检测。

2.开启Gzip压缩

开发过程中难免用到一些成熟的框架，或者插件，这些外部的依赖，有时候体积比较大，导致页面响应缓慢，我们可以用打包工具(webpack, rollup)，将代码进行压缩，以缩小代码体积。开启Nginx Gzip压缩功能。需要注意的是 Gzip 压缩功能需要浏览器跟服务器都支持，即服务器压缩，浏览器解析。

查看浏览器是否支持gzip：

nginx配置：

server {
    # 开启gzip 压缩
    gzip on;
    # 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
    gzip_http_version 1.1;
    # 设置压缩级别，压缩级别越高压缩时间越长  （1-9）
    gzip_comp_level 4;
    # 设置压缩的最小字节数， 页面Content-Length获取
    gzip_min_length 1000;
    # 设置压缩文件的类型  （text/html)
    gzip_types text/plain application/javascript text/css;
}

查看gzip是否生效：

3.适配PC和移动端网站

判断请求是从PC还是移动端发出，然后重定向到对应的站点：

location / {
    # 移动、pc设备适配
    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
        set $mobile_request '1';
    }
    if ($mobile_request = '1') {
        rewrite ^.+ http://mobile.a.com;
    }
}

上面的代码表示当在PC端网站检测到移动端发出的请求时，重定向到移动端网站。

4.合并资源请求

以js文件为例，例如1.js、2.js、3.js，可以请求http://www.a.com/static/js/??1.js,2.js,3.js这个链接，nginx可以在收到请求后把多个文件合成一个文件返回，减少了请求数量。

# nginx-http-concat模块的参数远不止下面三个，剩下的请查阅文档
location /static/js/ {
    concat on; # 是否打开资源合并开关
    concat_types application/javascript; # 允许合并的资源类型
    concat_unique off; # 是否允许合并不同类型的资源
    concat_max_files 5; # 允许合并的最大资源数目
}

5.`try_files` 命令

使用场景：

1.适用于当本地没有明确URL文件时，使用前端路由（例如react-router），这里我们就可以指向前端项目的 index.html 来配合使用。

location / {
    index index.html;
    try_files $uri $uri/ /index.html;
}

2.适用于域名资源紧张的情况下，多条业务线的前端工程共用同一个域名，在该域名下使用子目录区分各项目。例如：www.a.com/proj1/ 下存放工程1，www.a.com/proj2/ 下存放工程2。

location /proj1 {
    try_files $uri $uri/ /proj1/index.html;
}

location /proj2 {
    try_files $uri $uri/ /proj2/index.html;
}

区分两个工程之后，开始匹配各自的前端路由，例如：路径 www.a.com/proj2/page1 ，匹配到的就是 proj2 项目下的 /proj2/page1 路由。

如需保留 try_files 链接中的参数，可以在 @callback后接上 ?$args ，例如 /proj2/index.html?$args

完。

参考文章：
掘金：前端开发者必备的Nginx知识
 掘金：前端想要了解的Nginx
掘金：Nginx与前端开发