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

发布时间 2023-05-27 12:19:11作者: 百里长川

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

项目地址穆音博客,本文发布原地址在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的话在这里就会很麻烦。

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