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 nginxsudo service nginx reload
关闭防火墙
要临时关闭防火墙,可以使用以下命令:
sudo ufw disable
4.Nginx配置文件
Nginx中有很多十分重要的目录或者文件,下面对核心内容进行介绍
-
配置文件相关
-
/etc/nginx/
:主要的Nginx配置文件目录。 -
/etc/nginx/nginx.conf
:Nginx的主配置文件,包含全局配置信息。
-
-
日志相关
-
/var/log/nginx/
:Nginx的日志文件目录,包括访问日志和错误日志。 -
/var/log/nginx/access.log
:访问日志,记录所有进入服务器的请求。 -
/var/log/nginx/error.log
:错误日志,记录服务器处理过程中的错误信息。
-
4.1配置文件概述
-
配置文件结构
nginx.conf
文件层次分明,整个文件分为多个区块(block),每个区块下可配置各种参数,也可包含其子级区块,具体结构如下图所示nginx.conf
通过include /etc/nginx/conf.d/*.conf
引入了/etc/nginx/conf.d
目录下的所有.conf
文件,该目录下的配置文件结构如下图所示 -
重要配置说明
下面分块介绍重要的配置参数
-
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
上。
-
上传静态资源到服务器
将
hello-nginx.zip
上传到server02
服务器任意路径。 -
解压
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
-
配置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
-
-
访问项目
访问路径为http://192.168.10.102:8080/hello-nginx,若部署成功,可见到如下页面
-
案例剖析
下面通过上述案例来了解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
。
-
配置虚拟主机
创建
/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;} }
-
重新加载Nginx配置文件
systemctl reload nginx
-
观察代理效果
使用浏览器访问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 移动端
打包
-
明确前端请求的后端接口地址
打包之前需要明确前端请求的后台接口地址,根据前文的部署规划,前端请求后台接口时走的是Ngxin反向代理,也就是请求的地址为
http://lease.atguigu.com
。所以我们需要修改
.env.production
文件中VITE_APP_BASE_URL
环境变量的值,修改结果如下VITE_APP_BASE_URL='http://lease.atguigu.com'
-
构建项目
在项目的根目录执行以下命令
npm run build
-
查看打包结果
观察项目的根目录是否出现
dist
目录
部署
-
上传dist文件
将
rentHouseH5
项目编译得到dist
文件上传至server02
服务器的/usr/share/nginx/html/app
目录下。 别忘了解压上传的目录最终的目录结构为
/usr └── share└── nginx└── html└── app├── static└── index.html└── ...
-
编辑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;} }
-
重新加载Nginx配置文件
执行以下命令重新加载配置文件
systemctl reload nginx
-
访问项目
访问http://lease.atguigu.com
5.2 后台管理系统
打包
-
明确前端请求的后端接口地址
后台管理系统的前端请求后端接口时,同样会走Nginx反向代理,故其请求的接口地址为
http://admin.lease.atguigu.com
。确保rentHouseAdmin项目中的
.env.production
文件中的VITE_APP_BASE_URL
环境变量配置为如下内容VITE_APP_BASE_URL='http://admin.lease.atguigu.com'
-
打包
在项目根目录执行以下命令
npm run build
-
查看打包结果
观察项目的根目录是否出现
dist
目录
部署
-
上传dist文件
将
rentHouseAdmin
项目编译得到dist
文件上传至server02
服务器的/usr/share/nginx/html/admin
目录下。最终的目录结构为
/usr └── share└── nginx└── html└── admin├── assets└── index.html└── ...
-
编辑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;} }
-
重新加载Nginx配置文件
执行以下命令重新加载配置文件
systemctl reload nginx
-
访问项目
访问http://admin.lease.atguigu.com0