如何使用宝塔面板部署前后端分离项目如何使用宝塔面板部署前后端分离项目 1. 部署项目说明（1）前端 - vue2 we

如何使用宝塔面板部署前后端分离项目

1. 部署项目说明

（1）前端 - vue2 webpack(3.6.0)
（2）后端 - nodejs express框架
（3）数据库 - mysql（5.7版本）
（4）数据库连接工具 - navicat
（5）服务器 - 我购买的是阿里云服务器（搭配着宝塔面板一起买的）
（6）阿里云服务器相关介绍
help.aliyun.com/zh/ecs/user…

2. 如何登录宝塔面板

（1）首先购买阿里云服务器，购买的阿里云服务器可以在工作台看到（截图如下）

（2）下图是如何重置阿里云服务器实例密码，如果忘了服务器密码，可在此处重置，请记住此密码，后面通过Workbench远程连接会用到

（3）点击下图连接远程操作，我是选择默认的workbench方式连接

（4）通过服务器实例用户名跟密码登录workbench，登录界面如下图
登录成功输入 bt default/bt 14 可以看到宝塔面板登录链接以及用户名、密码**
直接在浏览器打开地址，输入用户名跟密码即可登录。

登录成功后页面

（5）在登录宝塔面板前需要做些配置工作，具体介绍可以参考如下链接：请翻到文章下面（赋部分截图）
market.aliyun.com/detail/cmjj…

（6）下面截图是我配置的步骤（按照截图顺序）

添加成功图片如下（后续部署项目需要用到的端口都需要在此处添加进来）

3. 如何通过宝塔面板部署后端node项目

（1）测试数据库是否可以正常连接

添加成功图片如下

导入mysql数据库

导入成功可以点击此处可以查看结果

测试数据库已经部署到阿里云服务器上面了，通过navicat测试是否可以连接成功

注意：我数据库使用的默认3306端口，阿里云服务器在安全组中也要放开3306端口，宝塔面板也要放开，如何设置前面已经讲到

如果在此过程中出现1130 - Host '192.168.xx.xx' is not allowed to connect to this MySQL server 解决方案如下

进入数据库，切换到mysql库

use mysql;

赋予主机访问数据库的权限

grant all privileges on *.* to 'root'@'%' identified by '123456' with grant option;

刷新权限使其生效

flush privileges;

此时，再使用Navicat连接数据库即可连接成功。

可以再查看主机及用户信息

select host,user from user;

可以看到host中只有localhost主机。我们需要将xxx.xxx.xxx.xxx也添加到这里才对。

添加方法如下：

grant all privileges on *.* to root@"xxx.xxx.xxx.xxx" identified by "密码";

注意：此处xxx.xxx.xxx.xxx是阿里云服务器外网地址，密码是新增数据库密码

这相当于是给IP-xxx.xxx.xxx.xxx赋予了所有的权限，包括远程访问权限。
然后再输入

flush privileges;

这相当于是重新加载一下mysql权限，这一步必须有。

退出mysql命令行

exit;

（2）在文件中新建node文件夹上传node项目
保证node项目可以正常运行，并且数据库要换成部署到服务器的数据库

宝塔面板默认路径会有一个default文件夹，默认路径是/www/wwwroot 可以在此路径下新建需要存放node 跟前端项目的文件路径，下图是我创建的文件夹，名称是node（可以根据项目定义一个有实际意义的我这边只是做演示），node文件夹下面我这边又新建了一层，具体文件路径如图 /www/wwwroot/node/familyserve（familyserve）是我存放node项目的地方