目录

一、服务器准备

1.购买服务器

2.配置宝塔面板

1.安装宝塔面板

2.配置宝塔面板环境

二、打包项目文件

1.打包前端vue3项目

2.打包后端SpringBoot项目

3.打包MySQL8.0项目

三、项目部署到服务器

1.数据库上传

2.前端项目上传

3.后端项目上传

4.端口放行

四、nginx配置（额外内容）

五、总结

---

一、服务器准备

1.购买服务器

选择阿里云（或者其他）服务器，服务器的配置可以根据需求来，但是内存一定要4GB及以上，不然使用宝塔时无法安装MySQL8.0版本（有安装的办法，但是很麻烦），而如果服务器上使用8.0以下的版本而本地使用的是8.0版本，会发生数据导不进去的问题。

镜像选择CentOS

带宽和安全组根据自己的需求设置，但是分配公网IPV4地址可以先勾上

管理设置中选择自定义密码，这样在后面远程连接时会方便不少

然后根据想使用的时长进行购买即可。

2.配置宝塔面板

1.安装宝塔面板

在购买完服务器之后，启动服务器，并进行远程连接，并登录

第一次登录需要输入刚才在购买服务器时输入的账号和密码，如果想要重制密码或者刚才没有设置密码，可在如下界面设置

配置完密码并且成功登录后应该进入服务器的控制台，然后打开宝塔面板的安装网址，复制Linux面板的安装脚本到服务器的控制台中，等待安装完成

安装完成后可以获得宝塔面板的访问网址和账号密码，如果忘记了网址和账号密码，可以输入bt default命令查看

如果忘记密码，可以输入bt命令来修改密码

2.配置宝塔面板环境

当宝塔面板安装完成后在浏览器上输入刚才拿到的地址访问宝塔面板

初次登录会让你绑定手机账号等，绑定即可，进入宝塔后要安装若干软件（初次进入宝塔会有安装推荐，看自己需求选择即可，后续也可以在软件商店修改），我的安装软件如下

然后安装jdk，根据自己的项目安装，我是用的jdk21

安装方法一：

网站 -> Java项目 -> Java环境管理 -> 选择JDK版本安装即可

但有时使用安装方法一安装速度很慢，而且有可能不成功，因此可以使用外部导入jdk压缩包的形式安装

安装方法二：

进入jdk的官方下载网站，选择自己需要的jdk版本，先下载到本地

下载完成后得到一个压缩包

然后在宝塔面板中相应位置（位置可随便选）上传该压缩包并解压，接着在JAVA环境管理中的添加自定义JDK中选择刚才解压后的文件夹中的/bin/java文件即可

配置完了java环境，接着开始配置MySQL环境，其中MySQL8.0在之前的软件安装中就已经安装好了，根据如下步骤添加数据库，访问权限选择所有人，不然springboot会连接不上数据库，并且数据库名要特殊，如果使用root、test等数据库名可能会报错数据库用户名不合法。

好了，到这一步宝塔的环境基本搭建完成。

二、打包项目文件

1.打包前端vue3项目

先来看一下项目结构

本来的项目中是没有.env.development和.env.production这两个文件的，需要自己创建，前者代表开发环境（本地）使用的参数，后者代表生产环境（线上）使用的参数。

然后再main.js文件中注册全局变量

接着将所有需要使用到后端ip和端口的地方全部换成相应的参数，如：

做好打包前的准备之后，在项目路径下输入npm run build进行项目打包，打包完之后得到dist文件

至此，前端打包完毕。

2.打包后端SpringBoot项目

先看一下后端的项目结构

然后修改application.properties配置文件中的参数即可打包

使用maven进行打包

如果遇到这种问题

勾选切换“跳过测试”模式按钮，可以看到此时的test被划去，再次打包即可

打包成功后会发现项目中多了一个target文件夹，里面的jar文件便是我们需要的后端打包文件

至此后端的项目也以打包完成。

3.打包MySQL8.0项目

方法一：

如果你有Navicat Premium Lite 17软件（或者去下载一个），直接进入软件，找到自己的数据库，然后导出.sql文件即可

方法二：

如果没有该软件，可以通过命令来导出，具体可以看这篇文章

打包完成之后，我们会都得到一个.sql文件。

完成所有的项目打包之后，我们现在应该是有三个项目的打包文件，分别是前端的dist文件夹，后端的.jar文件，数据库的.sql文件，至此，项目打包完成。

三、项目部署到服务器

1.数据库上传

让我们回到宝塔面板，进入数据库，按照如下步骤导入数据，这里的本地上传文件是我们刚才得到的.sql文件，上传成功并导入之后，点击工具，如果里面有数据则说明导入成功。

2.前端项目上传

在文件中创建一个项目文件夹，用于存放我们的全部项目，如这里的backgroundSystem文件夹

然后进入该文件夹，创建一个存放前端项目的文件夹

接着把dist文件夹中的内容全部上传到这个文件夹中（或者不创建这个文件夹直接导入dist文件夹也行），包括assets文件夹，.html文件及其他的静态文件，我的ProjectWeb文件夹中多出来的文件是项目运行之后系统添加的。

然后进入网站 -> PHP项目 -> 添加站点,域名和备注填写自己服务器的域名和端口

前端项目部署完成

3.后端项目上传

在文件夹中上传刚才得到的.jar文件

然后按如下步骤配置

这样，后端项目也上传完成。

4.端口放行

先在宝塔面板中放行

然后回到阿里云服务器中放行相应端口

端口全部放行完之后项目便全部部署完成了，直接使用域名+端口即可访问我们的网站了。

四、nginx配置（额外内容）

如果项目用到了nginx的话，可在这里配置

然后将自己的配置写上即可

五、总结

虽然这是使用宝塔面板的可视化配置，但是原理是一样的，本质是在Linux服务器上安装jdk、数据库，nginx等环境，然后将相应的文件导入到服务器上，启动后端服务，配置前端，数据库等，然后注意放行端口即可完成一个简单前后端分离项目的线上部署。