前后端分离项目部署(SpringBoot + Vue)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前后端分离介绍

       随着互联网时代的更新迭代，传统的开发模式也随之改变。近几年来，或许我们计算机学生听得最多的就是前后端分离项目。SpringBoot +Vue就是一种典型的前后端分离开发模式。前后端分离已经成为互联网项目开发的业界标准使用方式，通过Nginx + Tomcat的方式（也可以中间加一个Node.js）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。
       核心思想是: 前端工程师在HTML页面中通过AJAX调用后端工程师写好的RESTFUL API接口并使用JSON数据进行交互， 从而达到前后端通信的效果。言归正卷，介绍完什么是前后端分离后，让我们进入如何配置前后端分离项目。

一、服务器购买和配置

1.1 腾讯服务器购买

此处我推荐购买腾讯云的服务器，因为它自带宝塔功能，对小白很友好。而我购买的是轻量应用服务器，也可以购买云服务器没有太大的区别。


地域和可用区可按照自己情况进行挑选，镜像的话我推荐用宝塔，以下配置选择等同。


对所有配置进行选择完成后就可以进行点击购买并提交订单。

1.2 服务器实例控制台及相关配置

点击个人账号头像进入账号信息控制台，鼠标移至云产品就能选择对应的产品。

首先对已购买的服务器进行密码重置（以后远程连接需要用到，xshell、navicat、filezilla等）。

二、Xshell的安装与使用

     XShell 是一种流行且简单的网络程序，旨在模拟虚拟终端。XShell可以在Windows界面下来访问远端不同系统下的服务器，从而比较好的达到远程控制终端的目的。它支持 RLOGIN、SFTP、SERIAL、TELNET、SSH2 和 SSH1，可以非常方便的对Linux主机进行远程管理。除此之外，其还有丰富的外观配色方案以及样式选择。

2.1 下载XShell

Xshell免费版官网下载地址：https://www.xshell.com/zh/free-for-home-school/


最后将软件安装到自己电脑上即可。

2.2 Xshell的使用

三、Xftp的安装与使用

3.1 下载Xftp

       Xftp其实就是传文件用，不想下载xftp的也可以用命令。Xftp免费版官网下载地址：https://www.xshell.com/zh/free-for-home-school/

下载方式和使用方式跟Xshell一样，此处不再复述。以下是连接成功后。要想将本地电脑的文件上传，通过拖动的方式即可。

四、项目部署前的准备

4.1 使用Xshell获取登录宝塔页面的信息

在Xshell命令框中输入 bt default 获取到对应的宝塔网址和登录的用户名，密码。

若使用用户名和密码登录不成功，则需要到服务器检查是否已经开放了:8888端口.步骤如下：点击服务器更多中的管理，进入服务器管理页面，点击防火墙并点击添加规则。

在端口号处输入8888即可。

宝塔页面登录成功如下。

点击右侧栏的数据库，进行数据库的创建，点击最上方的数据库类型并添加数据库。（服务器没有下载数据库软件的，要到软件商品自行下载）


到自己的数据库软件进行数据的导出与服务器的数据导入(此处以MySQL为例)。将导出的SQL文件保存即可。

再到宝塔页面中，点击创建好的数据库中的导入，将本地的SQL文件上传即可。（注意：下载完数据软件后要将对应的端口号打开MySQL的端口号是:3306, 否则后端项目无法访问对应的数据库表)

4.2 打包本地后端项目

先将本地项目中的配置文件.properties 或 .yml 进行更改（同时将项目的端口名在服务器打开）。更改完成后，按照以下流程操作即可。

依次点击以下操作。

package成功后，在本地项目就会出现对应的target文件。自此，后端项目就打包完成。

4.3 服务器中部署后端项目

使用Xftp将打包好的后端jar包上传到服务器中。（上传到自己想放置的文件夹下即可，此处我以/www/wwwroot/sp-jar为例），上传成功即可。

上传成功后，到宝塔页面中点击左侧篮板中的网站，选择最上方的Java项目，点击添加Java项目。并将对应的项目信息填上（注意：服务器没有下载JDK的需要提前自行下载），项目端口名是要与本地项目的端口名一致，否则后续前端项目会出现接口访问问题，点击确认后就将后端项目部署完成了。

4.4 前端项目部署

先到Vue项目中的main.js中将axois接口中的localhost更改成服务器中ip地址。

同时修改router文件夹下的index.js文件，将mode修改为hash模式。

将上述操作完成后，在项目控制台输入 npm run build 对前端项目进行打包。得到打包好的前端项目dist文件夹。

将打包好的dist文件夹使用Xftp上传到服务器中对应的文件夹中（此处以/project/math/为例）

4.5 使用Nginx对前端项目进行反向代理

在宝塔页面文件中找到自己下载的Nginx路径（没有的自行下载），同时打开conf文件夹下的nginx.conf进行配置，按照以下步骤进行操作即可。

项目运行的端口需要在服务器提前打开。

最后在Xshell窗口中使用service nginx restart将nginx重启即可。

4.6 查看项目是否部署成功

可以看到，SpringBoot + Vue 前后端分离项目已成功部署。

五、总结

       自己刚开始接触前后端分离项目部署也是通过上网查阅对应的资料，踩过很多坑，因此想自己写一篇文章。此文章还有很多不足的地方，本人也知道，后面有机会将会持续完善的。创作不易，点个赞呗。同时有任何疑问我们一起交流，一起成长。如果有更好的文章，也欢迎贴在下面哦，我们相互学习。