1. Nginx的概念

        Nginx经常作为反向代理服务器使用。

        它接收外网的HTTP/HTTPS请求，作为代理中间将这些请求转发到内网的后端服务器上；

        同时也将内网的后端服务器的响应，返回给外网的客户端。

        也就是说，Nginx作为反向代理，通过合理的配置可以实现内网和外网的“隔离”。

        让外网用户有条件的通过Nginx访问内网的Web服务，同时内网的服务器地址不会暴露给外网，避免外网用户直接访问内网的风险。

       

1.1 正向代理

        可以理解为面向客户端的代理，代替客户端向服务器发送和接受请求，服务端不知道实际发起请求的客户端是什么。

例如：

        我们访问谷歌，但是由于某些原因，无法直接访问到谷歌。

        我们可以通过连接一台代理服务器，代理服务将我们的请求提交到谷歌，然后再将谷歌的响应反馈给我们。

        对于谷歌而言，它只知道有一个请求过来，但是并不知道是我们在访问它。

1.2 反向代理

        可以理解为面向服务端的代理，代替服务端接收和返回客户端的请求，客户端不知道实际为它提供服务的服务端。

例如：

        我们访问百度网站，百度内部肯定不是只有一台服务器，它的内部有很多台服务器。

       我们进行访问的时候，因为服务器彼此间session不共享（而资源存放在不同的服务器上），我们在服务器之间访问需要频繁登录。

        此时百度搭建一个过渡服务器，对我们用户不会有任何影响。

        我们只需要登录一次，就可以访问所有，这种情况就是反向代理。

        配置了反向代理后，我们访问百度网站时，实际并不知道百度内部的服务器节点是什么。

        只是访问百度的代理服务器后，代理服务器帮我们转发请求到他们N多的服务器节点中的一个，进行搜索后将结果返回给我们。

        此时代理服务器对我们客户端来说就充当了提供响应的服务器角色，但是对于目标服务器来说，它只是进行了一个请求和转发的功能。

1.3 Nginx优点

高性能

        Nginx采用事件驱动的异步架构，能够处理大量并发连接而不会消耗过多的系统资源。

        它的处理能力比传统的Web服务器更高，在高并发负载下表现出色。

高可靠性

        Nginx具有强大的容错能力和稳定性，能够在面对高流量和DDoS攻击等异常情况下保持可靠运行。

        它能通过健康检查和自动故障转移来保证服务的可用性。

负载均衡

       反向代理服务器可以做负载均衡，根据所有真实服务器的负载情况，将客户端请求分发到不同的真实服务器上。

        也就是说哪个服务器没那么忙，哪个服务器就来响应请求。

静态文件服务

        在访问服务端时，一般会请求一些静态资源，如js、css、图片等；

        这些资源可以在反向代理服务器中进行缓存，减少服务器的压力。

扩展性

        Nginx支持丰富的模块化扩展，可以通过添加第三方模块来提供额外的功能，如gzip压缩、SSL/TLS加密、缓存控制等。

2. Nginx项目准备

2.1. 下载项目

地址：nginx: download

        下载对应安装包，解压后放入本地目录并启动，这里我选择的是：D:\Nginx\nginx-1.25.4

2.2. Nginx相关命令

        启动Nginx服务：start nginx.exe

        修改配置项后重启Nginx服务：.\nginx.exe -s reload

        停止Nginx服务：.\nginx.exe -s stop       

3. Nginx的基础配置

3.1 nginx.conf

        主要关注<code>conf/nignx.conf文件，它是Nginx的配置文件，大致结构如下：

[root@localhost ~]# tree /usr/local/nginx

/usr/local/nginx

├── client_body_temp                 # POST 大文件暂存目录

├── conf                             # Nginx所有配置文件的目录

│   ├── fastcgi.conf                 # fastcgi相关参数的配置文件

│   ├── fastcgi.conf.default         # fastcgi.conf的原始备份文件

│   ├── fastcgi_params               # fastcgi的参数文件

│   ├── fastcgi_params.default      

│   ├── koi-utf

│   ├── koi-win

│   ├── mime.types                   # 媒体类型

│   ├── mime.types.default

│   ├── nginx.conf                   #这是Nginx默认的主配置文件，日常使用和修改的文件

│   ├── nginx.conf.default

│   ├── scgi_params                 # scgi相关参数文件

│   ├── scgi_params.default  

│   ├── uwsgi_params                 # uwsgi相关参数文件

│   ├── uwsgi_params.default

│   └── win-utf

├── fastcgi_temp                     # fastcgi临时数据目录

├── html                             # Nginx默认站点目录

│   ├── 50x.html                     # 错误页面优雅替代显示文件，例如出现502错误时会调用此页面

│   └── index.html                   # 默认的首页文件

├── logs                             # Nginx日志目录

│   ├── access.log                   # 访问日志文件

│   ├── error.log                   # 错误日志文件

│   └── nginx.pid                   # pid文件，Nginx进程启动后，会把所有进程的ID号写到此文件

├── proxy_temp                       # 临时目录

├── sbin                             # Nginx 可执行文件目录

│   └── nginx                       # Nginx 二进制可执行程序

├── scgi_temp                       # 临时目录

└── uwsgi_temp                       # 临时目录

        其中，nginx.conf配置文件内容由一些指令和参数构成，并遵循Nginx一定的语法规则。

        其内容大概如下：

# nginx进程数，一般设置成和CPU个数一样

worker_processes 1;

events {

# 每个进程允许最大并发数

worker_connections 1024;

}

http {

# 引入其他配置,mime.types文件存储的是文件扩展名与类型映射表

include mime.types;

default_type application/octet-stream;

# 日志格式(使用了变量)

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

#access_log logs/access.log main;

sendfile on;

keepalive_timeout 65;

# 服务器配置

server {

listen 8003;

server_name localhost;

# 设置根路径

root html/dist;

# 设置默认首页

index index.html index.htm;

# A. 匹配所有以斜杠（/）开头的请求URL

#（1）即无论客户端请求哪个路径，只要它是从根域名开始，那么这个location指令就会被触发

#（2）然而，最终触发的究竟是不是此location，还要看有没有其他优先级比它高的location

location / {

# root html/dist;

# index index.html index.htm;

try_files $uri $uri/ /index.html;

add_header Cache-Control 'public,max-age=3600';

}

# B. 正则匹配/index.html：如访问：127.0.0.1:8083/index.html

location ~* /index.html* {

add_header Cache-Control 'no-cache, max-age=1';

# 备注：

# （1）若只加add_header，但本location内不配置root和index且server下也没配置root和index

# 则add_header配置不生效，并且它也不如你所愿去找location /下的root路径

# （location和location是独立的）

# （2）目前看来：它会走到html目录下的index.html.

# 这是因为root指令，它的默认值是Nginx安装目录下的html子目录

# index指令，其中一个默认值就是index.html(当然，不止这一个)

}

# C. 精准匹配/vod/aa.html：如访问127.0.0.1:8083/vod/aa.html

location = /vod/aa.html {

add_header Cache-Control 'no-cache, no-store';

}

# D. 正则匹配/cc.html：如访问：127.0.0.1:8083/cc.html

location ~* /cc.html {

# location内部的root优先级高于外部server的root

root html/dist/vod;

# 以下index配置失效

# 不管index配置了什么文件，Nginx只会直接去/html/dist/vod目录下找cc.html文件

index ee.html;

add_header Cache-Control 'public, max-age=3600';

# always只是表明这个头部将在所有响应中发送，实际X-Frame-Options参数值是SAMEORIGIN

add_header X-Frame-Options 'SAMEORIGIN' always;

}

# E. 正则匹配/ee.html：如访问：127.0.0.1:8083/ee.html.

# (1)该访问不会生效，因为在/html/dist目录下并没有ee.html文件

# (2)但由于配置了try_files字段

# 将会将(1)中访问不到的资源重定向到html/dist目录下的index.html文件

location ~* /ee.html {

root html/dist;

try_files $uri $uri/ /index.html;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

}

}

3.2 html目录

       html目录通常是Nginx默认的网站根目录

       在没有指定其他文档作为根目录的情况下（例如用root指定），Nginx会将html目录作为HTTP请求时查找文件的根路径。

        以下介绍html目录下的index.html文件和dist目录。

3.2.1 index.html

         html/index.html是Ngix默认生成的文件，通常用作网站的默认首页。

例如：

        有一个index.html文件放在Nginx的html目录中，那么当用户访问网站的根路径（例如http://yourdomain.com/）时，Nginx会去html目录中寻找index.html文件。

        实际情况中，通常会在nignx.conf文件，通过配置root和index去指定需要默认展示的首页。

        如2.1中配置root和index，指定html/dist目录下的index.html或index.htm文件作为首页。

root html/dist;

index index.html index.htm;

3.2.2 dist目录

        dist目录是通过前端打包生成的，将dist目录部署到Nginx服务器上前端写的页面才会生效。

        dist存放的位置没有特别限制，一般放在html目录下。

4. nginx指令

        实际上，这里只介绍一些常用的概念，其余的在需要的时候查Nginx文档即可。

        地址：Nginx中文文档

4.1. $uri

       $uri是一个内置变量，它代表请求的uri部分，但不包括查询字符串（即?及其后面的部分）。

        注意：这与$request_uri不同，$request_uri包含整个请求的URI，包括查询字符串。

例如

        请求的URI是/example/page?param=value，$uri变量的值将是/example/page。

        当Nginx处理一个请求时，它会根据请求的uri查找对应的location块，每个location块可以有不同的配置指令，用于指定如何处理请求。

       

4.2. location的root，alias，index

4.2.1. alias

         alias指替代的目录，替换了location的uri使用。

        按照如下配置，访问/img/目录里面的文件时，ningx会去/var/www/image/目录下找文件。

location /img/ {

   alias /var/www/image/;

}

4.2.2. root

        root指根目录，和uri拼接使用。   

        注意，alias配置的值后面必须要用“/”结束，root配置的值后面的“/”可有可无。    

        按照如下配置，访问/img/目录里面的文件时，nginx会去/var/www/image/img/目录下找文件。

location /img/ {

   root /var/www/image;

}

 4.2.3. index

      当用户请求 / 地址时，Nginx 就会自动在 root 配置指令指定的文件系统目录下依次寻找 index.htm 和index.html 这两个文件。

        如果 index.htm 文件存在，则直接发起“内部跳转”到 /index.htm 这个新的地址；

        如果 index.htm 文件不存在，则继续检查 index.html 是否存在；

        如果 index.html 存在，同样发起“内部跳转”到/index.html；

        如果 index.html 文件仍然不存在，则放弃处理权给 content 阶段的下一个模块。

 location / {

    root /var/www/;

    index index.htm index.html;

 }

4.3 lcoation的try_files

        语法：格式1：try_files file ... uri 

                   格式2：try_files file ... = code

例如：

        try_files $uri $uri/ /index.html的查找过程如下：

        （1）首先在匹配到该location时会按照按【指定查找路径的顺序】查找存在的文件，并使用第一个找到的文件进行请求处理。注意查找路径都是按照root或alias参数指定的值作为根路径来查找的。

        （2）try_files的选项则定义了【查找路径的顺序】，详见下例。

        （3）如果按照顺序均未匹配到对应的文件，则try_files的最后一个参数开始生效，它会进行内部重定向到最后一个参数指定的uri，重新进行新的location匹配。

备注：

        只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部uri的指向；

        最后一个参数是回退uri且必须存在，否则会出现内部500错误；

        如果是（格式2），若最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码。

实例：

location  /  {

    root   /home/nx/dist;

    try_files $uri $uri/ /index.php?$query_string

}

        （1）当用户请求 http://localhost/example 时，这里的 $uri 就是 /example，try_files会到root对应的目录下（在本例中指/home/nx/dist，以下用/$root代替）寻找这个文件。

        （2）如果/$root目录下存在example 文件，即/$root/example（其中 $root 是项目代码安装目录），则直接把这个文件的内容发送给用户。

        （3）如果/$root目录下没有叫 example 的文件，此时看try_files 的第二个选项$uri/，相比第一个选项$uri增加了一个/，也就是让你去看有没有名为 /$root/example/的目录，去/$root/example/目录下去寻找文件example。

        （4）如果仍然找不到，此时try_files 的最后一个选项 /index.php，发起一个内部“子请求”（可以理解为内部重定向），也就是相当于 nginx 发起一个HTTP请求到 http://localhost/index.php。

4.4. location匹配规则

一文彻底读懂nginx中的location指令 - 知乎 (zhihu.com)

5. Nginx功能配置

5.1. 缓存配置

        前端经常有一些图片，还有其他静态资源文件是基本不会发生变化的。

        对于这类不会发生改动的静态资源，可以选择把他们缓存到本地，防止每次请求都要去服务器上拉取，耗费时间和服务器带宽。

        以下看如何使用nginx配置缓存。

server {

​

...

location / {

  root /root/www/website/dist;

  index   index.html     index.htm;

​ # 匹配静态资源的文件后缀

  location ~ .*.(?:jpg|jpeg|png|svg)$ {

# 7天后过期

    expires   7d;

  }

}

​

...

}

        上面的配置是对一些图片资源进行的缓存配置，缓存时间为7天。

        修改好重启后刷新页面，找到关于图片资源的请求，然后就会发现请求第二次的时候就会从本地缓存中获取，并且响应头显示缓存过期时间是7天后。

 这是对图片的缓存，其他资源文件也是同理。       

 5.2. 跨域配置

        跨域是开发过程中或者面试过程中经常会碰到的问题，一般会回答jsonp或者服务端加响应头等方式，除此之外nginx也可以配置跨域。

        下面就是常见的跨域配置：

<code>server {

​

...

​ # 表示允许所有域名域跨域调用

add_header Access-Control-Allow-Origin *;

# 表示允许所有请求方法跨域

add_header Access-Control-Allow-Methods *;

# 检查请求的类型是不是预检命令

if ($request_method = OPTIONS) {

  return 200;

}

​

location / {

  root /root/www/website/dist;

  index   index.html     index.htm;

​

}

​

...

}

 5.3. gzip压缩配置

        如果存在静态资源过大，可能会导致服务端响应过慢。

        尽管为静态资源配置了缓存，但是如果是第一次获取资源仍然是没有缓存的，只能从服务器上拿。

        这个时候可以考虑开启gzip压缩，节省服务器的带宽。

server {

​

...

​

# 开启gzip压缩，同理，关闭为off

gzip on;

# 压缩的级别，一般取2-6，级别越高，压缩的越小，但越耗费服务器的cpu

gzip_comp_level 6;

# 超过1K的文件才进行压缩

gzip_min_length 1k;

# 文件类型

gzip_types image/png image/jpeg image/gif image/svg+xml;

# 在响应头中添加 Vary

gzip_vary on;

​

location / {

  root /root/www/website/dist;

  index   index.html     index.htm;

}

​

...

}

修改好后重启，打开页面，开启前这个logo的svg文件大小为1.9k：

开启gzip后，大小变为1.2k：

并且响应头上也有gzip的标识了：

5.4. 单页面应用刷新404问题

        通过如下配置，若刷新后页面消失则自动重定向到index.html（前面说过，这个一般首页）

<code>location / {

   try_files $uri $uri/ /index.html;

}