Nginx反向代理

一、核心功能

1. 静态资源服务器（托管前端页面）

• 静态资源：html、css、js、图片，不需要 Java、Node 运行，浏览器直接打开
• 作用：把前端打包好的 dist 文件放到 nginx/html 目录，Nginx 直接返回页面给浏览器

2.反向代理（转发接口请求）

• 浏览器只认识 Nginx 地址也就是前端地址 （localhost:5173），不知道后端 Java 服务
• 前端发 /api/xxx 请求 → Nginx 拦截 → 去掉 /api 前缀 → 转发给 SpringBoot 后端

3.常用命令

start nginx          # 启动
nginx -s stop        # 停止（推荐）
nginx -t             # 校验配置文件语法（改完配置必跑！）
nginx -s reload      # 重启

二、配置文件

nginx.conf文件，nginx配置文件主要分为四个部分：

main{#（全局设置）
    http{#服务器
        upstream{} #（负载均衡服务器设置：主要用于负载均衡和设置一系列的后端服务器）
        server{ #（主机设置：主要用于指定主机和端口）
            location{}#（URL匹配特点位置的设置）
        }
    }
}

① server { }

server =网站名，访问的名字

 server {
    listen       5173;
    server_name  localhost;

• listen 5173：端口名。
• server_name localhost：访问的地址名字。
• 这个项目输入localhost:5173就可以访问nignx前端

②location模块（重点）

location：判断客人要访问什么地址，执行不同操作。

例子 1：location /

location / {
    root html;
}

/ 代表：所有普通网页请求。

root html：在html文件夹下找页面，打开就进入了html下

例子 2：location /api

location /api {
    rewrite /api/(.*)  /$1 break;
    proxy_pass http://localhost:8080;
}

1. 浏览器访问：http://localhost:5173/api/chat
2. 这个 url 以 /api 开头，命中 location /api
3. rewrite /api/(.*) /$1 break; 把地址前面的 /api 删掉
   • /api/chat → 变成 /chat
4. proxy_pass http://localhost:8080; Nginx 把处理好的新请求，转发给 SpringBoot： http://localhost:8080/chat

2.静态资源nginx打包

前后端分离项目：

1. 准备前端打包文件
   • 前端项目执行打包 npm run build，得到 dist 文件夹
   • 进入 nginx 目录，打开html文件夹
   • 清空 html 里旧文件，把 dist 里面所有内容粘贴进 html（html 下直接出现 index.html）
2. 修改 nginx/conf/nginx.conf，http {} 里面写下面这一整段 server

server {
    listen       5173;#前端的地址
    server_name  localhost;

    # 处理页面、静态资源
    location / {
        root html;
        index index.html;
        try_files $uri $uri/ /index.html; # Vue项目刷新404必加这一行
    }

    # 处理/api接口，转发给SpringBoot后端
    location /api {
        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_connect_timeout 300s;
        proxy_send_timeout 300s;
        proxy_read_timeout 300s;
        rewrite /api/(.*)  /$1 break;
        proxy_pass http://localhost:8080; # 后端SpringBoot的地址端口
    }
}

1. 检查 + 生效配置（固定命令） 打开 cmd，进入 nginx 根目录，依次敲：

   nginx -t # 检查配置有没有写错！有报错就回去改conf
   nginx -s reload # 加载新配置，不用关闭nginx

2. 启动项目 ① 启动 SpringBoot 后端项目，确认后端跑在 localhost:8080 ② 打开浏览器访问 http://localhost:5173，页面出来，接口可以正常请求

以后换别的前后端项目：

1. 重新打包前端，清空 nginx/html，放入新 dist 里面文件
2. 如果后端端口变了，修改 proxy_pass http://localhost:新端口;
3. 保存，nginx -t → nginx -s reload

三、反向代理

客户端发起网络请求，请求首先到达反向代理服务器；反向代理根据配置规则，将请求转发给内部一台或多台后端业务服务器，拿到后端返回的响应结果后，再回传给客户端。

（1）在Nginx主机修改 Nginx配置文件

upstream tomcat-travel{ # 负载均衡服务器设置：主要用于负载均衡和设置一系列的后端服务器
	   server 127.0.0.1:8080;
}
server {
        listen       80; 			# 监听的端口
        server_name  localhost; 	# 域名或ip
        location / {				# 访问路径配置
            # root   index;			# 根目录
	    	proxy_pass http://tomcat-travel/travel/;
            index  index.html; 		# 默认首页
        }
}

1. 新增upstream，定义后端 Tomcat 服务器组；`upstream`：**后端服务器组** ，名字 `tomcat-travel、``server 127.0.0.1:8080;`：把本机 8080 端口的 Tomcat 加入这个服务组
2. server 里面注释掉了 root，不再读取 Nginx 本地文件夹的网页；
3. 在 location 里面写proxy_pass，开启反向代理，把所有请求转给 Tomcat。

四、Nginx负载均衡

负载均衡：多台后端服务器共同分担用户访问压力，一台崩了还能继续提供服务（高可用）

配置负载均衡

upstream tomcat-nginx {
	   server 127.0.0.1:8080;
	   server 127.0.0.1:8081;
	   server 127.0.0.1:8082;
 }

server {
        listen       80; 			# 监听的端口
        server_name  localhost; 	# 域名或ip
        location / {				# 访问路径配置
            # root   index;			# 根目录
	    	proxy_pass http://tomcat-nginx/travel/;
            index  index.html; 		# 默认首页
        }
    }

1. upstream tomcat-nginx

upstream 就是后端服务器集群（服务器组） ，给这一组后端起名字叫 tomcat-nginx

1. 3 条 server：代表 3 台后端服务，端口分别是 8080、8081、8082
2. 默认策略：轮询 请求依次分配： 第 1 次请求 → 8080 第 2 次请求 → 8081 第 3 次请求 → 8082 第 4 次请求 → 8080，循环往复 所以刷新页面，会交替出现三台服务器的页面，每台概率约 33.3%