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

news2024/9/22 19:44:15

文章目录

  • 实施步骤
    • 一、修改配置文件地址
      • 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.coloradmin.cn/o/732794.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【软件架构设计】支持大规模系统的设计模式和原则

今天,即使是小型初创公司也可能不得不处理数 TB 的数据或构建支持每分钟(甚至一秒钟!)数十万个事件的服务。所谓“规模”,通常是指系统应在短时间内处理的大量请求/数据/事件。 尝试以幼稚的方式实现需要处理大规模的服…

Linux(Ubuntu)+Qt+C++与OpenCV窗体程序使用

程序示例精选 Linux(Ubuntu)QtC与OpenCV窗体程序使用 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<Linux(Ubuntu)QtC与OpenCV窗体程序使用>>编写代码&#xff0c;代码整洁&am…

ChatGPT实战:短视频文案、脚本创作

你还在拼脑力输出视频脚本吗&#xff1f;AI时代&#xff0c;该提高提高生产力了&#xff0c;机器一天的视频出货量能赶上以往几个月的工作量&#xff0c;人力怎么可能卷的过机器&#xff1f; 使用ChatGPT创作视频脚本可以带来一些好处&#xff1a; 创意激发&#xff1a;ChatGPT…

ChatGPT爆火 但生成式AI并非全新产物

以ChatGPT、Midjourney 为代表的 AIGC 产品横空出世&#xff0c;在全球掀起新一轮的 AI 技术变革新浪潮。近二十年来&#xff0c;我们见证了从「机器学习」算法到「深度学习」&#xff0c;再到「基础模型」的发展。随着数据量大规模膨胀&#xff0c;可扩展的算力&#xff0c;再…

Android Glide预加载RecyclerViewPreloader,ViewPreloadSizeProvider,kotlin

Android Glide预加载RecyclerViewPreloader,ViewPreloadSizeProvider&#xff0c;kotlin implementation com.github.bumptech.glide:glide:4.15.1implementation ("com.github.bumptech.glide:recyclerview-integration:4.14.2") {// Excludes the support library …

Kafka的保姆级简易安装启动、关闭注意事项、简单使用

一.安装&#xff1a; 1.1Windows本机tar包安装 1.下载tar包 地址&#xff1a;Apache Download Mirrors&#xff0c;点击下面的连接先将tar包下载下来 2.解压到任意地址但自己要记得位置 3.进入到config文件找到server.properties更改信息 搜索&#xff0c;然后找到下面的地…

基于Spring Boot的广告公司业务管理平台设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的广告公司业务管理平台设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 后端&#xff1a;Java springboot框架 …

开放式耳机推荐:开放式耳机是什么意思?开放式耳机的优缺点?开放式哪个品牌更好?韶音、南卡、cleer、索尼、飞利浦等开放式蓝牙耳机大盘点!

前言 要说目前可以让运动、工作变得更加轻松的单品&#xff0c;开放式蓝牙耳机绝对要占一席之地。开放式蓝牙耳机近年来的销量不断攀升&#xff0c;已经超越普通蓝牙耳机成为数码类销量抢手的产品&#xff0c;并且升级迭代速度很快&#xff0c;功能越来越完善&#xff0c;相比…

unity3d 入门1

新建一个3D core项目&#xff1b; 自动新建一个示例场景&#xff0c;仅包含2个对象&#xff0c;一个主摄像机&#xff0c;一个方向光&#xff1b;在Hierarchy层次视图中看到如下&#xff1b;场景使用一个小立方体来表示&#xff0c;下面的对象也使用一个小立方体 表示&#xf…

【通览一百个大模型】UL2(Google)

【通览一百个大模型】UL2&#xff08;Google&#xff09; 作者&#xff1a;王嘉宁&#xff0c;本文章内容为转载或整理&#xff0c;仓库链接&#xff1a;https://github.com/wjn1996/LLMs-NLP-Algo 订阅专栏【大模型&NLP&算法】可获得博主多年积累的全部NLP、大模型和算…

SLAM在ARM上的加速(3)- Neon在SLAM中的应用

SLAM在ARM上的加速&#xff1a; SLAM在ARM上的加速&#xff08;1&#xff09;- ARM加速基础 SLAM在ARM上的加速&#xff08;2&#xff09;- Neon SLAM在ARM上的加速&#xff08;3&#xff09;- Neon在SLAM中的应用 视觉SLAM通常可以分为前端和后端两个部分&#xff1a; (1)…

【深度学习】受限玻尔兹曼机 (RBM) 初学者指南

一、说明 受限玻尔兹曼机&#xff08;Restricted Boltzmann Machine&#xff0c;RBM&#xff09;是一种基于能量模型的人工神经网络。它只有一个隐层&#xff0c;将输入层和隐层中的每个神经元互相连接&#xff0c;但不同层的神经元之间没有连接。RBM是一种无向的概率图模型&am…

09_Linux内核定时器

目录 Linux时间管理和内核定时器简介 内核定时器简介 Linux内核短延时函数 定时器驱动程序编写 编写测试APP 运行测试 Linux时间管理和内核定时器简介 学习过UCOS或FreeRTOS的同学应该知道, UCOS或FreeRTOS是需要一个硬件定时器提供系统时钟,一般使用Systick作为系统时钟…

Vue生态及实践 - 优化实践

目录 目标 keep alive util/vue.js【vue里面常用的函数】 src/components/UKeepAlive.vue 无限加载列表优化的实现方案 src/util/throttle.js src/components/UInfiniteList.vue src/module/topic/views/UTopic.vue 献上一张ai生成图~ 目标 Keep Alive实践长列表优化…

基于pytorch的神经网络与对比学习CL的训练示例实战和代码解析

目录 对比学习原理解析构建一个对比学习模型&#xff08;代码详解&#xff09;导入库构建简单的神经网络构建对比学习的损失函数开始训练 完整代码 对比学习原理解析 对比学习&#xff08;Contrastive Learning&#xff09;是一种无监督学习方法&#xff0c;用于从未标记的数据…

3 STM32标准库函数 之 窗口看门狗(WWDG)所有函数的介绍及使用

3 STM32标准库函数 之 窗口看门狗&#xff08;WWDG&#xff09;所有函数的介绍及使用 1. 图片有格式2 文字无格式三 库函数之窗口看门狗&#xff08;WWDG&#xff09;所有函数的介绍及使用前言一、IWDG库函数固件库函数预览1.1 函 数 IWDG_WriteAccessCmd1.1.1 IWDG_WriteAcces…

string模拟实现

文章目录 1.回顾库函数strcpymemcpystrcmpstrstr 2.回顾类和对象哪些函数里会有this指针&#xff1f;this指针调用方法结论&#xff1a;只要是不修改this指针指向的对象内容的成员函数&#xff0c;都可以加上const自己写了构造函数&#xff0c;编译器不会自动生成默认构造2.1构…

代码随想录第21天 | 回溯理论基础 77. 组合

回溯理论基础 回溯法解决的问题都可以抽象为树形结构&#xff0c;是的&#xff0c;我指的是所有回溯法的问题都可以抽象为树形结构&#xff01; 因为回溯法解决的都是在集合中递归查找子集&#xff0c;集合的大小就构成了树的宽度&#xff0c;递归的深度&#xff0c;都构成的…

MySQL面试题总结(部分)

一.介绍MySQL为什么在面试中会提及 1.为什么要在面试时MySQL会被提及&#xff1f; 在面试中问MySQL问题有几个主要原因&#xff1a; 1. 数据库管理系统的重要性&#xff1a;MySQL作为一种常用的关系型数据库管理系统(RDBMS)&#xff0c;在互联网和企业应用中得到广泛使用。对数…

Conda安装及使用方法(常用命令)

系列文章目录 文章目录 系列文章目录前言一、Conda下载安装1.下载2.安装3.配置国内源 二、Conda安装Python环境1.创建虚拟环境2.激活虚拟环境3.虚拟环境安装Python库 三、Conda环境环境执行脚本四、PyCharm配置Conda环境五、Conda迁移环境1.方式一&#xff1a;拷贝环境2.方式二…