Nginx反向代理的配置原理和实现 - 实践

Nginx反向代理原理

什么是反向代理？

• 正向代理：客户端 → 代理服务器 → 目标服务器

• 反向代理：客户端 → 代理服务器 → 后端服务器

• 作用：隐藏后端服务器，统一入口，负载均衡

你的项目架构：

用户浏览器 → Nginx (80端口) → Spring Boot (8080端口)

Nginx配置文件详解

配置文件位置

# 主配置文件
/etc/nginx/nginx.conf
# 站点配置文件
/etc/nginx/conf.d/default.conf

你的项目配置：

​
server {
listen       80;                    # 监听80端口
server_name  localhost;             # 服务器名称
# 前端静态文件服务
location / {
root   /var/www/meal-accounting;  # 静态文件根目录
index  index.html index.htm;     # 默认首页
try_files $uri $uri/ /index.html; # SPA路由支持
}
# API请求反向代理
location /api/ {
proxy_pass http://localhost:8080;  # 代理到后端服务器
proxy_set_header Host $host;       # 传递原始Host头
proxy_set_header X-Real-IP $remote_addr;  # 传递真实IP
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递转发链
proxy_set_header X-Forwarded-Proto $scheme; # 传递协议类型
}
# 错误页面
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   /var/www/meal-accounting;
}
}
​

配置详解

1. 服务器块配置

server {
    listen       80;           # 监听端口
    server_name  localhost;    # 服务器名称
}

2. 静态文件服务

location / {
    root   /var/www/meal-accounting;  # 文件根目录
    index  index.html index.htm;     # 默认文件
    try_files $uri $uri/ /index.html; # SPA支持
}

作用：

• 服务Vue3构建的静态文件

• 支持单页应用路由

• 处理HTML、CSS、JS文件

3. API反向代理

location /api/ {
    proxy_pass http://localhost:8080;  # 后端服务器地址
    proxy_set_header Host $host;       # 传递Host头
    proxy_set_header X-Real-IP $remote_addr;  # 传递真实IP
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递转发链
    proxy_set_header X-Forwarded-Proto $scheme; # 传递协议
}

作用：

• 将/api/请求转发到后端

• 保持原始请求信息

• 支持负载均衡

请求流程详解

前端请求流程：

1. 用户访问: http://你的服务器ip/
   ↓
2. Nginx接收请求
   ↓
3. 匹配 location /
   ↓
4. 返回 /var/www/meal-accounting/index.html

API请求流程：

1. 前端发送: http://你的服务器ip/api/meal/save
   ↓
2. Nginx接收请求
   ↓
3. 匹配 location /api/
   ↓
4. 转发到: http://localhost:8080/meal/save
   ↓
5. Spring Boot处理请求
   ↓
6. 返回响应给Nginx
   ↓
7. Nginx返回给前端

配置参数详解

proxy_pass 参数：

proxy_pass http://localhost:8080;

• 作用：指定后端服务器地址

• 协议：HTTP协议

• 地址：localhost:8080

proxy_set_header 参数：

proxy_set_header Host $host;

• 作用：传递原始Host头

• 值：$host变量（原始请求的Host）

proxy_set_header X-Real-IP $remote_addr;

• 作用：传递客户端真实IP

• 值：$remote_addr变量（客户端IP）

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

• 作用：传递转发链

• 值：$proxy_add_x_forwarded_for变量（转发链）

高级配置

负载均衡配置

upstream backend {
    server localhost:8080;
    server localhost:8081;
    server localhost:8082;
}

location /api/ {
    proxy_pass http://backend;
}

SSL配置：

server {
    listen 443 ssl;
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location / {
        root /var/www/meal-accounting;
    }
}

总结

Nginx反向代理配置要点：

1. 静态文件服务：location / 处理前端文件

1. API代理：location /api/ 转发到后端

1. 请求头传递：保持原始请求信息

1. 错误处理：配置错误页面

1. 性能优化：缓存、压缩等

你的配置：

•  前端服务：Vue3静态文件

•  API代理：Spring Boot后端

•  请求转发：保持原始信息

•  错误处理：统一错误页面

Nginx反向代理让你的项目有了统一的入口！