宝塔面板部署springboot + vue项目 + 配置域名

1,338 阅读2分钟

最近好朋友自己创业需要一个比较简易的后台管理系统,刚好我最近也是没这么忙了,用了一周搭了一个springboot+vue的后台给朋友先用上,后续朋友做大做强之后再组建自己的技术团队哈哈哈哈。现在此记录一下部署的相关过程。

一、环境、项目框架、前置准备介绍

云主机配置:2核2G轻量应用服务器
操作系统:Ubuntu Server 20.04 LTS 64bit
操作面板:宝塔面板
后端:springboot + mybatisplus
前端:vue-admin-template
前置准备:宝塔面板和云服务器的防火墙把需要用到的端口先放行!

二、域名解析配置

如果没有域名直接用ip也行的,方便记忆就用域名

image.png

三、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包并且配置环境

image.png

3.接口测试

image.png

四、Vue的配置与部署

1.调整访问接口的BASE_API

image.png

2.打包

执行命令run npm build:prod,执行结束之后会生成一个dist目录,里面是1个static文件夹、index.html以及其他的一些静态资源 image.png

image.png

3.部署

把整个dist文件夹都上传到服务器

image.png

五.展示和结语

1.展示

如果代码配置没问题,防火墙放行、域名解析都正常。那么现在直接访问我们www.xxx.com的域名就能看到登录页面了。api.xxx.com的接口也能正常返回。

image.png

2.结语

一个项目(麻雀虽小五脏俱全)从头到尾走一遍,设计开发上线等等,遇到了一些以前可能不会遇到的问题,比如返回的时间格式化处理、openjdk拉maven文件时的认证问题等等、包括现在线上部署遇到的一些麻烦。全流程走了一遍后,处理完这些问题感觉又多学到了点东西。