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

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 自己会来“敲门”。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论