首页 > 其他分享 >Spring boot+vue打包、上传宝塔面板并配置https

Spring boot+vue打包、上传宝塔面板并配置https

时间:2023-05-27 12:22:05浏览次数:44  
标签:vue Spring 配置 boot jar 端口 https 打包

终于把网站搞完了,也终于能够通过域名访问了,这次就简单回顾一下这么多时间的经历,总结一下。

项目地址穆音博客,本文发布原地址在Spring boot+vue打包、上传宝塔面板并配置https

我的开发环境是前端使用vue-admin-template,后端使用Spring boot+mybatis-plus,由于我要根据后端打包的效果做一下前端的配置,所以就先在后端打包。

1.后端打包

后端打包时要注意代理穿透、后端许可的连接的部分。

首先是配置代理穿透:

代理穿透配置
代理穿透可以写两个允许的域名,我是写的自己要配置的域名加上服务器的ip地址,也可以就选择一个进行配置,不过建议都写上。注意我们前端开发时候是协商端口的,发布时候就不要写端口了,不然限定死了后面可能就连接不上了。

之后是进行application.yml里的配置:
application.yml配置
port就是你最开始开发时候的端口信息,之前怎么写,就不用动了。
上下文路径就是前端在连接后端是会全局添加的一个路径,建议和我一样加上这个,因为后面在进行网页配置的时候会同时用要前端后端的配置,如果都是"/"的话两个会打架,所以加上个路径可以有所区分。
ssl是将对后端的访问转成https的协议,如果没有域名就可以不用配置,有的话就到云服务厂商哪里下载ssl的证书,选择给tomcat配置的,下载后放到和application.yml一起的resources目录下边就行。密码就是和文件一起下下来里面的txt文件的值,直接粘贴过来即可。

数据库配置

由于我开发的时候就直接使用的云端的数据库,所以这部分我就直接跳过了,如果开发时用的本地数据库,就把localhost改成服务器的ip地址,数据库的username、密码按照创建数据库时设置的用户名和密码即可。

打包

终于到了打包环节,打包就直接在侧边栏的maven的lifecycle(生命周期)里双击package即可,如果之前生成过jar包就先双击clean再打包

之后在最外面的target目录下会右我们打包生成的jar包,这个就是我们最后要用的jar包(不是那个.jar.origional)

jar包域名配置测试

我们打开宝塔面板,在网站的PHP项目下点击添加站点
添加站点
之后点击右侧的设置,在弹出的窗口中点击ssl,将自己申请好的ssl证书和密钥分别填入即可。

运行jar

首先我们到安全面板,在防火墙中添加放行我们后端的端口,注意在云服务器厂商处也要添加!保证我们能能够正常访问端口。
点击最右侧的文件,进入我们网站项目的目录下,将jar包上传,完成后点击终端.
我们首先看一下当前有没有正在运行的Java程序,以防造成端口的占用:

//查看正在运行的Java程序id
jps
//结束程序运行
kill <进程ID>

查看程序

//测试运行
java -jar yourjarname.jar
//持久运行
nohup java -jar yourjarname.jar &
//退出
exit

测试运行后打开域名和相关端口查看,我是用的swagger看有没有配通的,
测试域名端口情况
前面是https加上自己的域名/api/是我们之前设置的上下文字符,后面是你可以访问的相关界面,能够打开这个说明我们可以后端可以用这个端口号进行使用,接下来就是修改前端的部分代码。

前端配置

前端打包

我使用的是vue-admin-template首先这个不能用正常的npm run build进行打包,他有一个生产环境的打包npm run build:stage和发布环境的打包npm run build:prod
两个分别对应最外侧的.env.production和.env.staging,我们要在这里配置为

VUE_APP_BASE_API = 'https://blog.muvocal.com:9999/api'

也就是我们刚才看的那个URL的前面部分。
如果部署时发现资源路径不对,就修改vue.config.js中的配置文件

publicPath: './' //请根据自己路径来配置更改

相关部分可以到vue-admin-template的官网中构建部分查看。
之后我们使用

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

进行打包即可。
打包完成后会在dist文件夹下生成一系列文件,一个文件夹,一个index.html和一个或几个图标。
我们将dist文件夹内的东西直接拖拽上传到之前放jar包的那个文件夹下。如果你直接用的系统生成的文件夹,会有一些初始的html和配置文件,将其全部删除即可。

最终nginx配置

我们再到网站处点开站点的设置,点击弹出的面板中的配置文件,添加以下几个语句:
配置文件
两个分别是静态的打开网站后直接查看的html,下边是后端的接口的配置,如果之前后端没有配置/api的话在这里就会很麻烦。

完成配置后即可访问网站。

标签:vue,Spring,配置,boot,jar,端口,https,打包
From: https://www.cnblogs.com/bailichangchuan/p/17436555.html

相关文章

  • Java 进阶 - SpringJPA 持久层框架
    参考资料https://spring.io/projects/spring-data-jpa介绍SpringDataJPA是Spring基于ORM(ObjectRelationalMapping)框架、JPA规范的基础上封装的一套JPA应用框架,底层使用了Hibernate的JPA技术实现,可使开发者用极简的代码即可实现对数据的访问和操作。它提供了......
  • VUE3
    https://github.com/moocstudent/vue-war昨天通过vue官网建立了vue项目,逐渐看了下组合式/选项式API的区别虽然在前几个月里,通过做SH的伙计给的单子接触了VUEANTD,但是实际上对其原理未知(难道只能说跟前天面试的一样,问Jquery是跟JS都是对DOM的操作吗)显然VUE有很多有趣的地方......
  • SpringMVC —— 关于获取请求参数的注解
    1、@RequestParam的3个作用?①起别名②设置默认值③给list集合赋值2、@RequestParam、@RequestBody、@PathVariable分别用于获取什么样格式的请求数据??号传值的参数json对象格式参数路径传值参数......
  • 基于Electron24+Vite4+Vue3搭建桌面端应用
    一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。之前也有使用vite2+vue3+electronc创建桌面端项目,不过 vue-cli-plugin-electron-builder 脚手架插件构建的项目electron版本只有13.x。如......
  • java基于springboot+vue时间管理系统、日记管理系统,附源码+数据库+lw文档+PPT
    1、项目介绍本次设计任务是要设计一个时间管理系统,通过这个系统能够满足时间管理的管理功能。系统的主要功能包括首页,个人中心,系统公告管理,用户管理,时间分类管理,事件数据管理,目标数据管理,用户日记管理等功能。管理员可以根据系统给定的账号进行登录,登录后可以进入时间管理系统,对......
  • SpringMVC-04数据处理及跳转
    SpringMVC参数接收处理和结果跳转处理1结果跳转方式1.1ModelAndView设置ModelAndView对象,根据view的名称,和视图解析器跳到指定的页面.**页面:**{视图解析器前缀}+viewName+{视图解析器后缀}<!--视图解析器--><beanclass="org.springframework.web.servle......
  • Spring6 探析之@PropertySource 注解
    Spring6探析之@PropertySource注解介绍@PropertySource注解用于加载配置类,在使用Spring时,我们可以使用@PropertySource注解将自定义的配置文件加载到Spring中,方便我们的自定义的开发下面是@PropertySource的源码@Target(ElementType.TYPE)@Retention(RetentionPol......
  • 什么是spring以及相关
    参考:https://www.bilibili.com/video/BV1jc411j7u5/?spm_id_from=333.788.recommend_more_video.0&vd_source=46d50b5d646b50dcb2a208d3946b1598......
  • Spring6 探析之@Import 注解
    Spring6探析之@Import注解简介@Import注解与@Bean注解的作用相同,都可以将实例注册到IOC中,但区别是,@Import只能作用在类上,并且使用@Import时,不需要再使用@Configuration注解下面是@Import的源码@Target(ElementType.TYPE)@Retention(RetentionPolicy.RUNTIME)@Documen......
  • SpringBoot打jar包
    pom<build><plugins><!--设定JDK版本--><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configur......