基于springboot+vue的前后端分离后项目部署方案
2023-09-27 14:26:04 时间
基于springboot+vue的前后端分离后项目部署方案
在传统模式下,项目部署只可能是后端开发人员的事,与前端开发人员没有什么关系。而前后端分离后,可能会有些许改变。
常见的部署方案如下:
一、前后端一起部署,前端打包成静态文件,拷贝到后端项目中,然后部署后端项目。
二、前后端分开部署,前端使用nginx部署,后端单独运行,然后使用nginx反向代理。
三、前后端分开部署,前端扔在cdn,后端单独运行。
本文重点讲一下方案一和方案二,限定条件:路由模式-history
部署原理:
- 如果访问路径对应的文件存在,则返回对应文件;
- 如果访问路径对应的文件不存在,则返回index.html
部署方案一(springboot+vue)
- 后端新增控制器处理如下:
// 这里用到了模板引擎thymeleaf(当然,别的模板引擎也行)
@Controller
public class IndexController {
@GetMapping("/ui/**") // 所有的/ui/** 返回index.html页面
public ModelAndView ui() {
return new ModelAndView("/index.html");
}
@GetMapping("/") // 访问根目录,要转发到上面的请求
public ModelAndView index() {
return new ModelAndView("forward:ui");
}
}
注意:这里的/ui/主要是为了方便区分是否为前端路由,和前端的路由的base保持一致。
- 前端路由文件处理如下:
const router = new VueRouter({
base:"/ui/", // 这里要和控制层那里配置一致
mode:'history',
routes: [
{
path:'/',
name:'home',
component: () => import('@/views/home.vue')
},
{
path:'/about',
name:'about',
component: () => import('@/views/about.vue')
}
]
部署流程
-
将前端工程进行打包,生成文件在dist目录下
-
将前端打包的dist/**的所有文件(除index.html外)复制到src/main/resources/static目录下(springboot静态文件目录)
-
将前端打包的dist/index.html文件复制到src/main/resources/templates(模板引擎模板根目录)
-
maven打包生成jar包
-
发布
这里推荐一个maven打包插件
<!--资源插件,主要为了从前端项目里复制打包好的文件到springboot项目--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy static</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>src/main/resources/static</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <!--因为vue-cli打包的目录在项目的根目录,所以从这里复制--> <directory>/java_projects/${project.artifactId}/dist</directory> <includes> <include>css/</include> <include>img/</include> <include>fonts/</include> <include>js/</include> <include>favicon.ico</include> </includes> </resource> </resources> </configuration> </execution> <execution> <id>copy template</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>src/main/resources/templates</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <!--因为vue-cli打包的目录在项目的根目录,所以从这里复制--> <directory>/java_projects/${project.artifactId}/dist</directory> <includes> <include>index.html</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin>
部署方案二(nginx+springboot+vue)
nginx配置如下:
server {
listen 80;
server_name localhost;
root /java_projects/project_name/dist; # 前端打包目录
location / {
try_files $uri $uri/ @router; # 存在文件,返回文件,不存在,由@router处理
index index.html;
}
location @router {
rewrite ^.*$ /index.html last; # 所有请求,返回index.html
}
location /api { # 为了访问统一处理,前端也要修改
rewrite /api/(.*) /$1 break; # 重写请求(后端并无/api前辍)
proxy_pass http://127.0.0.1:18080; # 接口地址
}
}
或者不重写,url加/
server {
listen 80;
server_name localhost;
root /java_projects/project_name/dist; # 前端打包目录
location / {
try_files $uri $uri/ @router; # 存在文件,返回文件,不存在,由@router处理
index index.html;
}
location @router {
rewrite ^.*$ /index.html last; # 所有请求,返回index.html
}
location /api/ { # 为了访问统一处理,前端也要修改
proxy_pass http://127.0.0.1:18080/; # 接口地址
}
}
前端修改如下:
axios.defaults.baseURL='/api'; // 该配置与nginx配置一致
相关文章
- SpringBoot:上传单个图片,上传图片压缩包,读取本地磁盘图片
- Springboot+Vue前后端分离项目的部署
- Java项目(前端vue后台java微服务)在线考试系统(java+vue+springboot+mysql+maven)
- 超详细的VsCode创建SpringBoot项目(图文并茂)
- SpringBoot实现定时发送邮件
- SpringBoot整合Mybatisplus3.x之CRUD(一)
- SpringBoot进阶-Redis分布式锁原理(九)
- 基于Java(SpringBoot)+Vue+MySQL 实现(Web)的网络课程平台【100010329】
- 基于Hexo的个人博客搭建,对接SpringBoot + Vue搭建后台
- vue实战入门后台篇十:springboot+mybatis实现网站后台-项目整合发布测试
- vue实战入门后台篇五:springboot+mybatis实现网站后台-操作日志功能实现
- vue实战入门后台篇二:springboot+mybatis实现网站后台-登录鉴权功能实现
- springboot 集成driud
- 基于springboot+vue的“考研资讯平台”程序设计实现【毕业论文,源码】
- springboot+vue社区维修平台(源码+文档)
- springboot+vue在线答疑系统(源码+说明文档)
- SpringBoot整合RibbitMQ
- SpringBoot+Vue前端Http调用后台封装POI接口导出EXCEL
- Win10:SpringBoot+Vue+Nginx前后端分离
- SpringBoot+Vue实现的高校图书馆管理系统 附带详细运行指导视频
- SpringBoot+Vue.js实现大文件分片上传、断点续传与极速秒传