Web服务器是一种软件或计算机程序，用于接收来自客户端的HTTP请求，并提供相应的HTTP响应。它的主要功能是处理和传输Web内容，以便用户可以通过互联网访问和浏览网站。
Web服务器通过网络接口（如网络端口）监听客户端发起的HTTP请求，并将请求转发给相应的处理程序（如应用程序、脚本或静态文件），以生成并返回相应的HTTP响应。它可以响应多种类型的HTTP请求，包括GET、POST、PUT、DELETE等。
Web服务器通常提供以下功能：
常见的Web服务器软件包括Apache HTTP Server、Nginx、Microsoft IIS、LiteSpeed等。它们在功能、配置和性能等方面可能有所不同，但都提供了处理和传输Web内容所需的基本功能。
反向代理服务器是一种位于服务器端的代理服务器，它接收来自客户端的请求，并将这些请求转发给后端服务器，然后将后端服务器返回的响应发送回客户端。客户端并不直接与后端服务器通信，而是与反向代理服务器建立连接。
具体来说，反向代理服务器的工作流程如下：
假设有一个班级里有多个同学和多位科任老师，还有一个班长。班级里的同学需要向科任老师提问问题，但并不知道科任老师们的详细联系方式。于是，他们将问题提交给班长，班长根据一定的策略选择一个合适的科任老师来回答问题，并将答案传递回给同学。
在这个例子中，班长就是反向代理服务器，同学是客户端，科任老师是后端服务器。班长接收同学的问题，并根据一定的选择策略（类似于负载均衡算法）选择一个合适的科任老师来回答问题，同学并不直接与科任老师联系，而是通过班长作为中间人来进行交互。这样做的好处是，同学不需要知道每位科任老师的联系方式，而且科任老师的联系方式和身份得到了保护。同样地，反向代理服务器隐藏了后端服务器的真实IP地址和细节，增加了安全性和保护了后端服务器。
Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。
(1) events 块：这个块用于定义与事件处理相关的参数，如工作进程的数量和连接的处理方式。示例如下：
events {
worker_connections 1024; // 每个工作进程的最大连接数
use epoll; // 使用 epoll 事件驱动机制
}
(2) http 块：这个块包含了 HTTP 相关的配置指令，用于定义 HTTP 服务器的行为。在这个块中可以定义全局的配置以及具体的 server 块。示例如下：
http {
# 定义全局的配置，例如日志记录、MIME 类型映射等
server {
# 定义具体的 server 配置，包括监听端口、域名、请求处理等
listen 80; // 监听端口 80
server_name example.com; // 域名
location / {
# 处理请求的具体逻辑
}
}
server {
# 可以定义多个 server 块，用于支持多个虚拟主机或反向代理配置等
# ...
}
}
（1）只有一个服务器
http {
server {
listen 80; # Nginx 监听的端口，可以是80或者其他可用端口
location / {
proxy_pass http://127.0.0.1:8080; # 将请求转发给 Tomcat 服务器
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}
在上述配置中，Nginx 监听在本地的 80 端口，同时配置了一个 location 块，用于处理客户端对 Nginx 服务器的请求。/代表所有以http://127.0.0.1:8080为根地址的指令全都经过Nginx服务器代理，在 proxy_pass 指令中，我们将请求转发给本地的 Tomcat 服务器地址和端口（127.0.0.1:8080）。proxy_set_header 指令用于设置代理请求头，以便将原始客户端的 IP 地址传递给后端的 Tomcat 或者Flask等服务器。以VUE项目为例，原本其使用命令行npm run dev使得项目运行在8080端口，此时如果你想在前端访问8080端口下的项目，就需要输入localhost:8080，但是使用了上述代理之后只需要输入localhost或者localhost:80就好（因为默认端口就是80）。
（2）一个server多个服务器
server {
listen 80; # Nginx 监听的端口，可以是80或者其他可用端口
location /app1/ {
proxy_pass http://backend_servers1; # 将请求转发给 backend_servers1 组
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /app2/ {
proxy_pass http://backend_servers2; # 将请求转发给 backend_servers2 组
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
在 server 块中，我们通过 location 块为不同的 URI 路径配置反向代理。例如，当客户端请求 /app1/ 路径时，Nginx 会将请求转发给 backend_servers1 组中的后端服务器；当客户端请求 /app2/ 路径时，Nginx 会将请求转发给 backend_servers2 组中的后端服务器。这样，Nginx 可以同时反向代理多个后端服务器，实现负载均衡和请求的均衡分布。这里的**backend_servers1**可以类似示例（1）中设置为http://127.0.0.1:8080。
（3）VUE项目实战
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 打包好的VUE项目，放于dist文件夹
root html/dist;
index index.html index.htm;
location /api/web1 {
rewrite ^.+api/web1/?(.*)$ /$1 break;
# 后端的真实接口
proxy_pass http://127.0.0.1:8083;
proxy_redirect off;
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_set_header Cookie $http_cookie;
# proxy_redirect off;
proxy_set_header X-NginX-Proxy true;
# 加大请求缓存
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
}
location /api/web2 {
rewrite ^.+api/web2/?(.*)$ /$1 break;
# 后端的真实接口
proxy_pass http://127.0.0.1:8082;
proxy_redirect off;
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_set_header Cookie $http_cookie;
proxy_set_header X-NginX-Proxy true;
# 加大请求缓存
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
}
}
以VUE项目为例，需要先将项目打包，打包教程按照(48条消息) 使用Nginx部署Vue项目超详细图文教程！含踩坑步骤！_nginx vue_Hi丶ImViper的博客-CSDN博客链接教程为例。
server { ... }: 定义一个服务器块，用于处理具体的请求。
listen 80;: 监听端口 80，该服务器块将处理来自客户端的请求。server_name localhost;: 定义服务器的名称为 localhost。root html/dist;: 指定根目录为 html/dist，即将静态文件（例如打包好的 VUE 项目）放置于该目录。index index.html index.htm;: 指定默认的索引文件为 index.html 或 index.htm。location /api/web1 { ... }: 配置反向代理位置，当客户端请求路径以 /api/web1 开头时，将请求转发到 http://127.0.0.1:8083，并设置一些代理相关的头部信息。location /api/web2 { ... }: 同理，配置另一个反向代理位置，将请求转发到 http://127.0.0.1:8082。在具体的配置中，rewrite 指令用于重写请求的 URL，去除 /api/web1 或 /api/web2 的前缀部分。然后使用 proxy_pass 指令将请求转发给相应的后端服务器。其他的 proxy_set_header 指令用于设置代理请求头，以便将客户端的 IP 地址等信息传递给后端服务器。
（4） 可能出现的BUG
location / {
# 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;
# 请求指向的首页
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
一般使用Webpack进行前端项目封装的时候，就算输入一个错误的域名，例如下列的localhost:8080/cv（原本应该是cvparameter），仍会出现空白的html页面，而不会报错。但是当我们使用Nginx进行反向代理的时候，可能会出现**erro 500或者404**，这时候就需要检查nginx.conf是否有以上代码。
上述配置的作用是，在单页应用中，当用户访问根路径 / 时，Nginx 会尝试查找与请求路径相匹配的文件或目录，如果找不到则将请求转发到 @router 块。@router 块对所有的请求进行重写，将请求指向 index.html 文件，然后再交给 Vue 路由处理请求的资源。
这样做的目的是解决在 Vue 路由刷新时可能出现的 404 错误，因为在单页应用中，所有的路由资源实际上都是由 index.html 文件和 Vue 路由动态生成的。通过配置 Nginx 将请求重写到 index.html 文件，确保 Vue 路由能够正确处理这些请求，从而避免 404 错误的出现。
