前端必备的Nginx知识

我不是女神ヾ 2023-01-23 01:56 22阅读 0赞

![3caf85388fe32045f18041430f34be39.png][]

# 前端必备的Nginx知识 #

## Nginx ##

### 初识Nginx ###

从事前端的开发，或多或少都听说过`Nginx`。即使没有使用过`Nginx`，也肯定知道`Nginx`可以搭建`Web`静态资源服务。

一般来说`Nginx`有三大应用场景：

*  静态资源服务-通过本地文件系统提供服务
 *  反向代理服务-缓存、负载均衡
 *  `API`服务-`openresty`

![image.png][]

如图所示：  
通常一个`URL`请求先通过`Nginx`转发到应用服务，然后再去访问数据库。

一般来说应用服务的运行效率是很低的，而且并发都是受限的。所以需要把很多应用服务组成一个集群，向用户提供高可用性。随着把应用服务都组成集群，那么就会带来两个需求。

*  第一、需要动态的扩容.
 *  第二、有些服务出了问题之后，需要做容灾。

所以就需要`Nginx`具有反向代理功能。

而且在这样的一个链路中，`nginx`一般是处于企业内网的一个边缘节点，随着网络链路的增长，用户体验的到时延就会增加。所以需要把一些不变的，或者说在一段时间内不变的资源缓存在`nginx`中，比如`css`文件、图片，由`nginx`直接提供服务，这样时延就会减少很多。所以这样就衍生出`nginx`的缓存功能。

数据库服务要比应用服务好得多，应用功能比较简单，所以并发与运行都要远高于应用服务。所以衍生出第三个应用场景，直接由`nginx`访问数据库服务，利用`nginx`的强大并发性实现如`web`防火墙等复杂的业务功能

### Nginx组成 ###

`Nginx`主要有4部分组成：

*  `Nginx`二进制可执行文件
 *  `Nginx.conf`配置文件
 *  `asscess.log`文件
 *  `error.log`文件

`Nginx`的二进制可执行文件是由官方模块或者第三方模块一起编译出的一个文件。这个文件提供了`nginx`所需要的功能，就如同一辆汽车，本身提供了载人、高速行走等功能，至于音响，冷气等功能视乎于自己想不想要。

虽然二进制可执行文件提供了许多功能，但开启与关闭或者如何使用这些功能就需要配置文件，就好比一辆汽车需要驾驶员来驾驶一样。`Nginx.conf`配置文件就是这个驾驶员。

`asscess.log`就是记录每一条请求信息，凡走过必留痕迹，这些痕迹就在`access.log`文件中。

`error.log`文件是记录问题的文件，就好比汽车的黑匣子一样，如果汽车发生问题，就要打开黑匣子看看，究竟是驾驶员出现的问题还是汽车本身的问题。

### 编译Nginx ###

编译`Nginx`大概分以下步骤：

*  下载`Nginx`。
 *  执行`configure`。
 *  编译与安装`Nginx`。

***1、下载Nginx***  
从`nginx.org`网站下载即可

![906096145c565a5d4f54fa67b5ed3d2d.png][]

`nginx`的版本分为三类：

*  `Mainline`：开发版
 *  `Stable`：最新稳定版
 *  `Legacy`：老版本的稳定版

这里使用`1.18.0`版本

// 在centos7中演示，使用如下命令行
    // 下载nginx
    wget http://nginx.org/download/nginx-1.18.0.tar.gz
    
    // 解压nginx压缩包
    tar -zxvf nginx-1.18.0.tar.gz

下图为解压后的nginx目录

![b20931b29c5d97ca74d98bda9a7fd238.png][]

`auto`目录：是一些判用于断操作系统支持与编译等相关的文件。  
`CHANGE`S文件：`nginx`版本的迭代日志（.ru是俄语版，因为作者是俄罗斯）  
`conf`目录：是示例配置文件，用于配置参考。  
`configure`文件：用于编译生成中间文件的脚本。  
`contrib`目录: 提供了`nginx`语法支持脚本。  
`man`目录：提供了`nginx`帮助文档。  
`html`目录: 提供了两个标准的`html`文件  
`src`目录: 源码目录

***2、编译与安装Nginx***

// 使用以下命令行，查看执行configure时的参数
    ./configure --help

![e47d2fa7d5c744e55be1798c31cb77b1.png][]

这些代码是配置这几个模块的地址，引导`nginx`在执行在这些地址中读取相应的内容。

![f68dea4ec9d9fc7275b33575b8612b75.png][]

这些代码是说明使用哪些模块，不使用哪些模块。主要是用`with`和`without`区分。

默认情况下，只需要配置`prefix`就行，该参数是指定将`nginx`编译在哪里，比如：

./configure -- prefix=/home/nginx

生成的中间文件在`objs`目录

![0b6bf28135ae98562e096ef68b4d8d5c.png][]

接着编译`nginx`

make
    
    make install

### Nginx语法 ###

`Nginx`的配置文件是一个`ASNCLL`文本文件，由指令和指令块两部分组成。比如说

http {
        include mine.types;
        upstream image {
            server: 127.0.0.1:8080
        }
        server {
            listen 443 http2;
            limit_req_zone $binary_remote_addr
            location ~*\.(jpg|png)$ {
                proxy_pass http://image
            }
        }
    }

`http{}`大括号组成一个指令块，而`include`则是一条指令。指令块是否能配置名字是根据提供这个指令块的`nginx`模块来决定的。每条指令都是以;分号结尾，指令与参数之间以一个或多个空格分隔。而`mine.types`则是`include`指令的参数，可以有多个参数。

特别是`include`指令，它是允许组合多个配置文件以提升可维护性。`mine.types`这是一个含有很多条不同文件的后缀名与`http`协议中`mine`格式的对照关系表。

使用`$`符合表示一个变量。比如`$binary_remote_addr`作为`limit_req_zone`指令的参数，表示远端的地址。

部分指令的参数是支持正则表达式的。比如`location`指令的参数正是正则表达式，而且正则表达式中括号的内容可以用`$1,$2`等方式取出来。

**http**指令块包含以下4个块：

*  `http`
 *  `server`–对应一个/一组域名
 *  `upstream`–表示上游服务，当`nginx`需要与`tomcat`、企业内网等服务交互时就可以定义一个`upstream`
 *  `location`–一个`url`表达式

`http`指令块的所有指令都是由`http`模块解析执行的，也就是说`http`模块只能解析执行上面4种模块。

**命令行**主要格式是`nginx`指令参数，比如`nginx -s reload`。其中`-s`就是指令，表示发送信号，`reload`就是参数，表示重载配置文件。以下是几种常用指令的介绍：

*  帮助: -?、-h
 *  使用指定的配置文件：-c

默认的情况下，编译出来的`nginx`会寻找在执行`configure`时指定的配置文件，但可以使用命令行指令使用指定的配置文件，使用-c+配置文件路径

*  指定配置指令：-g

在命令行使用的配置指令可以覆盖在`config`目录里的指令

*  指定运行目录：-p

*  发送信息：-s

nginx操作运行中的进程方法一般是通过发送信号-s，有以下几种操作： 1、`stop`：表示立即停止服务 2、`quit`：表示优雅的停止服务,在退出前完成已经接受的连接请求 3、`reload`：表示优雅的停止服务再重新载入配置文件 4、`reopen`：表示重新开始记录日志文件

*  测试配置文件是否有语法错误： -t -T

修改完配置之后，重新运行之前，可以先使用-t来测试是否有语法错误

*  打印`nginx`的版本信息、编译信息等：-v -V

### 小试牛刀-搭建静态资源Web服务器 ###

准备一个`web`静态资源(我用的是之前学习的webgl的例子)，先来看看怎么配置`nginx`

![c7e47fa804a7d36a6a13adf39d7f81ff.png][]

首先配置`listen`指令，监听`8000`端口。接着配置一个`location`指令块，`/`表示所有请求，然后配置`/`后的路由与请求目录下的路径要一致，这时有两种使用方法，`alias`是其中一种。

**listen**：请求进入`nginx`前，首先需要监听端口使得`nginx`与客户端建立一个`tcp`链接。`listen`指令就是用来监听端口的，处于`server`指令块内的。通过监听的端口与地址就能判断使用哪些`server`去处理请求。

listen指令值主要分为三种类型：

*  `address[:port]`\-监听一个地址或者加相应的端口。比如`listen 127.0.0.1:8000`
 *  `port`\-监听一个端口。比如`listen 8000`
 *  `unix:path`\-监听一个`unix socket`地址，只用于本机通讯。比如`unix:/var/run/nginx.sock`

然后使用命令重载nginx`nginx -s reload`，这时访问`localhost:8000`就能看到效果了

![0f2bdd7b61885e7d56b8d393d763d8d5.png][]

**root与alias**：这两个指令主要功能都是将`url`映射为文件路径，以返回静态文件内容。主要的差别在于：

*  `root`有一个默认值`html`，可以出现在`http、server`和`location`指令块内，并且会将完整的`url`映射进文件路径中
 *  `alias`没有默认值，只能出现在`location`指令块中，并且只会将`location`后的`url`映射到文件路径

举例说明：

location /root {
        root html
    }
    
    location /alias {
        alias html
    }

当访问`localhost/root/`时，根据配置的指令值，会在`html`后加上`/root`再去访问`index.html`。所以实际访问的路由地址为`localhost/html/root/index.html`。这是因为`root`会将完整的`url`映射进文件路径中。

而访问`localhost/alias/`时，访问的路由地址为`localhost/html/index.html`。

#### 使用gzip压缩来减少网络传输 ####

当访问的资源很大时，往往会消耗大量的宽带，也增加加载时间。`nginx`可以设置静态资源的压缩功能。

![46cda2df45db5497f12f1dfa4058e2d2.png][]

*  `gzip on;`表示打开`gzip`功能开关
 *  `gzip_min_length 1;`表示`gzip`最小压缩字节大小，如果一个文件很小，在一个`tcp`报文就能发送出来，这时再进行压缩效果不太，却又消耗`cpu`。（我这是为了演示才设置为1）
 *  `gzip_comp_level 2;`表示压缩级别
 *  `gzip_types:`表示只对列出来的类型进行压缩

![cc507a531cb45f4d837d215fc02624ed.png][]

压缩后只有830kb，而且在响应头中也能看出使用了gzip压缩

![b1ac105de4f288ef970e85a3f8765f5f.png][]

#### 使用autoindex ####

使用`autoindex`可以将一个目录信息分享给用户，用户根据自己需求打开对应目录。![image.png][image.png 1]

在文档中介绍到，当访问`/`结尾的`url`时，会对应到这个目录并展示这个目录的结构。使用方法就是把`autoindex`置为`on` 访问`css/`这个文件夹时：

![82d7c8ca1f514f43fd9184c825cb1398.png][]

这里需要提出一点的是，会有一些情况：开启了`autoindex`后，还是不会返回目录结构。可能是因为配置`index`指令，`index`指令优先级会大于`autoindex`指令。具体如下：

**index**：当访问/时会返回`index`指令的文件内容。`index file`，默认值是`index.html`，可以出现在`http、server`和`location`指令块中。

**autoindex**：当`url`以`/`结尾时，尝试以`html/xml/json`等格式返回`root/alias`中指向目录的目录结构

#### 限制访问速度 ####

因为公网带宽是有限的，当有许多用户同时访问时，他们是一个增强关系。这时可能需要用户访问一些大文件时限制访问速度，以确保能有足够的带宽使得其他用户能够访问一些例如`css，js`等基础文件。这时可以设置`set`的命令配合一些内置变量来实现这一个功能。比如说

set $limit_rate 1k;

限制服务器向浏览器发送响应的速度。`$limit_rate`这个变量可以在官网的`ngx_http_core_module`模块中的`Embedded Variables`中

![b6a9bd9a76e4b2a28569ac2be82ae7e0.png][]

用法就是变量后面加上一个以空间为单位的数字，表示每秒传输多少字节。加上限制之后，会发现访问速度有变化。

#### 记录access日志 ####

日志要显示什么内容，就要看要设置什么样的格式。使用log\_format指令定义日志的格式。

![7b674ff6b70a535780a1cc9a8211b333.png][]

`log_format`格式允许设置一个名字，这就可以对不同用途时记录不同格式的日志文件。如图所示，设置为名为`main`的日志格式。这个格式使用了很多内置变量：

*  `$remote_addr:`表示远端的ip地址，也就是浏览器的ip地址
 *  `$remote_user：`表示用户名提供基本身份验证
 *  `$time_local：`表示访问时间
 *  `$request：`完整的原始请求行
 *  `$status：`表示响应状态
 *  `$body_bytes_sent：`发送给客户端的body字节数
 *  `$http_referer：`表示从哪跳转过来
 *  `$http_user_agent：`用户浏览器的类别，版本以及操作系统的一些信息
 *  `$http_x_forwarded_for：`客户端请求头中的`"X-Forwarded-For"`

设置完`log_format`之后，就要去设置日志记录的地方。使用`access_log`指令。

`access_log`所在哪个`server`块中，就表示这类请求的日志都记录在`access_log`设置的地方；

server {
        ...
        access_log logs/access.log main;
    }

表示将这个`server`的请求记录在`logs`的`access.log`文件中，采用`main`的记录格式

![3549e477b9b0ff3e3fc5deb2d3bab29d.png][]

### 再接再厉——搭建有缓存服务的反向代理服务器 ###

由于上游服务要处理非常复杂的业务逻辑而且还要讲求开发效率，所以一般来说性能并不怎么样。此时使用`nginx`作为反向代理服务器，就能用一台`nginx`把请求按照负载均衡算法代理给多台上游服务器，这样的好处：

*  能实现水平扩展，在用户无感知的情况下添加更多的上游服务器来提升处理性能。
 *  当有一些上游服务器出现问题时，`nginx`可以自动的将请求从有问题的上游服务器转发给正常的上游服务器。

现在有两台`nginx`服务器，一台是上面例子展示的`web`静态资源服务器，用在上游服务器。另外一台`nginx`用作反向代理服务器

在反向代理服务器中添加`upstream`表示上游服务：

upstream example {
        server 192.168.3.108:8008;
    }

上游服务地址填在`server`指令中，如果有多台上游服务就定义多条`server`。这个`upstream`上游服务命名为`example`。接下来就使用`proxy_pass`指令代理到这个`example`上游服务。

server {
        ...
        location / {
            proxy_set_header Host $host;
            proxy_set_header X-Real-Ip $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://example
        }
    }

设置`proxy_set_header`是因为，当有了反向代理，一些变量的值可能就没有那么准确。比如说`tcp`链接是有对端地址，但有了反向代理之后，反向代理与客户端是一个`tcp`链接，反向代理与上游服务器也是一个`tcp`链接。如果取`$remote_addr`变量值，也就是`tcp`链接的远端地址，在上游服务中取到的值其实是反向代理服务器的ip地址。所以通过`proxy_set_header`添加一些头部给到上游服务器获取正确的客户端地址。

这些配置都可以在官网中的`ngx_http_proxy_module`中找到

![e4ba170116ecfc593084be974914cc0f.png][]

接着访问`www.zww.pub`

![a48ef8b076c4333b2d770f4aa66ee6f3.png][]

#### 配置缓存服务器 ####

当`nginx`作为反向代理时，通常只有动态请求也就是不同用户访问同一个`url`时看到的内容是不同的，这是才会交由上游服务处理。有些内容一段时间内不会发生变化的，为了减轻上游服务的处理压力，就会让nginx缓存上游服务的返回信息一段时间。在这段时间内，是不会向上游服务请求的。

首先配置`proxy_cache_pass`指令，比如缓存文件写在哪、文件的命名方式、开多大的共享内存等控制缓存的属性

proxy_cache_path /opt/niginx/nginxcache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;

使用的时候，只需配置`proxy_cache`指令即可

server {
        ...
        location / {
            ...
            proxy_cache my_cache;
            proxy_cache_key $host$uri$is_args$args;
            proxy_cache_valid 200 304 302 1d;
            ...
        }
    }

同一个`url`访问时，对不同的用户可能返回的内容是不同的。所以`key`的配置中需要包含用户的变量，`$host$uri$is_args$args`是一个比较简单的`key`，只跟`host、uri`和一些参数作为整体`key`。 `vaild`指定是针对哪些响应不返回。

再刷新一下，就能把上游服务缓存下来。接着把上游服务停掉，再次刷新也能访问得到。

## 结尾 ##

万事开头难，但是前端这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![621960a57eb42479e02d6d64c0c81891.png][]

![5230c48fd0fcb265f3401a21603bda2b.png][]

**前端面试题汇总**

![42728594459506983a38ca2b86545fc6.png][]

**Nginx相关**

![4a5d827dcdd12295486b572b9eae390c.png][]

**JavaScript**

![7796de226b373d068d8f5bef31e668ce.png][]

**性能**

![d7f6750332c78eb27cc606540cdce3b4.png][]

**linux**

![ed368cc25284edda453a4c6cb49916ef.png][]

**前端资料汇总**

![6e0ba223f65e063db5b1b4b6aa26129a.png][]

#### 完整版PDF资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

[3caf85388fe32045f18041430f34be39.png]: /images/20221020/6a5ac4d6264e4953a78cb91c00832855.png
[image.png]: /images/20221020/21bfe3ef8b914ae0b9526c7d2863c76c.png
[906096145c565a5d4f54fa67b5ed3d2d.png]: /images/20221020/f075979b0c34490fb52d68f9500b7a13.png
[b20931b29c5d97ca74d98bda9a7fd238.png]: /images/20221020/e3e3247363f44a8298b738144b306ab2.png
[e47d2fa7d5c744e55be1798c31cb77b1.png]: /images/20221020/95c82a64b00e4362a0c5d1292e9e2ac7.png
[f68dea4ec9d9fc7275b33575b8612b75.png]: /images/20221020/5709534d2b2f49e78dbcdafd28248b84.png
[0b6bf28135ae98562e096ef68b4d8d5c.png]: /images/20221020/13932f2607da49dfab57474c5d676d30.png
[c7e47fa804a7d36a6a13adf39d7f81ff.png]: /images/20221020/20ce6fffdde84986a76f97f9abfc7c19.png
[0f2bdd7b61885e7d56b8d393d763d8d5.png]: /images/20221020/17cb8b311eb846da8067363f7fc7ff23.png
[46cda2df45db5497f12f1dfa4058e2d2.png]: /images/20221020/c98986ee14cb46c3833e03a5175bb37b.png
[cc507a531cb45f4d837d215fc02624ed.png]: /images/20221020/877dbdb429274deaa15da8ccc06a27e2.png
[b1ac105de4f288ef970e85a3f8765f5f.png]: /images/20221020/61693314d52248c49a2c9bf25bd56a82.png
[image.png 1]: /images/20221020/a6dfef3be7d34d788fd7659d72ddabae.png
[82d7c8ca1f514f43fd9184c825cb1398.png]: /images/20221020/48abc7f70d024d25b759799716f6fd37.png
[b6a9bd9a76e4b2a28569ac2be82ae7e0.png]: /images/20221020/d583b96e5e0442fb93e21317f361879e.png
[7b674ff6b70a535780a1cc9a8211b333.png]: /images/20221020/9c8ca8543c4c4176aace77bb5d653adc.png
[3549e477b9b0ff3e3fc5deb2d3bab29d.png]: /images/20221020/aad996cab8a14d34b46238152f599e17.png
[e4ba170116ecfc593084be974914cc0f.png]: /images/20221020/95b570fcb544461c9bfe21ca1084d29b.png
[a48ef8b076c4333b2d770f4aa66ee6f3.png]: /images/20221020/a1f91cd5dc1843b98868c2f9a29992f6.png
[621960a57eb42479e02d6d64c0c81891.png]: /images/20221020/04c6d956ccf645b59fd9ee23a1129556.png
[5230c48fd0fcb265f3401a21603bda2b.png]: /images/20221020/352aafa1b80946b0b56b71b681a65426.png
[42728594459506983a38ca2b86545fc6.png]: /images/20221020/293e7946790b486684049c05e5eed979.png
[4a5d827dcdd12295486b572b9eae390c.png]: /images/20221020/f36fd4483f7748429911bc0e5b4fe2e4.png
[7796de226b373d068d8f5bef31e668ce.png]: /images/20221020/73f710c98d4d47009c543689795915ac.png
[d7f6750332c78eb27cc606540cdce3b4.png]: /images/20221020/3dff2096f501421cbd9ad44d2df494b0.png
[ed368cc25284edda453a4c6cb49916ef.png]: /images/20221020/d342c75598c1411caa29d2dca07617ec.png
[6e0ba223f65e063db5b1b4b6aa26129a.png]: /images/20221020/e7e542e5924243088ecd307b7eeaaf60.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=VIWqVeW1