手把手教学使用宝塔面板部署前后端分离项目（全面详细）

前言：平日里我们的前后端项目基本上都是通过linux系统提供的命令窗口去部署，有没有一种更简单可视化的方式去部署我们自己的项目呢，答案是有的，本篇博客就是手把手教学如何通过一个可视化的页面去部署我们自己开发的前后端分离项目。

博主的其他部署教程：

1、Jenkins部署前后端分离项目：Jenkins部署前后端分离项目最全图文教程（手把手教学）

2、Docker部署前后端分离项目：手把手通过Docker部署前后端分离项目（亲测可用）

3、Linux系统部署Tomcat：Linux系统部署Tomcat详细教程（图文讲解）

4、Linux系统部署Nginx：Linux系统部署Nginx详细教程（图文讲解）

5、Linux系统配置Maven：Linux系统配置Maven环境详细教程（图文讲解）

6、Linux系统配置Node.js：Linux系统配置Node.js环境详细教程（图文讲解）

7、Linux系统安装部署MySQL：Linux系统安装部署MySQL完整教程（图文详解）

8、Linux系统安装部署Redis：Linux系统安装部署Redis完整教程（图文详解）

9、Linux系统安装部署MongoDB：Linux系统安装部署MongoDB完整教程（图文详解）

10、Linux系统安装部署Jenkins：Linux系统安装部署Jenkins详细教程（图文讲解）

11、Linux系统部署若依前后端分离项目：Linux系统部署若依前后端分离项目（手把手教学）

12、Alibaba Cloud Toolkit插件一键部署前后端分离项目：使用Alibaba Cloud Toolkit插件一键部署前后端分离项目

13、使用Docker插件一键部署前后端分离项目：【完整详细】IntelliJ IDEA中使用Docker插件一键部署前后端分离项目

14、Linux系统安装部署RabbitMQ：Linux系统安装部署RabbitMQ详细教程（图文详解）

目录

一、购买云服务器

二、安装宝塔面板 

三、初始化宝塔面板

四、部署SpringBoot项目

五、部署Vue项目 

六、连接MySQL数据库

七、放行端口

八、测试MySQL数据库连接

九、访问网站

---

一、购买云服务器

这边我选择的是华为云服务器，购买完毕以后，进入控制台找到自己的弹性云服务器，点击远程登录。

注：系统选择CentOS 7

选择使用CloudShell进行登录。

输入密码后成功登录进来。

二、安装宝塔面板 

复制如下命令进行安装。

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

会有2个提示，默认都是y即可。

然后安静等待安装完毕即可。

安装完毕以后会发现，通过外网面板地址无法访问宝塔面板，这边是因为我们新购买的服务器没有放行图中对应的37318端口。

我们找到我们的安全组面板，选择Sys-WebServer，点击配置规则。

点击添加规则。

填写完信息以后点击确认即可。 

然后我们再访问外网面板地址访问，就可以进来啦，记得输入账号和密码哦！

如果说哪天突然忘记了默认访问地址或者是账号密码，在命令窗口输入如下命令即可。

sudo bt default

三、初始化宝塔面板

输入账号和密码以后会弹出一个协议，点击同意即可。

进入面板后，系统会提示我们进行登录账号，这边没有账号的小伙伴先要去注册一个哦，不然是无法使用宝塔面板的。 

登录成功以后，我们选择第一套默认安装。

这边静静等待安装就好了，第一次安装会比较慢。

  

这样宝塔面板初始化就完成了。 

四、部署SpringBoot项目

这边我写了一个非常简单的SpringBoot项目，打成了jar包，后端端口配置的是9090。

在部署之前，我们务必要检查一下我们是否安装了JDK环境，没有的话是无法进行部署的。

1、检索Java1.8的列表

yum list java-1.8*

2、安装1.8.0的所有文件

yum install java-1.8.0-openjdk* -y

3、查看是否安装成功

java -version

这样JDK环境就安装好了，我们就可以继续部署了。 

点击左边的文件菜单，点击上传。 

 这是我上传上来的jar包

点击左边菜单的网站，点击Java项目，添加Java项目。

选择刚才上传的jar包并填写项目端口号，最后点击提交。

这样后端就算部署成功了！

五、部署Vue项目 

上传我们打包好的dist文件夹。

点击左边菜单的网站，点击PHP项目，添加站点。

没有域名的话直接填写ip地址就行了，根目录选择我们刚才上传的dist文件夹，最后点击提交即可。

注意：如果ip不写端口号，默认是80端口，80端口默认是放行的，所以我这边直接写的ip。

接下来我们还需要配置一下Nginx的反向代理，不然无法访问后端的接口。

找到配置文件

添加如下代码，然后点击保存即可。 

    location /api/ {
      proxy_pass http://ip:端口号/;
    }

六、连接MySQL数据库

1、点击添加数据库

2、填好信息后，权限需要修改为所有人。

七、放行端口

我这边需要放行9090端口，80端口系统默认放行了，所以我不需要再进行配置。

点击菜单的安全，点击添加端口规则。

输入需要放行的端口，确定即可。

同时华为云的安全组也需要放行9090端口！

数据库的3306端口号操作步骤一样，这样就部署成功啦！

八、测试MySQL数据库连接

输入刚才填好的信息，点击测试连接即可。

九、访问网站

这样我们的前后端就通过宝塔的可视化部署好了，是不是很简单，接下来我们就测试一下！

OK大功告成！