最近好朋友自己创业需要一个比较简易的后台管理系统,刚好我最近也是没这么忙了,用了一周搭了一个springboot+vue的后台给朋友先用上,后续朋友做大做强之后再组建自己的技术团队哈哈哈哈。现在此记录一下部署的相关过程。
一、环境、项目框架、前置准备介绍
云主机配置:2核2G轻量应用服务器
操作系统:Ubuntu Server 20.04 LTS 64bit
操作面板:宝塔面板
后端:springboot + mybatisplus
前端:vue-admin-template
前置准备:宝塔面板和云服务器的防火墙把需要用到的端口先放行!
二、域名解析配置
如果没有域名直接用ip也行的,方便记忆就用域名
三、springboot的配置与部署
1.跨域配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("www.xxx.com")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true);
}
}
2.上传maven打包的jar包并且配置环境
3.接口测试
四、Vue的配置与部署
1.调整访问接口的BASE_API
2.打包
执行命令run npm build:prod,执行结束之后会生成一个dist目录,里面是1个static文件夹、index.html以及其他的一些静态资源
3.部署
把整个dist文件夹都上传到服务器
五.展示和结语
1.展示
如果代码配置没问题,防火墙放行、域名解析都正常。那么现在直接访问我们www.xxx.com的域名就能看到登录页面了。api.xxx.com的接口也能正常返回。
2.结语
一个项目(麻雀虽小五脏俱全)从头到尾走一遍,设计开发上线等等,遇到了一些以前可能不会遇到的问题,比如返回的时间格式化处理、openjdk拉maven文件时的认证问题等等、包括现在线上部署遇到的一些麻烦。全流程走了一遍后,处理完这些问题感觉又多学到了点东西。