（亲测有效）SpringBoot+Vue项目云服务器部署（宝塔）
https://i-blog.csdnimg.cn/direct/f57ec67c10494c1ca8a36432658a60b2.png目录
一、准备工作
1、购买云服务器
2、获取面板地址
二、jdk和数据库
1、安装环境
2、安装Java环境jdk
3、添加数据库
三、前端部署
1、修改后台服务所在源
2、vue build
2、创建站点
四、后端部署
1、修改application.yml
2、idea打包
3、运行jar包
方式一：在终端命令运行jar包
方式二：添加Java站点（服务器和面板都开一下端口）
4、开放端口
五、测试
六、大概遇到的题目
1、404
仿照别人项目做了个基于 springboot 和 vue 的网站，在腾讯云服务器上，通过 宝塔面板 部署了该项目。
项目的技术栈：Vue3、Axios、Element Plus、Spring Boot2、Mybatis、MySQL8
一、准备工作
1、购买云服务器
（1）起首前去云服务器平台（阿里云或腾讯云）购买云服务器（可以免费试用），这里以腾讯云为例。
https://i-blog.csdnimg.cn/direct/704ebeee5e124f0db13529ff6cceda8f.png
然后创建服务器，选择常见linux的发型版本，centos、debian、ubuntu 啥的都行。
我这里利用宝塔linux面板，地区可以选择离本身现在所处位置近的。
https://i-blog.csdnimg.cn/direct/de21671e27fc46ffba83b50052a9b34c.png
点击立即利用，
https://i-blog.csdnimg.cn/direct/080fdc59a83a4b88bc2a14b2da7bc5ee.png
创建成功之后会发关照，点击跳转，
https://i-blog.csdnimg.cn/direct/cfa9109989184848a97d0a905ddfb043.png
（2）在这个控制台页面就可以看到了。
https://i-blog.csdnimg.cn/direct/7a15cc73e99b4c0b9463b6f381cb2f73.png
2、获取面板地址
（1）然后点击登录，
https://i-blog.csdnimg.cn/direct/3e32bcd038894a969980448a9101ba2f.png
等登录到面板，输入以下命令查看面板地址：
sudo /etc/init.d/bt default https://i-blog.csdnimg.cn/direct/898835757c1541709652dc0cb5d0d24f.png
（2）找到防火墙页面，
https://i-blog.csdnimg.cn/direct/2a463c59f04d456c921537e481beed7c.png
添加8888端口后，访问上面的外网地址，
https://i-blog.csdnimg.cn/direct/991abc48ba78427784133ecc21a08c06.png
可以看到已经添加成功了，
https://i-blog.csdnimg.cn/direct/574eb02e91424293a24fb3e3db0b4756.png
二、jdk和数据库
1、安装环境
（1）复制外网面板地址，浏览器打开，就可以进入宝塔面板腾讯云专项网网页，
https://i-blog.csdnimg.cn/direct/a0b32c87f916455cb26f464a311232cc.png
https://i-blog.csdnimg.cn/direct/13e6079f0bfe45798ee65c1d0402a2ac.png
然后登录到宝塔面板，账号密码是上面命令生成的账号密码。
https://i-blog.csdnimg.cn/direct/b29bbf61fb5c497eb25ea211be5c1430.png
进入之后，需要绑定宝塔官网账号，如果没有的话，需要注册一下。
（2）找到左侧的软件商店，搜索应用并且安装以下（如果没有用到redis，可以不用安装）：
如果需要其他环境自行下载。
https://i-blog.csdnimg.cn/direct/6db4f0b1530a4c699bb8b9f309d45f70.png
https://i-blog.csdnimg.cn/direct/7ac76d04ecee4191b9175da9651e39e7.png
https://i-blog.csdnimg.cn/direct/b7c9bed5a865467ca84774d7cc758981.png
一共安装了这么多，
https://i-blog.csdnimg.cn/direct/d2bff47f1bb247719999d9f21cd62c02.png
2、安装Java环境jdk
（1）要先安装Java环境（根据项目环境选择）
点击宝塔面板左侧的网站 - Java项目 - Java环境管理 - 安装Java环境，
https://i-blog.csdnimg.cn/direct/e0084ecf98dc4cd294b822ee76e5aade.png
此处我选择的是jdk8，等候安装完成，可以看到，
https://i-blog.csdnimg.cn/direct/4ffd6b9b3b99472abbb2546baab36532.png
然后需要在文件中加入以下（留意修改本钱身的jdk路径）：
（2）打开宝塔面板左侧的终端，输入以下命令打开文件：
vim /etc/profile 或者直接找到文件/etc/profile，进入编辑模式，
https://i-blog.csdnimg.cn/direct/2109206e7f114446910efb549ec44fee.png
在文件中加入以下（留意修改本钱身的jdk路径）：
# jdk解压后的目录路径
export JAVA_HOME=/www/server/java/jdk1.8.0_371
export JRE_HOME=/www/server/java/jdk1.8.0_371/jre
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin https://i-blog.csdnimg.cn/direct/fe09159308ac469fa49388c9512604ab.png
然后按esc，输入:wq保存文件。
（3）然后，我们需要更新一下这个文件/etc/profile，利用下列命令，
source /etc/profile 打开菜单左侧的终端,输入以下命令查看java版本：
java -version https://i-blog.csdnimg.cn/direct/9b8014cb23174900add37b166940bed4.png
就可以看到jdk的版本了。
3、添加数据库
（1）点击左侧的数据库，添加数据库。用户名和密码本身设置，
https://i-blog.csdnimg.cn/direct/450e02971a9d4c309d64a40de72ecb93.png
添加完成之后，可以在面板中看到了。
https://i-blog.csdnimg.cn/direct/09a1426c68bf4a8581697cb540fe5c8e.png
（2）添加后，导入数据库表，
https://i-blog.csdnimg.cn/direct/d07b1541383a4aacb6bf155e3037be82.png
将以sql为后缀的文件上传，此文件即建表语句。
（3）然后点击工具，可查看是否成功建表。
https://i-blog.csdnimg.cn/direct/bdd1acc1a22a43408681eeb43deeb12c.png
（4）要想查看数据库中表导入数据是否成功，可以通过我们之前安装的这个phpMyAdmin 5.0，
https://i-blog.csdnimg.cn/direct/a1dc3711f43d45109e1e0cdb145ef3db.png
进入宝塔面板左侧的数据库，点击phpMyAdmin，选择面板访问，
https://i-blog.csdnimg.cn/direct/5c10c92eeda44e3baa79fa26fd31e813.png
进入之后，会生成下面这个页面，可以可视化数据库表的数据。
https://i-blog.csdnimg.cn/direct/dd621b303b0049e5a9a1d7fa9fa392ec.png
三、前端部署
1、修改后台服务所在源
打开前端项目，找到request.ts文件，修改后台服务所在ip，
https://i-blog.csdnimg.cn/direct/03ce0782af564c23bc00b7f4a2cdede5.png
2、vue build
如果前端是vue工程，进入到vue文件下，cmd进入命令行，输入npm run build打包。
https://i-blog.csdnimg.cn/direct/034e68c089e54fe9b740ff031e96faad.png
打包成功后会出现dist文件，
https://i-blog.csdnimg.cn/direct/e88477d2f6e84ce9b829f85939b04017.png
https://i-blog.csdnimg.cn/direct/69aec79502ff456995a28f54719987b9.png
将dist文件拖到宝塔面板文件里，此处我的路径是/www/wwwroot。
https://i-blog.csdnimg.cn/direct/60eda4f2fb8a4283a0a743e874f5e673.png
2、创建站点
（1）点击左侧的网站添加站点。
其中，需要点击安装ftp，
https://i-blog.csdnimg.cn/direct/7d38792fe3324dd8b143c870a437913c.png
安装完成之后，添加ip或域名，
https://i-blog.csdnimg.cn/direct/3106a1cce68c4811b5a523216b7c97c7.png
（2）找到网站目录，定位到上面添加的dist文件位置，最后不要忘记保存！
https://i-blog.csdnimg.cn/direct/8901824e40f447408c856abc1c46581c.png
（4）此时，我将之前的前端打包文件夹dist放到了这个目录下，并且修改了网站站点的配置。
https://i-blog.csdnimg.cn/direct/93fc10385eb146779c701801047984f0.png
https://i-blog.csdnimg.cn/direct/bbdf541431f841cfb6aa7139d3b117e5.png （5）然后在浏览器中通过ip可以访问到前端页面了（能看到就行，其他题目往后看）。
四、后端部署
1、修改application.yml
修改数据库连接池，并设置后端端口号（记住端口号）
https://i-blog.csdnimg.cn/direct/b4f5e0927a7c42f29889aabac7a0aae5.png
2、idea打包
https://i-blog.csdnimg.cn/direct/bb03f5d968d2493ca067550b5eb2f6f6.png
打包后，工程target文件下会生成jar包，
https://i-blog.csdnimg.cn/direct/d225f1762b834733b47c111c3a65809e.png
将jar包拖到宝塔面板文件里。
到此，前后端文件所在位置如下：
https://i-blog.csdnimg.cn/direct/93fc10385eb146779c701801047984f0.png
https://i-blog.csdnimg.cn/direct/cb5d7bd2d5e64c1e8708c770c2182d13.png
3、运行jar包
方式一：在终端命令运行jar包
（1）打开服务器终端，输入以下命令跳转文件。如：cd /www/wwwroot
cd jar包存放位置 临时运行jar包（输入java -jar 后，再输入jar包的前面几个字母然后按tab键可以补全名称）：
java -jar jar包 启动之后，
https://i-blog.csdnimg.cn/direct/463ec52cc42f46738edabd35dd9abe9d.png
然后，在浏览器进入地址，就可以看到后端正常启动了。
https://i-blog.csdnimg.cn/direct/2178ddc4ddfb4bc081ef0821c1c6365c.png
（2）如果想要服务器一直运行jar包（关闭页面后也会运行），输入以下命令：
nohup java -jar jar包 & https://i-blog.csdnimg.cn/direct/39879269618e4887b505a88e6d112566.png
方式二：添加Java站点（服务器和面板都开一下端口）
直接添加这个 java 项目的端口，
[*]项目jar路径：选择上传的jar包路径位置
[*]项目端口：要和本身的项目端口一样
[*]项目jdk：已安装的jdk
[*]项目执行命令：是自动生成的
[*]开机启动：选择
https://i-blog.csdnimg.cn/direct/bd51fa1f6fdd434a81008fb664a193be.png
4、开放端口
点击左侧的安全，添加用到的端口，
https://i-blog.csdnimg.cn/direct/880bc79e7a9245808114b3b0e0d9bf6b.png
腾讯云网页那里也要添加上，
https://i-blog.csdnimg.cn/direct/5972bd5d97f34470a775a654bea8317d.png
五、测试
（1）我在站点里设置的后端端口是8101，
在浏览器中输入后端的某个路径，就可以看到后端可以正常访问了，
https://i-blog.csdnimg.cn/direct/2620c812bfa349e6b9d442d5d4de9fac.png
（2）前端也可以了，我在站点里设置的前端端口是8080，因此ip+8080访问，
打开服务器对应网站（服务器ip地址+域名号），革新即可，
https://i-blog.csdnimg.cn/direct/d90078eb111b45ce96ee17bdcee5a1af.png
六、大概遇到的题目
1、404
此题目大概由vue的路由引起，需要nginx配置一下。
打开nginx配置，找到nginx位置。打开以你ip命名的conf文件，在server里添加一行命令，然后重载nginx。
详情请移步我的另一篇博客Vue项目通过宝塔部署之后，页面革新后浏览器404页面-CSDN博客
OK，题目成功解决了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]