Nginx反向代理

el mar H

已于 2023-07-19 16:38:11 修改

阅读量158

点赞数 1

分类专栏：后端开发文章标签： nginx vue

于 2023-07-19 16:34:13 首次发布

本文链接：https://blog.csdn.net/weixin_45582490/article/details/131812249

版权

后端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Nginx反向代理

一、何为Nginx及其作用

Web服务器

在这里插入图片描述

Web服务器是一种软件或计算机程序，用于接收来自客户端的HTTP请求，并提供相应的HTTP响应。它的主要功能是处理和传输Web内容，以便用户可以通过互联网访问和浏览网站。

Web服务器通过网络接口（如网络端口）监听客户端发起的HTTP请求，并将请求转发给相应的处理程序（如应用程序、脚本或静态文件），以生成并返回相应的HTTP响应。它可以响应多种类型的HTTP请求，包括GET、POST、PUT、DELETE等。

Web服务器通常提供以下功能：

静态文件服务：Web服务器可以直接提供静态文件，如HTML、CSS、JavaScript、图像和其他媒体文件，以便客户端可以通过URL访问和获取这些文件。
动态内容生成：Web服务器可以将请求转发给应用程序或脚本，以生成动态内容，并将生成的结果作为HTTP响应返回给客户端。这使得网站可以动态生成和呈现内容，如动态页面、数据库查询结果等。
路由和重定向：Web服务器可以根据请求的URL路径将请求路由到不同的处理程序或处理路径。它还可以执行重定向操作，将请求重定向到另一个URL或位置。
安全性和身份验证：Web服务器通常提供安全性功能，如SSL/TLS加密通信、数字证书支持和基本的身份验证机制，以保护网站和客户端之间的通信安全。
缓存和性能优化：Web服务器可以缓存静态内容或动态内容的响应，以减轻后端服务器的负载并提高性能。它还可以实现各种性能优化技术，如压缩、缓存控制和CDN集成。

常见的Web服务器软件包括Apache HTTP Server、Nginx、Microsoft IIS、LiteSpeed等。它们在功能、配置和性能等方面可能有所不同，但都提供了处理和传输Web内容所需的基本功能。

反向代理服务器

反向代理服务器是一种位于服务器端的代理服务器，它接收来自客户端的请求，并将这些请求转发给后端服务器，然后将后端服务器返回的响应发送回客户端。客户端并不直接与后端服务器通信，而是与反向代理服务器建立连接。

具体来说，反向代理服务器的工作流程如下：

客户端向反向代理服务器发送请求，例如请求访问一个网站。
反向代理服务器接收到请求后，根据一定的负载均衡算法选择一个后端服务器处理该请求。这里的负载均衡算法可以是轮询、随机选择、基于性能指标的选择等。
反向代理服务器将客户端的请求转发给选中的后端服务器。
后端服务器处理请求并生成响应。
反向代理服务器将后端服务器返回的响应发送回客户端。

假设有一个班级里有多个同学和多位科任老师，还有一个班长。班级里的同学需要向科任老师提问问题，但并不知道科任老师们的详细联系方式。于是，他们将问题提交给班长，班长根据一定的策略选择一个合适的科任老师来回答问题，并将答案传递回给同学。

在这个例子中，班长就是反向代理服务器，同学是客户端，科任老师是后端服务器。班长接收同学的问题，并根据一定的选择策略（类似于负载均衡算法）选择一个合适的科任老师来回答问题，同学并不直接与科任老师联系，而是通过班长作为中间人来进行交互。这样做的好处是，同学不需要知道每位科任老师的联系方式，而且科任老师的联系方式和身份得到了保护。同样地，反向代理服务器隐藏了后端服务器的真实IP地址和细节，增加了安全性和保护了后端服务器。

Nginx作用

Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。

Web服务器：Nginx可以作为静态文件服务器，能够快速、高效地处理和传输静态文件，如HTML、CSS、JavaScript、图像等。它支持高并发的请求处理和静态内容的快速传输，有助于提高网站的性能和响应速度。
反向代理服务器：Nginx可以作为反向代理服务器，接收客户端请求，并将请求转发给后端的应用服务器。它可以实现负载均衡、请求分发和缓存等功能，将客户端的请求合理分配给后端的多个服务器，提高系统的可扩展性和稳定性。
负载均衡：Nginx可以通过负载均衡算法将客户端请求分发给多个应用服务器，实现请求的平衡分布，避免某个服务器过载，提高系统的性能和可靠性。
反向代理缓存：Nginx可以缓存服务器的响应，减少对后端服务器的请求，提高系统的响应速度和吞吐量。它可以根据请求的URL和响应的头部信息来缓存响应，提供快速的静态内容访问。
安全性增强：Nginx可以作为安全层，提供对Web应用程序的保护。它支持SSL/TLS协议，能够提供安全的HTTPS连接。此外，Nginx还支持访问控制、反向代理访问认证、DDoS防护等安全功能，提高系统的安全性。

二、Nginx设置示例

1. nginx.conf设置文件构成

(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 块，用于支持多个虚拟主机或反向代理配置等
        # ...
    }
}

2. 具体示例

（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 错误的出现。

在这里插入图片描述