nginx配置前端请求转发到指定的后端ip

nginx conf配置

配置把"前端静态文件"和"后端接口"统一收在 同一个 server{} 块 里，通过 两条 location 做分流，其中 /api 这条 location 用到了一点"小技巧"把路径裁掉后再转发。下面按执行顺序逐句拆解，告诉你"请求是怎么被转发到 127.0.0.1:8081 的"。

全局上下文

worker_processes 1; # 只启 1 个 worker 进程（单核开发机够用）
events { worker_connections 1024; } # 每个 worker 同时维持 1024 条连接
http { ... } # 下面所有指令都属于 http 层

监听端口与主机名

server {
listen 8080; # 浏览器访问 http://localhost:8080
server_name localhost;
...
}

前端静态资源定位

location / {
root html/hmdp; # 把 "/" 映射到 $NGINX_HOME/html/hmdp
index index.html index.htm;
}

请求 http://localhost:8080/ → nginx 在 html/hmdp/index.html 找文件并返回。
所有 JS/CSS/图片只要路径不以 /api 开头，都走这条规则。

后端接口转发（核心）

location /api { ... }

当 URI 以 /api 开头时，进入该上下文，下面每一步都决定了"如何转发"。

4.1 剥离前缀

复制代码

rewrite /api(/.*) $1 break;

正则把 /api/user/login 捕获成 /user/login 并存入 $1。
break 表示不再重新搜索 location ，在当前 location 内继续执行。
结果：nginx 内部把 URI 改成 /user/login，但浏览器地址栏仍是 /api/user/login。

4.2 设置代理协议版本

复制代码

proxy_http_version 1.1;

开启 HTTP/1.1，才能使用长连接（keep-alive），减少反复握手。

4.3 打开请求头透传

复制代码

proxy_pass_request_headers on;

默认就是 on，写在这里为了显式强调：浏览器发来的所有头（Cookie、Authorization...）都会原样送到后端。

4.4 指定上游地址

复制代码

proxy_pass http://127.0.0.1:8081;

把已经 rewrite 过的 /user/login 直接发给本机 8081 端口。
如果这里写成 http://backend 就会走下面定义的 upstream 负载均衡，但作者注释掉了。

4.5 失败重试

复制代码

proxy_next_upstream error timeout;

只有写 proxy_pass http://backend 且 upstream 里有多台机器时，这条才会触发"换下一台重试"。目前只有一台，写不写效果一样。

4.6 keep-alive 连接池

复制代码

keepalive_timeout   30s;
keepalive_requests  1000;

告诉 nginx"与后端 8081 保持长连接，最多复用 1000 次或 30 s 超时再关闭"，减少 TCP 三次握手开销。

upstream 块（备用）

upstream backend {
server 127.0.0.1:8081 max_fails=5 fail_timeout=10s weight=1;
}

目前只有一台，实际没用到。
如果想水平扩容，再写一行 server 127.0.0.1:8082 ...，然后把 proxy_pass http://127.0.0.1:8081 改成 proxy_pass http://backend 即可自动轮询+故障摘除。

错误页

error_page 500 502 503 504 /50x.html;
location = /50x.html { root html; }

后端 8081 挂掉或返回 50x 时，nginx 会把 html/50x.html 的内容返回给浏览器，避免裸错。

请求完整生命周期举例

浏览器输入：
http://localhost:8080/api/user/login
nginx 监听 8080，收到 GET /api/user/login
匹配 location /api → 进入该上下文
rewrite 把 URI 改成 /user/login
proxy_pass http://127.0.0.1:8081 → 发请求 GET /user/login 给后端
后端返回 JSON → nginx 原样返给浏览器（因为 default_type application/json 只是响应头兜底，实际后端返回什么 Content-Type 就按什么走）

一句话总结

"先 rewrite 去掉 /api 前缀，再用 proxy_pass 把剩余路径转发到 127.0.0.1:8081，同时开启 HTTP1.1 长连接和失败重试机制"------这就是该配置实现"前端请求转发给后端"的全部秘密。

不用在 IDEA 里把"127.0.0.1:8081"写死到代码里；

IDEA 只负责把 Spring Boot（或你用的框架）启动在 8081 端口即可，剩下的由 Nginx 来"敲门"。

IDEA 侧该做什么

保证项目 application.yml / application.properties 里端口是 8081：
yaml 复制代码
```
server:
  port: 8081
```
直接点 ▶️ Run 或 Debug ，让服务在 8081 端口处于 LISTEN 状态。

验证端口是否已开启

bash 复制代码

# macOS / Linux
lsof -i:8081
# Windows
netstat -ano | findstr 8081

看到 LISTEN 就说明 IDEA 已经把后端程序跑起来了，Nginx 随时可以把 /api 请求转发过来。

什么时候才需要在 IDEA 里配"外部地址"

你本地调试前端页面 ，但想让前端直接调 IDEA 里的后端（不走 Nginx），

才在前端 .env 或 vite.config 里写：
复制代码
```
VITE_API_BASE = 'http://127.0.0.1:8081'
```
这只是开发阶段的浏览器→后端直连，与 Nginx 无关。
一旦用 Nginx 做反向代理，前端就统一访问 http://localhost:8080/api/...，

由 Nginx 转发到 IDEA 的 8081，代码/IDEA 侧无需再感知 127.0.0.1:8081。

一句话总结

IDEA 只要把项目跑在 8081 端口就行，不需要也不推荐把"127.0.0.1:8081"硬编码到后端代码里；Nginx 自己会来"敲门"。