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

文章目录

  • 实施步骤
    • 一、修改配置文件地址
      • 1.修改MySQL配置
      • 2.修改Redis配置
      • 3.修改日志路径和字符集配置
    • 二、将源码压缩并上传服务器
      • 1.上传前端文件
      • 2.上传后端文件(同上)
    • 三、前端项目打包
      • 1.安装依赖
      • 2.项目打包
    • 四、后端项目打包
      • 1.项目打包(jar包)
      • 2.项目打包(war包)
    • 五、部署前端项目
      • 1.使用Nginx部署前端项目
    • 六、部署后端项目
      • 1.部署jar包方式
      • 2.部署war包方式
      • 3.配置集群
  • 部署注意事项
    • 前端页面非首页部分刷新的时候,页面404问题
    • 部署后端项目启动失败
    • 节省服务器空间

实施步骤

一、修改配置文件地址

1.修改MySQL配置

修改MySQL地址,修改需要部署的数据名,账号和密码
在这里插入图片描述

2.修改Redis配置

修改Redis地址,修改需要部署的Redis密码(如果需要的话)
在这里插入图片描述

3.修改日志路径和字符集配置

修改logback.xml中日志的保存地址
在这里插入图片描述

重新设置日志字符集(防止放到服务器上去之后日志出现乱码)
在这里插入图片描述
在这里插入图片描述

二、将源码压缩并上传服务器

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)
    在这里插入图片描述

四、后端项目打包

1.项目打包(jar包)

  • 使用命令mvn package(需要服务器安装maven环境)
  • 使用命令cd target/进入到目录就能看到打好的jar包(这里的jar包是ruoyi.jar)
  • 将jar包拷贝到上级目录,防止target目录清理导致jar包丢失

2.项目打包(war包)

  • 修改pom文件
    在这里插入图片描述

  • 排除掉自带的Tomcat,这样才能部署到外置的tomcat
    在这里插入图片描述

  • 新增一个启动类,指向原有的启动类
    在这里插入图片描述

  • 将修改后的两个文件上传到服务器(上传对应文件并替换即可)

  • 使用命令mvn clean清理目录

  • 使用命令mvn package打war包

  • 使用命令cd target在这个目录就找到了war包

五、部署前端项目

1.使用Nginx部署前端项目

  • 使用命令cd /usr/local/nginx/进入到nginx的目录
    在这里插入图片描述

  • 修改Nginx的配置文件(修改conf文件夹下的nginx.conf文件)

  • 将location位置的root后面跟的路径修改为前端项目打包后的文件地址
    在这里插入图片描述

  • 防止出现权限相关的问题,将文件开头的user修改为root
    在这里插入图片描述

  • 使用命令cd sbin/进入到对应目录

  • 使用命令./nginx启动nginx

  • 此时就可以在浏览器输入对应的ip地址访问前端了

六、部署后端项目

1.部署jar包方式

  • 在对应目录下使用命令nohup java -jar ruoyi.jar &后台运行后端项目

  • 此时的前端项目可能会依然报错404,这是因为前端和后端的地址没有关联起来

  • 重新在nginx.conf文件中配置代理
    在这里插入图片描述

  • 进入到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
  • 新增一条配置信息,将原来的访问方式改为根目录访问
    在这里插入图片描述
  • 将tomcat停掉service tomcat stop 再重新启动service tomcat start

3.配置集群

  • 修改nginx.conf文件
    在这里插入图片描述

  • 修改代理转发配置为上面修改的upstream
    在这里插入图片描述

  • 重启一下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文件夹即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/19797.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一次零基础靶机渗透细节全程记录

一、打靶总流程 1.确定目标: 在本靶场中,确定目标就是使用nmap进行ip扫描,确定ip即为目标,只是针对此靶场而言。其他实战中确定目标的方式包括nmap进行扫描,但不局限于这个nmap。 2.信息收集: 比如平常挖…

【Matlab】智能优化算法_非洲秃鹫优化算法AVOA

【Matlab】智能优化算法_非洲秃鹫优化算法AVOA 1.背景介绍2.数学模型3.文件结构4.算法流程图5.伪代码6.详细代码及注释6.1 AVOA.m6.2 boundaryCheck.m6.3 exploitation.m6.4 exploration.m6.5 initialization.m6.6 levyFlight.m6.7 main.m6.8 ObjectiveFunction.m6.9 random_se…

前端处理后端返回的文件流,进行文件下载

二进制流格式 Blob格式 前言: 需求:根据后端接口返回的文件流进行数据处理,并实现文件的下载,且下载文件为word文档. 代码实现: //下载文件 async function DownLoadFile(row) {let res await DownLoadFileAPI(row.…

目标检测学习

目录 1、目标定位 2、特征点检测 3、目标检测 4、滑动窗口的卷积实现 5、Bounding Box 预测(Bounding box predictions) 6、交并化 7、非极大值抑制 8、Anchor Boxes 9、YOLO算法 1、目标定位 2、特征点检测 如何检测特征点(以人的部…

【UE4 C++】根据指定路径生成静态网格体

在上一篇博客中(【UE C】蓝图调用C函数),我们用C创建了一个蓝图函数库,本篇文章在这个蓝图函数库基础上增加一个方法,该方法只需输入一个文件目录路径,就可在场景中生成该目录下得所有静态网格体。&#xf…

ChatGPT对高校人才培养模式的挑战与应对策略思考

酷吗?输入指令后直接就能生成一大串代码,即使不懂相关技术也能玩转编程,这就是ChatGPT赋予你的“新能力”,除了写代码,ChatGPT还能帮你执行各种五花八门的任务。 AI工具如ChatGPT在行业中的广泛应用对于行业的人才结…

解密Sketch文件打开秘籍:简单两步操作!

虽然Figma,sketch,xd都很好用,但是设计师在设计工作流中经常会遇到无法在这三者软件中自由导入导出的情况。但是只要我们转变一下思路,因为这三种软件都支持导入sketch格式,所以我们只要将文件格式转成sketch,就能自由的在不同软件…

【华为鸿蒙3.0/荣耀安卓12使用VMOS Pro的激活方式】

关于华为鸿蒙3.0/荣耀安卓12如何解除进程限制,这里提供以下教程供小伙伴们参考。 需要准备:电脑一台,数据线一根。 第一步:打开手机USB调试模式。 确保USB数据线已连接手机和电脑,打开手机“开发者选项”&#xff0…

【Distributed】zookeeper+kafka的应用及部署

文章目录 一、zookeeper1. zookeeper的概述1.1 Zookeeper 定义1.2 Zookeeper 工作机制1.3 Zookeeper 特点1.4 Zookeeper 数据结构1.5 Zookeeper 应用场景1.6 Zookeeper 选举机制第一次启动选举机制非第一次启动选举机制选举Leader规则 2. 部署 Zookeeper 集群2.1 安装前准备2.2…

HarmonyOS学习路之开发篇—流转(多端协同 一)

多端协同开发 场景介绍 开发者在应用FA中通过调用流转任务管理服务、分布式任务调度的接口,实现多端协同。 主要流程如下: 设备A上的应用FA向流转任务管理服务注册一个流转回调。 Alt1-系统推荐流转:系统感知周边有可用设备后,主…

onvif库封装及qt工程调用onvif库实现设备搜索、获取码流地址等功能

一、前言: 本篇的OnvifManager工程是在vs2010下进行开发编译,它实现了对onvif库的封装调用,目前工程接口实现了对onvif的搜索、码流地址获取、设备重启接口,其他接口后续可以通过更改工程代码进行添加。qt工程myonvif是对OnvifMan…

uniapp uni实人认证

uni实人认证依赖 目前仅支持App平台。 h5端活体人脸检测,使用的是百度云的h5人脸实名认证 使用要求 1、app端 在使用前,请确保您已注册DCloud账号,并已完成实名认证。 然后需要按文档开通服务 业务开通 | uni-app官网 2、h5端 在使用前…