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
相关推荐
闪亮的路灯19 小时前
威联通QTS使用自带web服务期代理前端(类似nginx)
前端·nginx·威联通
難釋懷1 天前
Nginx外置缓存-error_page
运维·nginx·缓存
怪味趣多1 天前
r创建动画。 . 使用TFloatAnimation通过改变图片的位置创建动车。 . 使用TPathAnimation创建路径动画。 ...
运维·nginx
七七powerful2 天前
为离线的bcliunx euler&龙晰 配置 yum源 nginx代理
nginx·yum·bclinux
AlbertS2 天前
Let‘s Encrypt 证书自动续期并自动应用到Nginx
运维·nginx·ssl·cerbot·renew·续期
泡沫冰@3 天前
上章节中文件的讲解
前端·网络·nginx
難釋懷3 天前
Nginx内存缓存
nginx·缓存·junit
云计算磊哥@3 天前
运维开发宝典059-大型网站nginx服务器管理全集5
服务器·nginx·运维开发
cesium vue4 天前
nginx 流媒体配置
运维·nginx
zhougl9964 天前
Gateway 和 Nginx 路由区别
运维·nginx·gateway