（亲测有效）SpringBoot+Vue项目云服务器部署（宝塔）

 

目录

一、准备工作

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）首先前往云服务器平台（阿里云或腾讯云）购买云服务器（可以免费试用），这里以腾讯云为例。

然后创建服务器，选择常见linux的发型版本，centos、debian、ubuntu 啥的都行。

我这里使用宝塔linux面板，地区可以选择离自己现在所处位置近的。

点击立即使用，

创建成功之后会发通知，点击跳转，

（2）在这个控制台页面就可以看到了。

2、获取面板地址

（1）然后点击登录，

等登录到面板，输入以下命令查看面板地址：

sudo /etc/init.d/bt default

（2）找到防火墙页面，

添加8888端口后，访问上面的外网地址，

可以看到已经添加成功了，

二、jdk和数据库

1、安装环境

（1）复制外网面板地址，浏览器打开，就可以进入宝塔面板腾讯云专项网网页，

然后登录到宝塔面板，账号密码是上面命令生成的账号密码。

进入之后，需要绑定宝塔官网账号，如果没有的话，需要注册一下。

（2）找到左侧的软件商店，搜索应用并且安装以下（如果没有用到redis，可以不用安装）：

如果需要其他环境自行下载。

一共安装了这么多，

 2、安装Java环境jdk

（1）要先安装Java环境（根据项目情况选择）

点击宝塔面板左侧的网站 - Java项目 - Java环境管理 - 安装Java环境，

此处我选择的是jdk8，等待安装完成，可以看到，

然后需要在文件中加入以下（注意修改成自己的jdk路径）：

（2）打开宝塔面板左侧的终端，输入以下命令打开文件：

vim /etc/profile

或者直接找到文件/etc/profile，进入编辑模式，

在文件中加入以下（注意修改成自己的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

然后按esc，输入:wq保存文件。

（3）然后，我们需要更新一下这个文件/etc/profile，使用下列命令，

source /etc/profile

打开菜单左侧的终端,输入以下命令查看java版本：

java -version

就可以看到jdk的版本了。

3、添加数据库

（1）点击左侧的数据库，添加数据库。用户名和密码自己设置，

添加完成之后，可以在面板中看到了。

（2）添加后，导入数据库表，

将以sql为后缀的文件上传，此文件即建表语句。

（3）然后点击工具，可查看是否成功建表。

（4）要想查看数据库中表导入数据是否成功，可以通过我们之前安装的这个phpMyAdmin 5.0，

进入宝塔面板左侧的数据库，点击phpMyAdmin，选择面板访问，

 进入之后，会生成下面这个页面，可以可视化数据库表的数据。

三、前端部署

1、修改后台服务所在源

打开前端项目，找到request.ts文件，修改后台服务所在ip，

2、vue  build

如果前端是vue工程，进入到vue文件下，cmd进入命令行，输入npm run build打包。

打包成功后会出现dist文件，

将dist文件拖到宝塔面板文件里，此处我的路径是/www/wwwroot。

2、创建站点

（1）点击左侧的网站添加站点。

其中，需要点击安装ftp，

安装完成之后，添加ip或域名，

（2）找到网站目录，定位到上面添加的dist文件位置，最后不要忘记保存！

然后在浏览器中通过ip可以访问到前端页面了（能看到就行，其他问题往后看）。

四、后端部署

1、修改application.yml

修改数据库连接池，并设置后端端口号（记住端口号）

2、idea打包

打包后，工程target文件下会生成jar包，

将jar包拖到宝塔面板文件里。

前后端文件如下：

3、运行jar包

方式一：在终端命令运行jar包

（1）打开服务器终端，输入以下命令跳转文件。如：cd /www/wwwroot

cd jar包存放位置

临时运行jar包（输入java -jar 后，再输入jar包的前面几个字母然后按tab键可以补全名称）：

java -jar jar包

启动之后，

然后，在浏览器进入地址，就可以看到后端正常启动了。

（2）如果想要服务器一直运行jar包（关闭页面后也会运行），输入以下命令：

nohup java -jar jar包 &

方式二：添加Java站点（服务器和面板都开一下端口）

直接添加这个 java 项目的端口，

• 项目jar路径：选择上传的jar包路径位置
• 项目端口：要和自己的项目端口一样
• 项目jdk：已安装的jdk
• 项目执行命令：是自动生成的
• 开机启动：选择

 4、开放端口

点击左侧的安全，添加用到的端口，

腾讯云网页那边也要添加上，

五、测试

（1）我在站点里设置的后端端口是8101，

在浏览器中输入后端的某个路径，就可以看到后端可以正常访问了，

（2）前端也可以了，我在站点里设置的前端端口是8080，因此ip+8080访问，

打开服务器对应网站（服务器ip地址+域名号），刷新即可，

六、可能遇到的问题

1、404

此问题可能由vue的路由引起，需要nginx配置一下。

打开nginx配置，找到nginx位置。打开以你ip命名的conf文件，在server里添加一行命令，然后重载nginx。

详情请移步我的另一篇博客Vue项目通过宝塔部署之后，页面刷新后浏览器404页面-CSDN博客

OK，问题成功解决了。