Nginx速成

1、Nginx 概述

Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好

Nginx 作为 web 服务器 Nginx 可以作为静态页面的 web 服务器，同时还支持 CGI 协议的动态语言，比如 perl、php等。但是不支持 java。Java 程序只能通过与 tomcat 配合完成。Nginx 专为性能优化而开发，性能是其最重要的考量,实现上非常注重效率 ，能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。

2.代理的概念

上述方案中，server-01用于部署移动端和后台管理系统的两个后端服务。server02部署Nginx，作为移动端和后台管理系统两个前端项目的web服务器，同时也作为两个后端服务的反向代理。也就是说Nginx作为所有请求的入口，若请求内容是静态资源，Nginx便直接返回；若请求的内容为动态资源（后端服务接口），Nginx便代理请求后端服务，然后将结果响应给客户端。

知识点

代理

上述方案中提到了反向代理，下面系统的介绍一下代理（Proxy）这一概念。

这里的代理，是指在网络通信中，介于客户端和服务端之间的一个服务，客户端将请求发往代理服务，代理服务将请求转发到服务端，得到服务端响应后，再将结果响应为客户端，这一过程如下图所示。

下面介绍一下代理的两种类型——正向代理和反向代理，首先需要明确的是，两者的本质是相同的，都是位于客户端和服务端之间的一个”中间人“，只是两者代表的对象不同，正向代理是代表客户端向服务端发送请求，而反向代理是代表服务端接收客户端的请求。

下面是正向代理和反向代理的两个案例：

• 正向代理

  某校园为了阻止学生沉迷于网络游戏，设计了一个防火墙，封锁了所有的游戏网站。聪明的小明同学，通过一个代理服务器，绕过了防火墙的封锁，这个代理服务器就是一个典型的正向代理。

  

• 反向代理

  某电商平台由于日益增长的访问量，一台单一的后端服务器已经不能满足高并发的要求了，这时需要增设多个后端服务器，来分担压力。但是如何能够将客户端的请求均匀的分发到这多个后端服务器呢？一个最常用的方案便是使用代理服务，具体来讲，就是使用一个代理服务代表后端服务器接收请求，然后由代理服务将请求均匀的转发到多个后端服务器，这个代理服务就是一个典型的反向代理。

  

3.Nginx安装部署

安装

apt install nginx-core

查看版本：

nginx -v

安装路径：

whereis nginx

启动nginx

service nginx start

启动成功后，在浏览器输入ip地址(默认端口号是80)，即可看到nginx的欢迎页面

、查看nginx的进程

ps -ef |grep nginx

停服务：

kill -9 2323

或者

service nginx stop

卸载nginx

apt-get --purge autoremove nginx

重新加载命令

sudo systemctl reload nginx

sudo service nginx reload

关闭防火墙

要临时关闭防火墙，可以使用以下命令：

sudo ufw disable

4.Nginx配置文件

Nginx中有很多十分重要的目录或者文件，下面对核心内容进行介绍

1. 配置文件相关

   • /etc/nginx/：主要的Nginx配置文件目录。

   • /etc/nginx/nginx.conf：Nginx的主配置文件，包含全局配置信息。

2. 日志相关

   • /var/log/nginx/：Nginx的日志文件目录，包括访问日志和错误日志。

   • /var/log/nginx/access.log：访问日志，记录所有进入服务器的请求。

   • /var/log/nginx/error.log：错误日志，记录服务器处理过程中的错误信息。

4.1配置文件概述

1. 配置文件结构

   nginx.conf文件层次分明，整个文件分为多个区块（block），每个区块下可配置各种参数，也可包含其子级区块，具体结构如下图所示

   

   nginx.conf通过include /etc/nginx/conf.d/*.conf引入了/etc/nginx/conf.d目录下的所有.conf文件，该目录下的配置文件结构如下图所示

   

2. 重要配置说明

   下面分块介绍重要的配置参数

   • main block

     main block位于配置文件的最外层，其包含了影响Nginx服务器整体行为的全局参数，例如

     • user：定义Nginx工作进程的用户和用户组。

     • worker_processes：指定Nginx使用的工作进程数。

     • error_log：配置全局错误日志文件路径。

   • events block

     events block位于main block中，用于配置Nginx服务器的事件处理机制，主要配置Nginx如何处理客户端连接。

   • http block

     http block位于main block中，用于配置HTTP服务器相关功能。例如

     • access_log：指定访问日志的路径

     • log_format：指定访问日志的格式

   • server block

     server block位于http block，用于配置虚拟主机(先部署虚拟主机，再在虚拟主机中部署项目)，一个Nginx服务可包含多个虚拟主机，每个虚拟主机都可以独立的提供服务，因此借助Nginx，我们可以在一台服务器部署多个独立的网站，如下图所示

     

     域名和IP地址的映射关系保存到DNS服务器中 一个http block中可以配置多个server block

     每个虚拟主机使用一个server block进行配置，配置的内容包括

     • listen：虚拟主机监听的端口号。

     • server_name：指定虚拟主机的域名或者IP。

   • location block ：声明客户端请求资源的位置

     location block位于server block，用于配置请求的处理逻辑，一个server block中可以包含多个location block，例如

     server {listen 80;server_name www.atguigu.com;location /index {root /var/www/html;}location /api {proxy_pass http://backend-api;}
     }
     ​

     请求www.atguigu.com/index 路径时，会从本地/var/www/html 路径中找相应的资源返回给客户端

     请求www.atguigu.com/api 会把请求转发给 http://backend-api

4.2 静态资源服务器案例

下面完成一个简单案例，使用Nginx作为静态资源服务器。

项目资料中有一个简单的前端项目hello-nginx，其中只包含html、css等静态资源，现将其部署在server02上。

1. 上传静态资源到服务器

   将hello-nginx.zip上传到server02服务器任意路径。

2. 解压hello-nginx.zip到/usr/share/nginx/html中

   unzip hello-nginx.zip -d /usr/share/nginx/html

   最终的路径结构如下

   /usr
   └── share└── nginx└── html└── hello-nginx├── css│   └── style.css├── images│   └── img.png└── index.html

3. 配置Nginx虚拟主机

   虚拟主机的配置应位于/etc/nginx/nginx.conf的server block中，由于/etc/nginx/nginx.conf的http bolck中引入了/etc/nginx/conf.d/*.conf，所以虚拟主机在/etc/nginx/conf.d/目录下的任意.conf文件配置即可。

   • 创建/etc/nginx/conf.d/hello-nginx.conf文件

     vim /etc/nginx/conf.d/hello-nginx.conf

   • 添加如下内容

     server {listen       8080;server_name  192.168.10.102;
     ​location /hello-nginx {root   /usr/share/nginx/html;index  index.html;}
     }

   • 重新加载Nginx的配置文件

     systemctl reload nginx

4. 访问项目

   访问路径为http://192.168.10.102:8080/hello-nginx，若部署成功，可见到如下页面

   

5. 案例剖析

   下面通过上述案例来了解Ngxin处理请求的逻辑。

   • 匹配server

     由于Nginx中可存在多个虚拟主机的配置，故接收到一个请求后，Nginx首先要确定请求交给哪个虚拟主机进行处理。这很显然是根据server_name和listen进行判断的。例如上述的请求路径http://192.168.10.102:8080/hello-nginx，就会匹配到以下的虚拟主机

     server {listen       8080;server_name  192.168.10.102;......
     }

   • 匹配location

     由于一个server block中可能包含多个location block，故Nginx在完成server匹配后，还要匹配location，location的匹配是根据请求路径进行判断的。例如以下写法location关键字后边的/hello-nginx就是匹配规则，它表达的含义是匹配以/hello-nginx为前缀的请求，例如上述的http://192.168.10.102:8080/hello-nginx请求就会匹配到该location，而

     http://192.168.10.102:8080/nginx则不会。

     location /hello-nginx {......
     }

   • 定位文件

     完成location的匹配后，Nginx会以location block中的root作为根目录，然后查找请求路径对应的资源，例如以下配置

     location /hello-nginx {root   /usr/share/nginx/html;index  index.html;
     }

     当请求http://192.168.10.102:8080/hello-nginx 时，Ngxin会在/usr/share/nginx/html/hello-nginx路径中查找资源，由于该路径为目录（而非文件），故Nginx会在该目录下寻找index，也就是上述配置的index.html。然后将index.html响应给客户端。至此，该请求的处理就结束了。

     注意：上述提到的server_name和location均有多种匹配模式，例如精确匹配、前缀匹配、正则匹配，此处不再展开。

4.3 反向代理案例

下面完成一个简单案例，使用Nginx作为反向代理。

使用Nginx反向代理其他网站，比如http://www.atguigu.com。

1. 配置虚拟主机

   创建/etc/nginx/conf.d/hello-proxy.conf文件

   vim /etc/nginx/conf.d/hello-proxy.conf

   内容如下

   server {listen       9090;server_name  192.168.10.102;
   ​location / {proxy_pass http://www.atguigu.com;}
   }

2. 重新加载Nginx配置文件

   systemctl reload nginx

3. 观察代理效果

   使用浏览器访问http://192.168.10.102:9090，观察响应结果。

注意：借助反向代理功能，Nginx可以实现负载均衡等高级功能，此处不再展开。

4.4 配置域名映射

现实生活中，几乎所有的网站都是通过域名去访问。真正的域名需要付费购买，此处在宿主机本地配置一下域名映射，模拟一下域名的效果即可。

我们准备两个域名lease.atguigu.com和admin.lease.atguigu.com，前者用于访问移动端网站，后者用于访问后台管理系统。由于两个前端项目都部署在server02上，所以两个域名均指向server02的IP。

Windows的域名映射配置文件位于C:\Windows\System32\drivers\etc\hosts，需要使用管理员身份修改。使用管理员身份运行任意文本编辑器，然后使用其打开hosts文件，并增加如下内容：

192.168.10.102 lease.atguigu.com admin.lease.atguigu.com

修改完毕记得保存。

5.Nginx部署前端项目

10.2.1 Nginx配置概述

移动端和后台管理系统的前端项目均部署在server02的Nginx中，Nginx的配置思路如下图所示

5.1 移动端

打包

1. 明确前端请求的后端接口地址

   打包之前需要明确前端请求的后台接口地址，根据前文的部署规划，前端请求后台接口时走的是Ngxin反向代理，也就是请求的地址为http://lease.atguigu.com。

   所以我们需要修改.env.production文件中VITE_APP_BASE_URL环境变量的值，修改结果如下

   VITE_APP_BASE_URL='http://lease.atguigu.com'

2. 构建项目

   在项目的根目录执行以下命令

   npm run build

3. 查看打包结果

   观察项目的根目录是否出现dist目录

部署

1. 上传dist文件

   将rentHouseH5项目编译得到dist文件上传至server02服务器的/usr/share/nginx/html/app目录下。 别忘了解压上传的目录

   最终的目录结构为

   /usr
   └── share└── nginx└── html└── app├── static└── index.html└── ...              

2. 编辑Nginx配置文件

   创建/etc/nginx/conf.d/app.conf文件

   vim /etc/nginx/conf.d/app.conf

   内容如下

   server {listen       80;server_name  lease.atguigu.com;location / {root   /usr/share/nginx/html/app;index  index.html;}location /app {proxy_pass http://192.168.10.101:8081;}
   }

3. 重新加载Nginx配置文件

   执行以下命令重新加载配置文件

   systemctl reload nginx

4. 访问项目

   访问http://lease.atguigu.com

5.2 后台管理系统

打包

1. 明确前端请求的后端接口地址

   后台管理系统的前端请求后端接口时，同样会走Nginx反向代理，故其请求的接口地址为http://admin.lease.atguigu.com。

   确保rentHouseAdmin项目中的.env.production文件中的VITE_APP_BASE_URL环境变量配置为如下内容

   VITE_APP_BASE_URL='http://admin.lease.atguigu.com'

2. 打包

   在项目根目录执行以下命令

   npm run build

3. 查看打包结果

   观察项目的根目录是否出现dist目录

部署

1. 上传dist文件

   将rentHouseAdmin项目编译得到dist文件上传至server02服务器的/usr/share/nginx/html/admin目录下。

   最终的目录结构为

   /usr
   └── share└── nginx└── html└── admin├── assets└── index.html└── ...

2. 编辑Nginx配置文件

   创建/etc/nginx/conf.d/admin.conf文件

   vim /etc/nginx/conf.d/admin.conf

   内容如下

   server {listen       80;server_name  admin.lease.atguigu.com;location / {root   /usr/share/nginx/html/admin;index  index.html;}location /admin {proxy_pass http://192.168.10.101:8080;}
   }

3. 重新加载Nginx配置文件

   执行以下命令重新加载配置文件

   systemctl reload nginx

4. 访问项目

   访问http://admin.lease.atguigu.com0