（亲测有效）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 文件位置， 最后不要忘记保存 ！

（4）此时，我将之前的前端打包文件夹 dist 放到了这个目录下，并且修改了网站站点的配置。

（5）然后在浏览器中通过 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，问题成功解决了。