终于把网站搞完了,也终于能够通过域名访问了,这次就简单回顾一下这么多时间的经历,总结一下。
项目地址穆音博客,本文发布原地址在Spring boot+vue打包、上传宝塔面板并配置https
我的开发环境是前端使用vue-admin-template,后端使用Spring boot+mybatis-plus,由于我要根据后端打包的效果做一下前端的配置,所以就先在后端打包。
后端打包时要注意代理穿透、后端许可的连接的部分。
代理穿透可以写两个允许的域名,我是写的自己要配置的域名加上服务器的ip地址,也可以就选择一个进行配置,不过建议都写上。注意我们前端开发时候是协商端口的,发布时候就不要写端口了,不然限定死了后面可能就连接不上了。
之后是进行application.yml里的配置:
port就是你最开始开发时候的端口信息,之前怎么写,就不用动了。
上下文路径就是前端在连接后端是会全局添加的一个路径,建议和我一样加上这个,因为后面在进行网页配置的时候会同时用要前端后端的配置,如果都是"/"的话两个会打架,所以加上个路径可以有所区分。
ssl是将对后端的访问转成https的协议,如果没有域名就可以不用配置,有的话就到云服务厂商哪里下载ssl的证书,选择给tomcat配置的,下载后放到和application.yml一起的resources目录下边就行。密码就是和文件一起下下来里面的txt文件的值,直接粘贴过来即可。
由于我开发的时候就直接使用的云端的数据库,所以这部分我就直接跳过了,如果开发时用的本地数据库,就把localhost改成服务器的ip地址,数据库的username、密码按照创建数据库时设置的用户名和密码即可。
终于到了打包环节,打包就直接在侧边栏的maven的lifecycle(生命周期)里双击package即可,如果之前生成过jar包就先双击clean再打包
之后在最外面的target目录下会右我们打包生成的jar包,这个就是我们最后要用的jar包(不是那个.jar.origional)
我们打开宝塔面板,在网站的PHP项目下点击添加站点
之后点击右侧的设置,在弹出的窗口中点击ssl,将自己申请好的ssl证书和密钥分别填入即可。
首先我们到安全面板,在防火墙中添加放行我们后端的端口,注意在云服务器厂商处也要添加!保证我们能能够正常访问端口。
点击最右侧的文件,进入我们网站项目的目录下,将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和配置文件,将其全部删除即可。
我们再到网站处点开站点的设置,点击弹出的面板中的配置文件,添加以下几个语句:
两个分别是静态的打开网站后直接查看的html,下边是后端的接口的配置,如果之前后端没有配置/api
的话在这里就会很麻烦。
完成配置后即可访问网站。