前端Vue、后端SSM、前后端分离项目服务器部署实战

->欢迎访问我搭建的博客

开端

最近我人生中的第一个项目写完了，这是一个历经 6 个多月，9000 多行代码的前后端分离项目。之前尝试过将项目部署到服务器上，踩了不少坑，出了不少 bug， 问了不少人，最后都没有部署成功。很多个晚上，我辗转反侧，思考为什么不能成功部署，一大早起来饭也不吃就又开始了部署。

失败过，绝望过，就在今天中午，它突然成了！激动的心，颤抖的手，指向把这一伟大的事儿给记录下来，方便下次部署项目，也算是给其他人一个方案。我相信项目部署这块并不是谁都能一次成功的，特别是像我这样 Linux 和服务器方面基础比较薄弱的人，更是会遇到不少的问题。那废话不多说了，开始准备吧！

软硬件基础

前端

Node.js （运行环境）

Vue.js （基本框架）

NPM （包管理工具）

后端

Java （JDK 中内置 JVM 运行环境）

Spring （基本框架）

Spring MVC （框架）

Spring Boot （自动化框架）

Mybatis （SQL框架）

Maven （包管理工具）

其他

IDEA （编译器）

Postman （接口测试工具）

Putty （远程登录工具）

阿里云服务器

域名 （已备案）

宝塔面板 （推荐使用）

劝退准备阶段

OK，如果大家的基础和我差不多，前端是用 Vue 框架在写，那就符合一大半了。如果后端也是 SSM ，那这篇教程你就可以点赞投币加收藏一键三连了。不过后端用其他问题也不是很大，比如老一点的 SSH 等等。~~只要你不用 Jsp 写，咱们都是朋友。~~目前是这样的，我们都已经完成了前后端程序的编写，并且你已经可以通过在本地分开启动前后端的程序实现浏览器本地 IP 的访问和接口的调用。这样就可以了，线上的部署只要避开一些容易踩的坑就行，后面我都会讲到。

实操

准备好了之后，我们开始一步一步部署项目。

服务器准备

建网站

首先咱得有个网站才能让别人访问是不，关于宝塔面板安装等可以见我的第一篇文章

->[购买学生服务器、备案域名、搭建博客菜鸟级教程]

实在不行咱先把先前搭博客的网站清空用来部署项目，不过还是建议大家多买一个域名，早点备案以备不时之需。

首先登陆我们的宝塔面板添加网站，ims.cool 是我买的域名，所以我可以建一个 test.ims.cool 的网站，同时建一个 FTP 和一个 MySQL 数据库。

建完之后我们登陆刚刚的网站肯定是打不开的，我们要去阿里云服务器的控制台绑定。

输入刚刚建站的域名进行绑定，然后开始解析域名，大概需要 3-5 分钟时间。

刷新一下看看，如果显示已解析，那么就可以顺利打开网站了，在浏览器输入地址试试，发现成功了，那简单的建站就到此为止。

建数据库

前端和后端是通过接口访问数据库数据进行交互的，没有数据库前端只能独自美丽，后端只能在命令行玩。相信大家在学习 Mybatis 框架的时候也已经玩过数据库了，所以多的不说，我们需要对刚刚网站的数据库进行一些操作。

在宝塔面板点开数据库-管理-SQL，将本地数据库的建表，数据插入的代码复制粘贴进这里然后执行，我们就可以得到我们项目所需要的数据表和数据了。当然你要是会写脚本导入，或者远程连接数据库复制也是没问题的。因为我的项目数据量比较少而且留有建表的程序，所以复制粘贴最简单了。

最后一步，回到宝塔，记下数据库名、用户名和密码，这三个我们接下来的后端中是需要同步修改的。

放行程序端口

这一步特别重要！这一步特别重要！这一步特别重要！重要的事情说三遍，我就是以为自己的网站前后端跨域没做好整了几天的配置文件，最后发现是因为端口没放行才走不通的。关于端口放行需要修改两处地方！

首先在宝塔界面打开安全栏，添加放行端口号。我这里后端程序用的端口号是 9988，前端程序用的端口号是 9999，所以需要放行这两个端口号。

接下来打开阿里云服务器控制台，点开安全-防火墙，在这里也要放行之前的两个前后端程序用到的端口号！这真的是一个天大的坑啊，谁知道两个地方都要放行端口 =^= 浪费了我好几天的时间，真是血亏，大家一定不要踩。

后端准备

检查接口

这是我的项目目录结构，第一次写项目可能包的分类不太标准，dao 层就是 mapper ，model 层就是 entity ，我原先采用过 Jsp 写，但是写完登录页面就放弃了（页面布局改一下5秒，重启一次 Tomcat 30秒，这谁顶得住），后来想使用 MVC 的格式写，所以 pojo 改成了 model ，不过这些问题都不大。

我们首先点开 controller 层，查看每一个类名上是否有加上 Spring Boot 中的注解 @CrossOrigin，Controller 注解使用 @RestController，如果你是写 Jsp 的那么使用 @Controller。@RestController 相当于 @Controller+@ResponseBody，但是视图解析器无法返回 Jsp 和