nginx配置前端请求转发到指定的后端ip方式
作者:tuokuac
nginx conf配置
配置把“前端静态文件”和“后端接口”统一收在 同一个 server{} 块 里,通过 两条 location 做分流,其中 /api 这条 location 用到了一点“小技巧”把路径裁掉后再转发。
下面按执行顺序逐句拆解,告诉你“请求是怎么被转发到 127.0.0.1:8081 的”。
1、全局上下文
worker_processes 1; # 只启 1 个 worker 进程(单核开发机够用)
events { worker_connections 1024; } # 每个 worker 同时维持 1024 条连接
http { … } # 下面所有指令都属于 http 层
2、监听端口与主机名
server {
listen 8080; # 浏览器访问 http://localhost:8080
server_name localhost;
…
}
3、前端静态资源定位
location / {
root html/hmdp; # 把 “/” 映射到 $NGINX_HOME/html/hmdp
index index.html index.htm;
}
- 请求
http://localhost:8080/→ nginx 在html/hmdp/index.html找文件并返回。 - 所有 JS/CSS/图片只要路径不以
/api开头,都走这条规则。
4、后端接口转发(核心)
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 三次握手开销。
5、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即可自动轮询+故障摘除。
6、错误页
error_page 500 502 503 504 /50x.html;
location = /50x.html { root html; }
后端 8081 挂掉或返回 50x 时,nginx 会把 html/50x.html 的内容返回给浏览器,避免裸错。
7、请求完整生命周期举例
浏览器输入:
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 来“敲门”。
1、IDEA 侧该做什么
保证项目 application.yml / application.properties 里端口是 8081:
server: port: 8081
- 直接点 ▶️ Run 或 Debug,让服务在 8081 端口处于 LISTEN 状态。
2、验证端口是否已开启
# macOS / Linux lsof -i:8081 # Windows netstat -ano | findstr 8081
看到 LISTEN 就说明 IDEA 已经把后端程序跑起来了,Nginx 随时可以把 /api 请求转发过来。
3、什么时候才需要在 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 自己会来“敲门”。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
