Nginx 前端必知必会

站长

2023年09月03日 21:51 · 阅读数 48

0.背景

0.1 服务器分类

服务器按照功能可以分为两类：应用服务器、网关服务器

(1) 应用服务器

JAVA：Tomcat、resin、jboss、weblogic 等
PHP：Apache等
Nodejs：express、 koa、eggjs等

主要目的功能：可以简单理解为需要进行逻辑处理，与业务强相关的服务器

(2) 网关服务器

Nginx、Tengine

主要目的功能：反向代理、负载均衡这里我们需要了解的就是Nginx网关服务器，来实现前端请求的反向代理和负载均衡的功能

0.2 Nginx 常用功能 & 使用场景

常用功能： Nginx自身可以实现高并发（单台最多支持5w并发连接），此外通过Nginx可以实现高性能的功能，例如：动静分离、资源压缩、缓存配置、IP黑名单、高可用保障

0.3 Nginx下载 & 相关命令

相关命令：启动、关闭、重启、kill进程

nginx安装： 1.首先下载homeBrew（专门用来管理mac软件的工具homebrew） 2.然后执行brew命令安装nginx：brew install nginx（安装完之后，通过brew search 命令查看是否安装完成，即执行brew search nginx执行查看是否能找到nginx） 3.找到nginx的nginx.conf配置文件地址，通过执行brew info nginx，如下所示：在 /opt/homebrew/etc/nginx 目录下寻找conf配置文件。（注：查找nginx服务器配置文件地址） 4.第3步是查看config文件地址，后面可以启动nginx，直接执行命令nginx即可

重要问题1：nginx服务器地址存储文件在哪里？(注：查找服务器下文件存储地址) 通过查看配置文件可以知道,服务器的主机名为 localhost，监听端口号为8081，所以访问localhost:8081的时候就可以看到nginx主页面了，那么思考一下，html主页面是在哪个文件目录下？如下为nginx.conf配置文件字段： Nginx 前端必知必会在 nginx.conf 文件中,我们看到根路径是: root html, 说明访问/ 时候的全路径为html + / = html/，因为后面没有路径，所以访问的路径自动访问 localhost:8081/html/index.html。但问题是:“html”相对路径在哪里?这个相对路径是在编译时设置的。可以通过命令 “nginx -V” 查看路径，可以看见“prefix=/opt/homebrew/Cellar/nginx/1.23.4”，因此这是nginx文件的文件夹，所以root中的html是相对../nginx/1.23.4这个路径下的html文件夹的。下面执行下面命令进入（当然，后面可以更改为绝对路径：/usr/share/nginx/html，就会去这个绝对路径下寻找）

cd /usr/local/Cellar/nginx/1.12.0_1
ls 1.12.0_1
// 然后你会看到“html”文件夹是一个指向“/usr/local/var/www”的软链接
// 总之,就我而言,“html”文件夹是“/usr/local/var/www”

重要问题2: root字段就是配置根目录的字段

http {
   server {
        # 监听的端口号
        listen  9200;

        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  localhost;

        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;

        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
            try_files $uri $uri/ /index.html;	    
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /admin {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /admin/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #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/*;
}

1. Nginx 核心功能 & 对应配置

考点：nginx作用主要可以分为五点：反向代理、负载均衡、动静分离、静态资源压缩、大文件上传配置

1.1 反向代理

（1）反向代理概

可以理解我们正常访问的服务器是一个应用服务器集群，这个集群并不直接接受外部的请求，而是通过一个代理服务器来接受请求，通过代理服务器处理来确定具体访问集群中的哪一个具体的应用服务器。但是对用户而言，只知道代理服务器的地址，并不知道应用服务器集群的存在以及具体应用服务器（或者代理服务器）的地址。这就是“反向代理”。客户端只知道代理服务器的IP，代理服务器因为是代理的服务器，所以服务器知道客户端的信息，但是客户端不知道应用服务器IP。所以，为谁代理，谁就知道全部的IP。反之，正向代理就是代理局域网内的客户端群里，客户端明确知道我要访问的域名，但是在局域网中所有的请求都要打到一个正向代理服务器，由这个服务器转发到目的IP的应用服务器中。但是目的应用服务器不知道客户端的IP，只知道代理服务器的IP。

（2）反向代理功能

1.反向代理可以很好的隔离内部服务器集群网络与外部请求的链接，通过反向代理来作连接中介，通过代理控制权限，具有很好的安全性。 2.可以实现负载均衡功能 3.代理缓存、解决跨域问题

正向代理和反向代理的区别：正向代理主要是为了突破访问的限制的（例如访问youtube限制），而反向代理主要是为了负载均衡或者安全隐藏服务器真实IP。简单点理解就是，我们正常手机上网属于局域网中的用户通过指定的正向代理服务器来访问资源，如果想要设置访问限制，可以在这台正向代理服务器中做一些访问限制即可来达到防火墙的目的。当然如果我想突破这一限制，也很简单，访问另一台没有这种限制的正向代理的服务器即可。而反向代理服务器就是：客户端访问的域名是代理服务器的域名，但是代理服务器真正访问的应用服务器IP客户时不知道的，也就是说我们通过度娘找到的信息，并不一定是通过baidu.com的域名返回的信息，可能是我们不知道IP的应用服务器返回给baidu.com，然后转接给我们的。

（3）反向代理ngxin配置 (5个核心字段)

核心配置字段：server - location -[ root | alias | index｜proxy_pass｜try_files ] 主要集中在 location 属性，以及location下的5个子属性 root、alias、index、proxy_pass、 try_files 反向代理的配置主要集中在server模块字段，其中server模块下的location字段又是重点配置的字段。 location字段的作用 location匹配优先级

    // #优先级1,精确匹配，根路径
    location =/ {
        return 400;
    }

    // #优先级2,以某个字符串开头,以av开头的，优先匹配这里，区分大小写
    location ^~ /av {
       root /data/av/;
    }

    // #优先级3，区分大小写的正则匹配，匹配/media*****路径
    location ~ /media {
          alias /data/static/;
    }

    // #优先级4 ，不区分大小写的正则匹配，所有的****.jpg|gif|png 都走这里
    location ~* .*\.(jpg|gif|png|js|css)$ {
       root  /data/av/;
    }

    // #优先7，通用匹配，以上都不满足时候走这个
    location / {
        return 403;
    }

关于location除了要知道作用之外还要了解location匹配的优先级 location字段下的对应属性：root、alias、proxy_pass

1.root指定项目的根目录

解析： root 的值是location查找路径的目录，在此目录下匹配location值路径，例如 root的值为/a/b/c,此时location 对应路径为/path，那么结合起来寻找的路径就是：/a/b/c/path。也就是说root值的作用是：指定location的值在root值（目录）下进行匹配，由(root + location) 组成全路径。

server {
    location /activity {
        // 错误配置：
        root /home/www/site/activity   // 这个时候寻找的目录是在/home/www/site/activity目录下查找/activity路径
        // 但是我们要找的目录是/home/www/site/activity
        // 正确配置：
        root /home/www/site // 这个时候寻找的目录才是正确的目录：/home/www/site下查找/activity路径
    }
}

2.alias 设置别名 解析：alias是设置全路径的别名，也就是说alias的值一定要是全路径，不能和root一样只设置目录。需要注意的是，因为是全路径，不是最后的文件，所以alias一定要以 / 结尾，不然就找不到目标文件。如下：

location /activity {
    alias /home/www/site/activity/ 
    // 匹配到/activity时候就会用/home/www/site/activity/来替代，那么全路径就是/home/www/site/activity/
}

3.index 设置默认访问文件 解析：index配置的作用是，当目录下没有任何匹配文件名时候，则默认访问 index.html，例如：

root /home/cookcyq/web/
location /a { 
   index index.html
}
// 此时如果访问 http://127.0.0.1:8000/a，这个时候就相当于访问/a目录下的index.html文件，即，/home/cookcyq/web/a/index.html

4.proxy_pass 设置反向代理指定URL

server {  
        listen       8080;        
        server_name  localhost;

        location / {
            root   html; # Nginx默认值
            index  index.html;
        }
        
        proxy_pass http://localhost:8000; # 反向代理配置，请求会被转发到8000端口
}

5.try-files

（1）作用：按照顺序检查文件是否存在，返回第一个找到的文件, 如果未找到任何文件，则会调用最后一个参数进行内部重定向 (主要起到一个美化URL路由的作用)

（2）语法规则:

格式1：try_files file … uri;
格式2：try_files file … =code;

try_files的作用：按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理
查找路径（uri）是按照给定的root或alias为根路径来查找的
如果给出的file都没有匹配到，则重新请求最后一个参数给定的uri，就是新的location匹配
如果是格式2，如果最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码

（3）示例1:

location ^~ /order {
    alias /workspace/static/test/;
    try_files $uri $uri/ /others/index.html;
}

比如服务器的站点为：localhost:8000，此时如果访问：localhost:8000/order/123时候会发生如下查查找：

首先，order开头后的别名替换为：/workspace/static/test/123，所以在服务器中查找的文件为：/workspace/static/test/123。此时，$uri 表示/workspace/static/test/

然后，开始try-files作用：（注意：$uri表示的是/order对应的查找路径uri，此时值为：/workspace/static/test/），因为输入的路由为/order/123，order代表的uri的值为/workspace/static/test/，所以全路径为/workspace/static/test/123

step1: 按照try_files的判断优先级，先判断是否存在文件 step2: 再判断是否存在文件目录 & index文件，即 /workspace/static/test/123/index.html step3: 如果都没有则改为请求地址：http:// test.liaosi.site/others/index.html （try_file的第一个、第二个值为uri，uri，uri，uri/分别表示文件和目录的查找，如果没有$uri则表示不用try尝试寻找文件夹）

示例2:

// 以上中若未找到给定顺序的文件，则将会交给location @abcl处理（相当于匹配到了@abc的路径）
loaction / {
	try_files $uri @abc
}

loaction @abc{
	proxy_pass http://127.0.0.1:88
}

总结：

root其实是网站的根目录，所以在访问的时候是从根目录开始查找的；、

alias是目录的别名，那么这个就可以是一个目录的全路径。

1.2 负载均衡

1.2.1 负载均衡概念及作用

负载均衡主要通过服务器集群来很好的分担集群中某个服务器的压力

1.2.2 负载均衡配置

配置负载均衡的字段：upstream

基本语法如下所示： step1: 先通过upstream命名一个http服务器，内部的几个server就是负载均衡中的服务器集群 setp2: 通过serve中的location的proxy_pass，配置反向代理，将所有的nginx收到的请求，发送到upstream命名的http服务器中，然后🈶️这个http服务器交给集群处理

# 负载均衡：先通过upstream定义一个http服务器，服务器名称定义为：domain
upstream test_server {
    server localhost:8000;
    server localhost:8001;
}
server {  
    listen  8080;        
    server_name  localhost;
    location / {
        proxy_pass http:// test_server; 
        // 通过与反向代理的配置将请求发送给test_server命名的服务器 
        // 负载均衡配置，请求会被平均分配到8000和8001端口
    }
}

1.2.3 负载均衡原理 (实现方式)

轮询(默认），每个请求按照时间顺序轮流分配到不同的后端服务器，如果某台后端服务器宕机，Nginx 轮询列表会自动将它去除掉。
weight(加权轮询)，轮询的加强版，weight 和访问几率成正比，主要用于后端服务器性能不均的场景。
ip_hash，每个请求按照访问 IP 的 hash 结果分配，这样每个访问可以固定访问一个后端服务器。
url_hash，按照访问 URL 的 hash 结果来分配请求，使得每个URL定向到同一个后端服务器上，主要应用于后端服务器为缓存时的场景。
自定义hash，基于任意关键字作为 hash key 实现 hash 算法的负载均衡
fair，按照后端服务器的响应时间来分配请求，响应时间短则优先分配。

总结：配置负载均衡需要通过upstream字段定义一个http服务器名称（暂叫upstream-http）来代理一个server集群，然后通过proxy_pass反向代理来将请求转到upstream-http集群中。

注意1：反向代理和负载均衡的关系，反向代理是实现负载均衡的一种方式，当然也不一定非要通过反向代理来实现负载均衡

1.3 动静分离

（1）概念

（2）配置动静分离

server {  
        listen       8080;        
        server_name  localhost;

        location / {
            root   html; # Nginx默认值
            index  index.html;
        }
        
        // # 静态化配置，所有静态请求都转发给 nginx 处理，存放目录为 my-project
        location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
            root /usr/local/var/www/my-project;  // root目录 + 文件名 形成的全路径
            // 所有的静态资源请求都会在所代理到的nginx的根目录寻找静态资源
        }
        
        // # 动态请求匹配到path为'node'的就转发到8002端口处理
        location /node/ {  
            proxy_pass http://localhost:8002; # 充当应用服务代理
        }
}

总结：说到底，动静分离配置，就是通过location来匹配文件后缀，区分出哪些请求是静态请求（js\css\jpg等），然后将这些请求访问路径通过root转到nginx服务器自身文件中，而剩下的请求通过proxy_pass反向代理到应用服务器/集群中。

1.4 静态资源压缩

背景：前端请求后端的响应时间是：后端处理时间 + 资源网络传输时间，对于静态资源响应时间就等价于资源传输时间，因此资源越小，响应的时间越快。所以如果我们可以压缩要传输的静态资源，那么就可以提升响应时间。所以在nginx中提供了一个优化功能：在nginx代理服务器中可以利用自身内置的压缩策略来压缩静态资源（即，响应报文）。

location ~ .*\. (jpg|png|gif)$ {
    gzip off; #关闭压缩
    root /data/www/images;
}
location ~ .*\. (html|js|css)$ {
    gzip on; #启用压缩
    gzip_min_length 1k; # 超过1K的文件才压缩
    gzip_http_version 1.1; # 启用gzip压缩所需的HTTP最低版本
    gzip_comp_level 9; # 压缩级别，压缩比率越高，文件被压缩的体积越小
    gzip_types text/css application/javascript; # 进行压缩的文件类型
    root /data/www/html;
}

1.5 大文件上传配置

总结：这里主要要掌握的两个方面: (1)nginx五个核心功能的作用 (2)对应的配置字段

2.Nginx其他功能相关配置

server {
    listen   80;
    server_name   localhost; # 用户访问 localhost，反向代理到 http://webcanteen.com
    location / {
        proxy_pass http://webcanteen.com
    }
}

配置SSL证书性能优化

3. 生产中Nginx的应用场景

前端History路由配置 nginx（面试题）
同一个域名通过不同目录指定不同项目目录
自动适配PC/移动页面
前端单页面应用刷404问题
限制只能通过chrome浏览器访问

转载自:https://juejin.cn/post/7231108358425624631