nginx:前后端分离常用配置

  • 前端:dist 放在 nginx/html/dist
  • 后端接口:/api/** 转发到 SpringBoot
XML 复制代码
server {
    listen 80;
    server_name localhost;

    # 前端静态资源
    location / {
        root   html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # Vue/React 路由刷新
    }

    # 后端接口代理
    location /api/ {
        proxy_pass http://127.0.0.1:8080/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;
    }
}

结尾不带/的:

location /api/{

proxy_pass http://127.0.0.1:8080

}

请求地址 转发到后端地址
/api/user/login http://127.0.0.1:8080/api/user/login
/api/getInfo http://127.0.0.1:8080/api/getInfo
/api/order/list http://127.0.0.1:8080/api/order/list

结尾带/的:

location /api/{

proxy_pass http://127.0.0.1:8080/

}

请求地址 转发到后端地址
/api/user/login http://127.0.0.1:8080/user/login
/api/getInfo http://127.0.0.1:8080/getInfo
/api/order/list http://127.0.0.1:8080/order/list
相关推荐
天衍四九-27 分钟前
【无标题】
前端·spring boot·mysql·nginx·docker
吴声子夜歌5 小时前
Nginx应用与运维——Nginx HTTP模块详解(动态赋值功能模块)
运维·nginx·http
姜鱼问生5 小时前
三层防火墙排查:Nginx 配好了浏览器还打不开
nginx·安全
小白的码BUG之路9 小时前
Docker -- 构建nginx镜像,启动vue项目
vue.js·nginx·docker
yume_sibai10 小时前
04-Nginx部署实战完全指南(前端部署 + 后端代理 + 监控告警 + 故障排查)
运维·前端·nginx
程序员清风20 小时前
Docker、Nginx 与 Kubernetes 部署 AI 后端服务
nginx·docker·kubernetes
吴声子夜歌1 天前
Nginx应用与运维——Nginx核心配置指令(一)
运维·nginx
谢亮_vipxieliang1 天前
一套 Compose 搭起完整开发环境:MySQL + Redis + Nginx
redis·mysql·nginx·docker
xbzb1 天前
Nginx 反向代理总 404?Location 匹配与 proxy_pass 尾斜杠避坑手册
linux·运维·nginx·虚拟主机
ShayneLee81 天前
Nginx只开一个端口!能做什么?(一)
运维·nginx