Spring Boot+Vue前后端分离项目如何部署到服务器

news2025/1/10 22:30:24

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • Spring Boot+Vue前后端分离项目如何部署到服务器
    • 环境准备
      • 通用准备:
      • 数据库准备
      • Spring Boot部署环境:
      • Vue.js部署环境:
      • 可选环境:
    • 运行sql文件创建数据库
    • Spring Boot项目部署到服务器
    • Vue项目部署到服务器
      • 综合步骤
    • 🎉 往期精彩回顾

Spring Boot+Vue前后端分离项目如何部署到服务器

部署Spring Boot+Vue前后端分离项目到服务器涉及以下步骤:首先,将Spring Boot后端应用打包成jar或war文件并上传至服务器,通过运行java -jar命令启动后端服务。接着,构建Vue前端项目生成静态文件,同样上传至服务器的Web服务器目录,如Nginx的html目录。最后,配置Nginx作为反向代理,将前端请求代理至Vue应用目录,同时确保后端API的路径正确映射。这样,前后端分离的项目就成功部署在服务器上。
部署Spring Boot和Vue项目到服务器之前,需要确保服务器具备以下环境和工具:

环境准备

通用准备:

  1. 服务器

    • 一台具有稳定网络连接的服务器,可以是云服务器或本地服务器。
    • 服务器操作系统,常见的有Linux发行版(如Ubuntu、CentOS)或Windows Server。
  2. SSH访问(对于Linux服务器):

    • SSH客户端,如xshell。
      在这里插入图片描述
  3. 文件传输工具

    • FTP客户端,如xftp。
    • 或者SCP工具,如WinSCP(Windows)或终端(macOS、Linux)。
      在这里插入图片描述

数据库准备

  1. MySQL环境
    • 安装MySQL5.7MySQL8.0
    • 可以通过运行sudo systemctl status mysqld来检查MySQL是否正在运行(MySQL需要配置远程访问)。
  1. CentOS上安装MySQL 5.7和MySQL 8.0教程
  • 837阅读 · 21点赞 · 13收藏

在这里插入图片描述

  1. MySQL远程访问工具
    • 用于构建远程访问MySQL工具,如Navicat
      在这里插入图片描述

Spring Boot部署环境:

  1. Java环境

    • 安装Java Development Kit (JDK),至少需要1.8版本。
    • 可以通过运行java -versionjavac -version来检查Java是否已安装。
    1. CentOS上安装JDK的详细教程
    • 739阅读 · 12点赞 · 13收藏

在这里插入图片描述

  1. Maven或Gradle(如果需要本地构建):
    • 用于构建Spring Boot项目的构建工具。
    • 可以通过运行mvn -versiongradle -v来检查是否已安装。

Vue.js部署环境:

  1. Node.js和npm

    • 安装Node.js,它附带npm包管理器。
    • 可以通过运行node -vnpm -v来检查是否已安装。
  2. Web服务器

    • Nginx或Apache用于提供静态文件服务。
    • 对于Nginx,可以通过运行nginx -v来检查是否已安装。
    • 对于Apache,可以通过运行apache2 -vhttpd -v来检查是否已安装。
  1. CentOS上安装与配置Nginx
  • 683阅读 · 9点赞 · 6收藏
  1. 手把手教你CentOS下载Nginx配置使用
  • 464阅读 · 2点赞 · 3收藏

在这里插入图片描述

可选环境:

  1. 数据库

    • 如果Spring Boot应用需要数据库,需要安装相应的数据库服务器,如MySQL、PostgreSQL等。
    • 确保数据库服务已启动,并且应用有正确的数据库连接配置。
  2. 反向代理/负载均衡

    • 如果有多个应用实例或需要SSL终端,可能需要配置Nginx或HAProxy作为反向代理或负载均衡器。
  3. 容器化工具(如Docker):

    • 如果使用Docker,需要在服务器上安装Docker和Docker Compose。
  4. 自动化部署工具(如Jenkins、GitLab CI/CD):

    • 如果需要自动化部署流程,可能需要安装和配置CI/CD工具。

确保在部署之前,服务器上的环境和工具都已经正确安装和配置,这样可以避免在部署过程中遇到不必要的问题。

运行sql文件创建数据库

  1. 远程连接服务器上的数据库:使用Navicat连接数据库。

  2. 运行项目相关的SQL文件:运行SQL

Spring Boot项目部署到服务器

  1. 打包应用
    使用Maven或Gradle将Spring Boot项目打包成可执行的jar或war文件。如果使用Maven,可以在pom.xml中添加spring-boot-maven-plugin插件,并运行mvn clean package命令来打包。
    在这里插入图片描述

  2. 上传到服务器
    使用FTP、SCP或其他文件传输方法将打包好的jar或war文件上传到服务器的适当目录中。

  3. 运行应用(如果是jar包):
    在服务器上,使用以下命令在后台运行jar文件:

    nohup java -jar yourapp.jar > output.log 2>&1 &
    

    这将把应用的输出重定向到output.log文件中,并在后台运行。

  4. 配置服务(可选):
    为了确保应用可以在系统启动时自动运行,并能在出现问题时自动重启,可以创建一个Systemd服务文件。

  5. 开放端口
    确保服务器的防火墙设置允许外部访问Spring Boot应用的端口。

Vue项目部署到服务器

  1. 构建项目
    在本地环境中运行npm run build命令,这将会在Vue项目的dist/目录下生成构建后的文件。
    在这里插入图片描述

  2. 上传文件
    dist/目录下的所有文件上传到服务器的Web服务器目录中,例如Nginx或Apache的htmlpublic目录。
    在这里插入图片描述

  3. 配置Web服务器
    配置Web服务器以提供静态文件服务。如果是Nginx,你需要编辑nginx.conf或相应的配置文件,设置正确的根目录,并可能需要配置SSL(如果你使用的是HTTPS)。

  4. 重启Web服务器
    为了使配置生效,重启Web服务器。
    先查询nginx服务运行的进程:ps -ef|grep nginx
    杀死所查询到的nginx服务:kill -9 [ 查到的进程]
    重启服务:cd /nginx安装的sbin目录
    ./nginx

  5. 访问应用
    在Web浏览器中输入服务器的IP地址或域名,你应该能够看到你的Vue应用。

综合步骤

对于同时包含前端Vue项目和后端Spring Boot项目的全栈应用,通常的做法是:

  • 将Spring Boot应用打包并部署到服务器,作为后端API服务。
  • 将Vue应用构建并上传到同一服务器的Web服务器目录中,或者配置反向代理(如Nginx)将前端请求代理到Vue应用的服务器。

确保在部署过程中,Vue应用的publicPathbase配置正确指向后端API的URL,以确保前后端能够正确地通信。

以上步骤是部署Spring Boot和Vue项目到服务器的基本流程。具体的命令和配置可能会根据你的项目和服务器环境有所不同。

如果对你有帮助,点赞、收藏、关注是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

  1. 前端开发的发展史:框架与技术栈的演变
  • 706阅读 · 11点赞 · 8收藏
  1. 打字通小游戏制作教程:用HTML5和JavaScript提升打字速度
  • 588阅读 · 24点赞 · 18收藏
  1. 扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏
  • 776阅读 · 15点赞 · 20收藏
  1. 拼图小游戏制作教程:用HTML5和JavaScript打造经典游戏
  • 487阅读 · 9点赞 · 12收藏
  1. Mock.js 基本语法与应用笔记
  • 280阅读 · 5点赞 · 9收藏
  1. 排序算法全景:从基础到高级的Java实现
  • 679阅读 · 25点赞 · 9收藏
  1. CentOS系统上安装Redis操作教程
  • 410阅读 · 4点赞 · 4收藏
  1. 打造你的HTML5打地鼠游戏:零基础入门教程
  • 1131阅读 · 28点赞 · 30收藏
  1. 打造你的贪吃蛇游戏:HTML、CSS与JavaScript的完美结合
  • 1078阅读 · 26点赞 · 12收藏
  1. 快速上手:使用Hexo搭建并自定义个人博客
  • 669阅读 · 19点赞 · 20收藏
  1. 在Vue中处理接口返回的二进制图片数据
  • 704阅读 · 21点赞 · 18收藏
  1. 打造经典游戏:HTML5与CSS3实现俄罗斯方块
  • 1117阅读 · 31点赞 · 23收藏
  1. Spring Boot中Excel数据导入导出的高效实现
  • 1066阅读 · 23点赞 · 22收藏
  1. Spring Boot中实现图片上传功能的两种策略
  • 1297阅读 · 24点赞 · 13收藏
  1. CentOS上安装MySQL 5.7和MySQL 8.0教程
  • 837阅读 · 21点赞 · 13收藏
  1. Spring Boot工程集成验证码生成与验证功能教程
  • 1417阅读 · 39点赞 · 17收藏
  1. Spring Boot 3项目集成Swagger3教程
  • 809阅读 · 15点赞 · 8收藏
  1. CentOS上安装JDK的详细教程
  • 739阅读 · 12点赞 · 13收藏
  1. 解决前端项目中Node.js版本不一致导致的依赖安装错误
  • 876阅读 · 17点赞 · 16收藏
  1. 入门指南:使用uni-app构建跨平台应用
  • 1315阅读 · 29点赞 · 9收藏
  1. Vue项目中使用Mock.js进行API模拟
  • 655阅读 · 17点赞 · 7收藏
  1. Vue组件间通信实践
  • 866阅读 · 24点赞 · 18收藏
  1. CentOS上安装与配置Nginx
  • 683阅读 · 9点赞 · 6收藏
  1. Vue跳转页面传递参数
  • 268阅读 · 5点赞 · 4收藏
  1. vue项目如何下载使用gsap动画库
  • 551阅读 · 1点赞 · 0收藏
  1. VS Code上搭建React开发环境
  • 2286阅读 · 2点赞 · 10收藏
  1. vue命令式组件封装以及使用
  • 819阅读 · 2点赞 · 3收藏
  1. springboot项目常用配置
  • 379阅读 · 1点赞 · 0收藏
  1. 如何在Vue中使用百度地图API来创建地图应用程序。
  • 345阅读 · 3点赞 · 1收藏
  1. 手把手教你CentOS下载Nginx配置使用
  • 464阅读 · 2点赞 · 3收藏
  1. vue3 setup语法糖的三种书写方法
  • 2824阅读 · 5点赞 · 14收藏
  1. vue3中vuex 的使用基本使用和二次封装
  • 447阅读 · 3点赞 · 1收藏
  1. MySQL基础全套全网最详细讲解
  • 770阅读 · 3点赞 · 6收藏
  1. 前端开发之响应式布局,响应式 HTML, CSS and JavaScript 框架介绍;
  • 703阅读 · 3点赞 · 2收藏
  1. VS code搭建C/C++运行环境简单易上手
  • 2786阅读 · 5点赞 · 8收藏
  1. Vue.2&Vue.3项目引入Element-UI教程&踩坑
  • 9268阅读 · 22点赞 · 82收藏
  1. Vue项目引入Echarts可视化图表库教程&踩坑
  • 2203阅读 · 3点赞 · 5收藏
  1. VirtualBox虚拟机搭建CentOS系统教程
  • 4493阅读 · 4点赞 · 32收藏
  1. VS Code上搭建Vue开发环境
  • 10662阅读 · 13点赞 · 64收藏
  1. Color-UI 简介及使用教程
  • 5921阅读 · 2点赞 · 13收藏

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

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

相关文章

搜索引擎SEO策略介绍

baidu搜索:如何联系八爪鱼SEO baidu搜索:如何联系八爪鱼SEO baidu搜索:如何联系八爪鱼SEO 第一、 关键词的选择策略: 1、门户类的网站关键词选择策略: 网站每个页面本身基本都包含有关键词:网站拥有上百…

STM32-PWR电源控制

PWR(Power Control)电源控制 管理STM32内部的电源供电部分,可以实现可编程电压检测器和低功耗模式的功能。 电源管理器 上电复位(POR)和掉电复位(PDR) STM32内部有一个完整的上电复位(POR)和掉电复位(PDR)电路&…

免费搭建导航网站教程带免费空间域名源码

使用免费空间和免费域名免费搭建一个导航网站 手把手视频教程 https://pan.xunlei.com/s/VNsoMehs7RCjz3IClV6h2vNMA1?pwdq596#

【阿里云系列】-部署ACK集群的POD应用日志如何集成到日志服务(SLS)中

介绍 我们在实际部署应用到阿里云的ACK集群后,由于后期应用服务的持续维护诉求可能需要跟踪排查问题,此时就要具备将应用的历史日志存档便于后期排查问题 处理方式 为了解决以上的普遍需求,需要将ACK中的应用日志采集到SLS的Logstore中,然…

照片怎么调到100kb以下?图片压缩可以这样做

在需要通过网络传输或共享图片的场景中,限制文件大小对于提高传输速度和节省带宽非常重要,将图片压缩到100k的文件大小可以确保更快地上传、下载和共享图片,适用于电子邮件、社交媒体、在线相册等网络传输场景,那么如何快速的将图…

云原生之容器编排实践-ruoyi-cloud项目部署到K8S:Nginx1.25.3

背景 前面搭建好了 Kubernetes 集群与私有镜像仓库,终于要进入服务编排的实践环节了。本系列拿 ruoyi-cloud 项目进行练手,按照 MySQL , Nacos , Redis , Nginx , Gateway , Auth ,…

C++开发基础——IO操作与文件流

一,基础概念 C的IO操作是基于字节流,并且IO操作与设备无关,同一种IO操作可以在不同类型的设备上使用。 C的流是指流入/流出程序的字节序列,在输入操作中数据从外部设备(键盘,文件,网络等)流入程序&#x…

Qt 使用RAW INPUT获取HID触摸屏,笔设备,鼠标的原始数据,最低受支持的客户端:Windows XP [仅限桌面应用]

在开发绘图应用程序时,经常会需要读取笔设备的数据,通过对笔数据的解析,来判断笔的坐标,粗细。如果仅仅只是读取鼠标的坐标,就需要人为在应用程序端去修改笔的粗细,并且使用体验不好,如果可以实…

SQL笔记——数据库系统导论(数据库的设计)

目录 数据依赖范式第一范式1NF第二范式2NF第三范式3NFBC范式 数据依赖的公理系统闭包最小依赖集候选码 设计需求分析概念结构设计E-R图的概念模型E-R模型转换为关系模型(指出转换结果中每个关系模式的主码和外码) 逻辑结构设计物理结构设计数据库实施数据库运行和维护 数据依赖…

安装配置MySQL

安装配置MySQL主要包括以下步骤: 1、检查并卸载旧版本的MySQL 2、如果不使用Mariadb,则也需要卸载 3、离线安装MySQL MySQL数据库安装在node3节点上,其他节点通过远程访问的方式使用MySQL数据库。 在node3检查并卸载老版本的MySQL 使用…

ARMv8架构特殊寄存器介绍-1

1,ELR寄存器(Exception Link Register ) The Exception Link Register holds the exception return address。 异常链接寄存器保存异常返回地址。最常用也很重要。 2,SPSR(Saved Process Status Register)…

Linux环境下,QtCreator运行不起来

文章目录 一、qtcreator运行不起来二、错误信息三、下载libxcb-cursor四、安装 一、qtcreator运行不起来 直接点击qtcreator运行不起来 然后再命令行界面下, 进入到qtcreator所在的目录: cd /opt/Qt/Tools/QtCreator/bin 运行程序:./qtcr…

考研C语言复习进阶(1)

目录 1. 数据类型介绍 1.1 类型的基本归类: 2. 整形在内存中的存储 2.1 原码、反码、补码 2.2 大小端介绍 3. 浮点型在内存中的存储 ​编辑 1. 数据类型介绍 前面我们已经学习了基本的内置类型: char //字符数据类型 short //短整型 int /…

使用 Jenkins 和 Spinnaker 构建 Kubernetes CI/CD

无论您是新手还是持续集成和持续交付以及容器化领域的经验丰富,本文都将为您提供设置 Spinnaker 以满足您的软件应用程序交付需求的基本知识。 了解 Jenkins、Spinnaker 和 Kubernetes Kubernetes 和 Jenkins 是两个强大的工具,它们相互配合&#xff0…

图扑数字孪生楼宇智控可视化平台

从概念提出到风险评估再到跟踪实施,关于智慧园区规划与建设的探讨从未停止。传统楼宇控制系统的各子系统独立存在并不互通,所有信息交互都依赖于中央控制器,导致系统控制的实时性较差。 利用大数据、云计算等智能化技术,让人、物…

《计算机网络》考研:2024/3/11:2.1.6-习题精选(5、6题暂未完成)

2024/3/11 2.1.6 习题精选 一、单项选择题 我的答案:1.D 2.A 3.C 4.B 5.A 标准答案:1.D 2.A 3.B 4.B 5.A 3、【解】: 并行传输的特点:距离短、速度快。 串行传输的特点:距离长、速度慢。 在计算机内部通常为了保证速…

介绍kubernetes的功能与架构及其组件

一、功能简介 1、服务发现和负载均衡 Kubernetes 可以使用 DNS 名称或自己的 IP 地址公开容器, 如果进入容器的流量很大, Kubernetes 可以负载均衡并分配网络流量, 从而使部署稳定. 常用的DNS插件为coreDNS, 用作服务发现和集群中容器通讯; 负载均衡器常使用集群内的service资…

CUDA环境配置在Ubuntu18

🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:高性能(HPC)开发基础教程 🎀CSDN主页 发狂的小花 🌄人生秘诀:学习的本质就是极致重复! 目录 1 NVIDIA CU…

王道机试C++第 5 章 数据结构三:栈Stack和22年蓝桥杯省赛选择题Day33

5.3 栈 和队列一样,栈( Stack )也是一种线性序列结构,其存放的元素也是按照线性逻辑次序排列的。然而,与一般的线性结构相比,栈的操作仅限于逻辑上特定的一端,即新元素只能从栈的一端插入也只能…

Docker部署ChatGLM3、One API、FastGPT

创建并运行chatglm3容器 docker run --name chatglm3 -p 8000:8000 registry.cn-hangzhou.aliyuncs.com/ryyan/chatglm.cpp:chatglm3-q5_1 创建并运行one-api容器 (其中挂载路径 D:\one-api 可以选择你自己喜欢的目录) docker run --name oneapi -d -p 3000:3000 -e TZAsia…