前后端分离项目的nginx多个静态站点和反向代理实践

本文介绍了在一个前后端分离的项目中,如何使用Nginx进行多个Vue静态站点的部署和反向代理配置。详细讲解了Vue项目的三个不同端口(首页、管理端、用户端)如何映射到同一IP的不同路径,并解决了跨域和端口问题。通过Nginx的反向代理配置,实现了对Spring Boot REST接口服务的访问,避免了实际部署时的IP和端口问题。
摘要由CSDN通过智能技术生成

背景说明

目前有以下几个项目:

  • 80(Vue项目首页)
  • 9090 (Vue项目管理端)
  • 8888(Vue项目用户端)
  • 7000(注册服务器)
  • 7010(网关)
  • 7011(系统模块微服务)
  • 7012(项目模块微服务)

访问流程是调用网关,通过网关接口实现了转发到各个微服务,如
xx:7010/module-service/user/info会调用7011微服务的接口

多模块的Vue项目部署

直接上nginx配置信息

listen       80;
server_name  localhost;
location / {
    root   /opt/module/static;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
            }
root   /opt/module/static;
location /developer {
    try_files $uri $uri/ /developer/index.html;
}
    		
location /manager {
    try_files $uri $uri/ /manager/index.html;
}

以上实现了多个前端静态模块的部署

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值