大连密封材料 发表于 2024-6-11 10:34:53

SpringBoot前后端分离项目,打包、部署到服务器详细图文流程

实施步调

一、修改配置文件地点

1.修改MySQL配置

修改MySQL地点,修改需要部署的数据名,账号和密码
https://img-blog.csdnimg.cn/ca7b4fb314d24d93a458bf9728616e23.png
2.修改Redis配置

修改Redis地点,修改需要部署的Redis密码(如果需要的话)
https://img-blog.csdnimg.cn/82985bb202aa4e66a860f8ab72372329.png
3.修改日志路径和字符集配置

修改logback.xml中日志的保存地点
https://img-blog.csdnimg.cn/f071fa929c62435fa26d3aa60c33071e.png
重新设置日志字符集(防止放到服务器上去之后日志出现乱码)
https://img-blog.csdnimg.cn/6bd411cc2c8a42a092fa029b364b70ac.png
https://img-blog.csdnimg.cn/7d976089ac7f43fd8519d1ac73facf1e.png
二、将源码压缩并上传服务器

1.上传前端文件



[*]提前在本地将完整的源码文件,压缩成.zip格式
[*]在服务器上创建存放项目源码的文件夹(/workspace)
[*]通过xftp工具将打包好的前端项目源码上传到服务器对应文件夹下
[*]利用命令unzip ruoyi-ui.zip来解压项目源码
[*]利用命令rm -rf ruoyi-ui.zip删除原来的压缩文件
[*]利用命令cd ruoyi-ui/进入源码文件夹
2.上传后端文件(同上)

三、前端项目打包

1.安装依赖



[*]利用命令cd ruoyi-ui/进入源码文件夹
[*]npm install --unsafe-perm --registry=https://registry.npm.taobao.org安装前端项目依赖(服务器必须安装node.js)
[*]--unsafe-perm 防止权限题目
[*]--registry=https://registry.npm.taobao.org 淘宝镜像源,国内速率更快
2.项目打包



[*]利用命令npm run build:prod
[*]打包完成后会生成一个dist目录(默认目录名为dist)
https://img-blog.csdnimg.cn/98ba568175d5481c9a120ce7af9fc042.png
四、后端项目打包

1.项目打包(jar包)



[*]利用命令mvn package(需要服务器安装maven情况)
[*]利用命令cd target/进入到目录就能看到打好的jar包(这里的jar包是ruoyi.jar)
[*]将jar包拷贝到上级目录,防止target目录整理导致jar包丢失
2.项目打包(war包)



[*] 修改pom文件
https://img-blog.csdnimg.cn/eb8b5cd9a0f9487abafc7ad5c87923d3.png
[*] 排撤除自带的Tomcat,如许才气部署到外置的tomcat
https://img-blog.csdnimg.cn/7bba5a09e9774a4c8528419df2ebda80.png
[*] 新增一个启动类,指向原有的启动类
https://img-blog.csdnimg.cn/051cf4547d7e448888eaf913ed701ddb.png
[*] 将修改后的两个文件上传到服务器(上传对应文件并替换即可)
[*] 利用命令mvn clean整理目录
[*] 利用命令mvn package打war包
[*] 利用命令cd target在这个目录就找到了war包
五、部署前端项目

1.利用Nginx部署前端项目



[*] 利用命令cd /usr/local/nginx/进入到nginx的目录
https://img-blog.csdnimg.cn/49ff4e4d389948a293d0e30451cd06af.png
[*] 修改Nginx的配置文件(修改conf文件夹下的nginx.conf文件)
[*] 将location位置的root反面跟的路径修改为前端项目打包后的文件地点
https://img-blog.csdnimg.cn/61b554078227498ebc1c096f881ddca9.png
[*] 防止出现权限相关的题目,将文件开头的user修改为root
https://img-blog.csdnimg.cn/e4721272b6d44dd3b07765cc219e5ef9.png
[*] 利用命令cd sbin/进入到对应目录
[*] 利用命令./nginx启动nginx
[*] 此时就可以在欣赏器输入对应的ip地点访问前端了
六、部署后端项目

1.部署jar包方式



[*] 在对应目录下利用命令nohup java -jar ruoyi.jar &后台运行后端项目
[*] 此时的前端项目可能会依然报错404,这是因为前端和后端的地点没有关联起来
[*] 重新在nginx.conf文件中配置代理
https://img-blog.csdnimg.cn/e17ff2826b38448895f4b3da4f4f8838.png
[*] 进入到nginx目录下重新加载一下nginx/usr/local/nginx/sbin/nginx -s reload
[*] 此时重新访问前端项目,已经不会报错了
[*] 恭喜你项目部署完成!
2.部署war包方式



[*]ps -aux | grep java查看当前java进程
[*]kill -9 进程号关掉进程
[*]定位到tomcat的文件夹下cd /usr/local/tomcat/
[*]将刚才打包好的war包放到webapps这个目录下
[*]cd webapps/后执行命令cp /root/workspace/ruoyi/ruoyi.war ./将war包拷贝到当前目录下
[*]启动tomcatservice tomcat start
[*]此时会有一个题目,直接访问ip打开的是tomcat的主页,需要在原有的地点后加上/ruoyi才气访问到后端
[*]解决这个题目需要修改tomcat的配置,定位到tomcat文件夹下的conf目录中,找到server.xml
[*]新增一条配置信息,将原来的访问方式改为根目录访问
https://img-blog.csdnimg.cn/3d2d65683be34e0293292f53f9be6a1d.png
[*]将tomcat停掉service tomcat stop 再重新启动service tomcat start
3.配置集群



[*] 修改nginx.conf文件
https://img-blog.csdnimg.cn/c14f065bd91f48fc988cc86291f75ea0.png
[*] 修改代理转发配置为上面修改的upstream
https://img-blog.csdnimg.cn/9513eff7821740ed8ae6d2b38ff5fbeb.png
[*] 重启一下nginx/usr/local/nginx/sbin/nginx -s reload
[*] 及时监测一下日志,看如今访问的是哪个后端tail -f 日志文件名
部署注意事项

前端页面非首页部分革新的时候,页面404题目

修改nginx配置文件,将以下代码放入nginx中
location / {
    ……
    try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}
参考文章:https://www.jb51.net/article/261803.htm
部署后端项目启动失败

查看是不是后端项目标端口号被占用了
netstat -anp | grep 端口号
节省服务器空间

前端和后端的项目打包都可以在本地完成,上传服务器可以最小化上传jar包和dist文件夹,这种方式最节省服务器空间资源


[*]后端项目只保留jar包即可
[*]前端项目只保留dist文件夹即可

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: SpringBoot前后端分离项目,打包、部署到服务器详细图文流程