通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南(三更)

采取的部署方案

阿里云服务器->FinalShell->宝塔面板。
近期需要将自己的一个SpringBoot+Vue前后端分离项目,并且是分模块开发的项目部署到服务器上,记录一下踩坑的地方,结合C站大佬的解决方案,循循善诱一步步部署到服务器上,简单,快速!

一、实现思路

  1. 购买服务器,阿里云,腾讯云,华为云等,24周岁以下通过实名认证有优惠补贴,或者搜索试用,可以试用1个月。我这里采取的是阿里云服务器。
  2. 通过FinalShell工具,安装宝塔面板,安装成功后,会响应一个面板地址和用户名密码信息。
  3. 通过FinalShell响应的外网面板地址,登录宝塔面板。
  4. 在宝塔面板新建一个数据库,记住数据库名和账户密码。
  5. 将前端项目npm run biuld打包成dist文件。
  6. 将后端项目通过maven打jar包。(注意:后端项目在打包前,需要在对应的application文件中修改数据库信息,这里的数据库不是本地的localhost了,是刚刚在宝塔上创建的数据库信息
  7. 将前后端项目上传到宝塔面板。
  8. 进入终端,cd到你上传的jar包目录下,启动项目。

二、使用步骤

1.购买服务器

https://www.aliyun.com/
使用阿里云的时候,个人建议还是切换成旧版,操作更加简洁。
在这里插入图片描述选择阿里云服务器时在配置过程中,注意:操作系统选择较为完备成熟的centos7
在这里插入图片描述进入实例,重置你的密码
在这里插入图片描述

点击进入实例,配置安全组,就是放开你项目中所需要运行的端口
在这里插入图片描述
点击添加安全组,配置你所需放行的端口
在这里插入图片描述
在这里插入图片描述

2.FinalShell工具

Windows版下载地址:
http://www.hostbuf.com/downloads/finalshell_install.exe
安装完成后:
在这里插入图片描述在这里插入图片描述连接成功
在这里插入图片描述

3.拉取宝塔面板

宝塔地址:
https://www.bt.cn/new/index.html
复制Centos安装脚本:

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

在这里插入图片描述

在这里插入图片描述
这里注意
在这里插入图片描述在这里插入图片描述现在可以通过宝塔面板反馈的账号密码,登录到宝塔面板了。
在这里插入图片描述

4.配置宝塔面板&新建数据库

进入到宝塔面板会让你绑定宝塔的账号,就用手机号注册就行了。
然后会推荐安装插件,选左边系统推荐的,一键安装就行。
刚才在阿里云配置了安全组(放行端口),宝塔面板也同样需要放行端口。
在这里插入图片描述新建数据库:
在这里插入图片描述导入本地准备的sql文件。进行导入,导入成功后,点击管理,用你的数据库账号登录管理器可以查看你的数据库信息。
在这里插入图片描述宝塔的配置暂时到这里。

5.前端代码打包

打包前修改原来的启动端口:
sg-blog-vue:8093
sg-blog-admin:8094
在这里插入图片描述在这里插入图片描述sg-blog-vue:
把target的指向改为自己宝塔左上角的ip地址+后端端口号

在这里插入图片描述此时sg-blog-vue修改完备:
在控制台(当前目录)输入:npm run biuld命令进行打包。生成dist文件
在这里插入图片描述

sg-blog-admin:
同样将原来的localhost改为ip+后端端口号
注意:🕳
在这里插入图片描述然后配置一下router下的index.js文件,有路由缺失,不配置的话,打包部署后,只能展示左侧目录,不能对应功能。
index.js配置如下:

export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '首页', icon: 'dashboard' }}]},{path: '/write',component: Layout,children: [{path: '/',name: 'Write',component: () => import('@/views/content/article/write/index'),hidden: true}]},{path: '/system/user',component: Layout,children: [{path: '/',name: 'User',component: () => import('@/views/system/user'),hidden: true}]},{path: '/system/role',component: Layout,children: [{path: '/',name: 'role',component: () => import('@/views/system/role'),hidden: true}]},{path: '/system/menu',component: Layout,children: [{path: '/',name: 'menu',component: () => import('@/views/system/menu'),hidden: true}]},{path: '/system/role',component: Layout,children: [{path: '/',name: 'role',component: () => import('@/views/system/role'),hidden: true}]},{path: '/content/article',component: Layout,children: [{path: '/',name: 'article',component: () => import('@/views/content/article/index'),hidden: true}]},{path: '/content/category',component: Layout,children: [{path: '/',name: 'category',component: () => import('@/views/content/category/index'),hidden: true}]},{path: '/content/link',component: Layout,children: [{path: '/',name: 'link',component: () => import('@/views/content/link/index'),hidden: true}]},{path: '/content/tag',component: Layout,children: [{path: '/',name: 'tag',component: () => import('@/views/content/tag/index'),hidden: true}]}
]

这里退出登录的路由会跳转到index,
但是服务器找不到index,这里直接设置’/'跳转首页去
在这里插入图片描述由于生产环境和blog不同,现在sg-vue-admin模块项目使用下面命令打包:

npm run build:prod

如果出现打包错误:
在这里插入图片描述

注释掉以下内容:

在这里插入图片描述至此前端文件打包完毕;

6.后端代码打jar包

这里如果代码打包出现问题,可以去我主页看看我总结的解决方案:
https://blog.csdn.net/weixin_51285339/article/details/128785245?spm=1001.2014.3001.5501
我的项目结构:
在这里插入图片描述framework父文件加入打包插件依赖:

<build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.10.1</version></plugin><!-- 此插件必须放在父 POM 中  --><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-assembly-plugin</artifactId><version>3.3.0</version><executions><!--执行本插件的方法为,在主目录下执行如下命令:mvn package assembly:single对于 IntelliJ IDEA,生成的 JAR 包位于每个模块下的文件夹 target--><execution><id>make-assembly</id><phase>package</phase><goals><!-- 此处 IntelliJ IDEA 可能会报红,这是正常现象  --><goal>single</goal></goals></execution></executions><configuration><archive><manifest><!-- 配置程序运行入口所在的类 --><!-- 自己的启动类path--><mainClass>com.mest.BlogAdminApplication</mainClass></manifest><manifest><!-- 配置程序运行入口所在的类 --><mainClass>com.mest.MestBlogApplication</mainClass></manifest></archive><!-- 设置 JAR 包输出目录 --><outputDirectory>${project.build.directory}/#maven-assembly-plugin</outputDirectory><!-- 设置打包后的 JAR 包的目录结构为默认 --><descriptorRefs><descriptorRef>jar-with-dependencies</descriptorRef></descriptorRefs></configuration></plugin></plugins></build>

admin和blog子模块添加biuld:

    <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.6.2</version><executions><execution><goals><goal>repackage</goal></goals></execution></executions></plugin></plugins><finalName>${project.artifactId}</finalName></build>

刷新maven后,将前端sg-blog-vue和sg-blog-admin生成的dist文件,新建一个static包,然后复制到src\main\resources\static目录下,将前后端项目整合打包,实现一个伪前后端分离,便于宝塔直接部署。
在这里插入图片描述
在打包之前,配置一下两个模块中application的数据库文件,换成自己的ip地址,并且这里的username和password要和宝塔上创建的数据库一致,不然连接不了数据库。

**在这里插入图片描述**

然后进行打包

在这里插入图片描述

7.上传jar包到宝塔

在指定的目录下创建两个文件夹,用来存放刚才的两个jar包
在这里插入图片描述
上传目标jar包

在这里插入图片描述打开终端,cd到存放jar包的目录,执行命令:

nohup java -jar xxx.jar  > ./demo.log 2>&1 &

在这里插入图片描述
如果启动发现端口被占用了,
输入netstat -lnp命令查看端口信息,
使用sudo kill xxx进行删除

在这里插入图片描述此时通过ip+端口访问你的项目就成功了:

前台:
jiu

后台:

在这里插入图片描述

并且宝塔退出后网站也不会挂掉。

总结

部署结束,感谢B站三更和C站的博主为我的项目提供了莫大的帮助,部署过程中出现困难或者文章有纰漏欢迎留言讨论。

参考文章👍:
https://blog.csdn.net/qq_52030824/article/details/127982206
https://blog.csdn.net/weixin_43352606/article/details/124134029

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

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

相关文章

AI助力农作物自动采摘,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建作番茄采摘场景下番茄成熟度检测识别计数分析系统

去年十一那会无意间刷到一个视频展示的就是德国机械收割机非常高效自动化地24小时不间断地在超广阔的土地上采摘各种作物&#xff0c;专家设计出来了很多用于采摘不同农作物的大型机械&#xff0c;看着非常震撼&#xff0c;但是我们国内农业的发展还是相对比较滞后的&#xff0…

[经验] 喉咙沙哑的原因及应对方法是什么 #学习方法#其他#媒体

喉咙沙哑的原因及应对方法是什么 生活中&#xff0c;喉咙不舒服是很常见的情况&#xff0c;尤其是喉咙沙哑&#xff0c;让人感到特别难受&#xff0c;影响睡眠和生活质量。那么喉咙沙哑怎么办呢&#xff1f;接下来我会分享一些简单易行的方法&#xff0c;帮助你缓解这种不适感…

Python 错误及其解决方法

Python 是一种易于学习的编程语言&#xff0c;但初学者在学习和使用 Python 的过程中难免会遇到一些错误。以下是一些常见的 Python 错误及其解决方法&#xff1a; 1. 语法错误&#xff08;SyntaxError&#xff09;&#xff1a; python # 错误示例 print("Hello, World!…

uniapp 上传多张图片到django后端

uniapp 上传多张图片到django后端 要在UniApp中上传多张图片到Django后端&#xff0c;你可以按照以下步骤进行操作&#xff1a; 在UniApp中&#xff0c;使用uni.chooseImage()方法选择多张图片&#xff0c;并将其保存在一个数组中。例如&#xff1a; uni.chooseImage({count…

Java异常处理 throw和throws

目录 throwthrows实例制造异常 在Java中&#xff0c;throw和throws关键字都与异常处理有关&#xff0c;但它们的使用方式和目的有所不同。 throw throw关键字&#xff1a; * throw用于在代码中显式地抛出一个异常。你可以使用它来触发一个异常&#xff0c;并指定异常的类型。…

python从入门到精通(十六):python爬虫的BeautifulSoup4

python爬虫的BeautifulSoup4 BeautifulSoup4导入模块解析文件创建对象python解析器beautifulsoup对象的种类Tag获取整个标签获取标签里的属性和属性值Navigablestring 获取标签里的内容BeautifulSoup获取整个文档Comment输出的内容不包含注释符号BeautifulSoup文档遍历Beautifu…

C#系列-C#访问hadoop API(9)

在C#中访问Hadoop通常涉及到与Hadoop分布式文件系统&#xff08;HDFS&#xff09;进行交互&#xff0c;以及可能执行MapReduce作业或其他Hadoop生态系统组件&#xff08;如HBase或Hive&#xff09;。虽然Hadoop原生是用Java编写的&#xff0c;但是可以通过一些库在C#中与Hadoop…

cf921(Div2)C题

寻找一段长为m的序列当中不存在的子序列 Problem - C - Codeforces void solve() {int n, k, m;std::cin >> n >> k >> m;std::string s;std::cin >> s;std::string t;int j 0;bool ok true;//长为nfor (int i 0; i < n; i) {//计数int cnt …

深入探索Redis:如何有效遍历海量数据集

深入探索Redis&#xff1a;如何有效遍历海量数据集 Redis作为一个高性能的键值存储数据库&#xff0c;广泛应用于各种场景&#xff0c;包括缓存、消息队列、排行榜等。随着数据量的增长&#xff0c;如何高效地遍历Redis中的海量数据成为了一个值得探讨的问题。在本篇博客中&am…

【机器学习300问】23、什么是主动学习?

一、带标签的数据很难获得 机器学习中&#xff0c;比如监督学习需要带有标签的训练样本才能得到模型&#xff0c;然而在以下几种场景中去获取带有标签的数据是很难的&#xff1a; 自动驾驶场景&#xff1a;对自动驾驶汽车收集的高清地图数据或实时摄像头数据进行标注&#xff…

机器学习复习(8)——逻辑回归

目录 逻辑函数&#xff08;Logistic Function&#xff09; 逻辑回归模型的假设函数 从逻辑回归模型转换到最大似然函数过程 最大似然函数方法 梯度下降 逻辑函数&#xff08;Logistic Function&#xff09; 首先&#xff0c;逻辑函数&#xff0c;也称为Sigmoid函数&#…

2.9 Binance_interface APP 现货交易-限单价平仓

Binance_interface APP 现货交易-限单价平仓 Github地址PyTed量化交易研究院 量化交易研究群(VX) py_ted目录 Binance_interface APP 现货交易-限单价平仓1. APP 现货交易-限单价平仓函数总览2. 模型实例化3. 同步 非堵塞 固定价格平仓&#xff08;卖出&#xff09;4. 同步 …

Cubase学习:音频转midi

大家好!我是诗书画唱!今天要分享的小技巧就是Cubase中的音频转midi的功能!希望对你有所帮助!以后我会在这个账号分享自己知道的很多小技巧!关注我!不迷路!大家也可以关注我后,在我的空间搜索关键词,找到各种对应的教程进行学习,非常的方便!而且自己的教程会尽可能纠…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Web组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Web组件 提供具有网页显示能力的Web组件&#xff0c;ohos.web.webview提供web控制能…

开发者福利,微软Xamarin不再收费

Build2016大会已经进行到第二天的主题演讲&#xff0c;微软在大会上宣布Xamarin对全部Visual Studio用户免费开放&#xff0c;而所有Visual Studio版本都会捆绑Xamarin这个跨平台开发工具。Xamarin免费是开发者的福利&#xff0c;因为原本Visual Studio就有免费的“社区版”&am…

爬虫练习——动态网页的爬取(股票和百度翻译)

动态网页也是字面意思&#xff1a;实时更新的那种 还有就是你在股票这个网站上&#xff0c;翻页。他的地址是不变的 是动态的加载&#xff0c;真正我不太清楚&#xff0c;只知道他是不变的。如果用静态网页的方法就不可行了。 静态网页的翻页&#xff0c;是网址是有规律的。 …

【国产MCU】-CH32V307-触摸按键检测(TKEY)

触摸按键检测(TKEY) 文章目录 触摸按键检测(TKEY)1、TKEY介绍2、TKEY使用实例触摸检测控制(TKEY)单元,借助ADC 模块的电压转换功能,通过将电容量转换为电压量进行采样,实现触摸按键检测功能。检测通道复用ADC 的16 个外部通道,通过ADC 模块的单次转换模式实现触摸按键…

人工智能时代的遥感技术

时相遥感影像变化检测是指对同一地理区域、不同时间获取的遥感影像进行自动变化发现、识别与 解释的遥感处理与分析技术。随着卫星遥感技术及人工智能理论方法的快速发展&#xff0c;基于多时相遥感影像数据驱 动和模型驱动的传统变化检测方法正朝着数据一模型一知识联合驱动的…

设计模式第五天|代理模式 7-小明买房子 装饰模式 8-咖啡加糖

目录 【设计模式专题之代理模式】7-小明买房子【设计模式专题装饰模式】8-咖啡加糖 【设计模式专题之代理模式】7-小明买房子 文章链接&#xff1a;卡码网设计模式 题目链接&#xff1a;7-小明买房子 这里注意在HomeAgent类里需要定义对象成员变量HomeBuyer&#xff0c;这里在实…

【MySQL】-12 MySQL索引(上篇MySQL索引类型前置-2-高性能的索引策略)

MySQL索引-高性能的索引策略 3 高性能的索引策略3.1 独立的列3.2 前缀索引和索引选择性3.3 多列索引3.4 选择合适的索引列顺序3.5 聚簇索引(Clustered Indexes)3.5.1 InnoDB和MyISAM的数据布局的比较3.5.2 按primary key的顺序插入行(InnoDB) 3.6 覆盖索引(Covering Indexes)3.…