目录

前言

一、宝塔必要软件安装

二、前端Vue项目部署

1. 确定端口号并打包项目

2.  打包文件夹上传

3. 创建站点

三、MySQL数据库准备 

四、后端Spring项目部署

1. 检查后端项目相关信息

2. 后端项目打包操作 

3. 文件上传与启动 

五、注意事项 ——JDK和跨域问题

总结 

---

前言

前情提要：华为云耀云服务器L实例基本使用——实例创建与连接_边城仔的博客-CSDN博客

  当一个前后端分离的项目写好之后，我们应该如何将其部署到服务器中呢？下面我们将在一个服务器中部署前端的vue项目，和后端的springboot项目，看看一个完整的前后端项目究竟是如何部署起来的吧！（声明：其中的前端vue代码来自B站黑马程序员的资料，后端的springboot代码是本人所写~）

一、宝塔必要软件安装

  在正式部署之前，我们应该将前提条件准备好， 必要的有FTP、MySQL、PHP、phpMyAdmin、java项目一键部署，其中，PHP用来启动前端项目，phpMyAdmin用来开启一个新的网页管理MySQL数据库。

二、前端Vue项目部署

1. 确定端口号并打包项目

  在正式将文件上传到服务器之前，我们先在本地启动一下前端项目，查看一下前端项目在本地启动时所占用的端口，如图所示：

  在这里，我的端口号是9528 ，注意这个细节，后面在上传前端文件之后需要用到。

  查看完端口号后，我们需要用将前端代码打包一下，打包完成之后，原本的目录会自动生成一个dist文件夹，打包后的代码便放在这个文件夹这中，之后我们需要把这个文件夹上传到服务器上。关于vue项目如何打包大家也可以参考下面这位博主的文章：

vue项目打包流程

2.  打包文件夹上传

  项目打包好之后， 我们可以选择将刚才打包好的dist文件夹上传到www/wwwroot/default下面（这个看个人选择），具体如下：

3. 创建站点

  完成好文件夹的上传之后，我们需要借助PHP添加一个站点，还记得刚刚那个端口号吗？在建站的时候需要填入项目在本地启动时的那个端口号，具体注意事项如下图所示：

  当网站建立好之后，我们需要返回云服务器的控制台配置一下入口规则，否则刚刚建立的网站将无法访问。具体如下：

  当一切准备就绪之后，我们再输入相关的地址，就能够访问刚刚部署的前端应用了。

三、MySQL数据库准备 

  接下来，我们要将项目所要用到的数据在数据库中建立好。在这里，我采用sql脚本创建初始的数据。登录phpMyAdmin管理页面，账号填写root，密码可以在下图所示的地方查看。

  进入管理页面后，新建一个需要的数据库，名字叫tlias，在该数据库中执行事先准备好的sql脚本。除了执行sql脚本，我们也可以导入本地电脑中的sql文件，这里就不再阐述了，大家可以参考一下下面这篇文章：

phpmyadmin mysql sql_phpMyadmin导入数据库sql文件的方法详解（附视频）-CSDN博客

四、后端Spring项目部署

1. 检查后端项目相关信息

  在正式打包后端项目之前，我们同样将项目启动一下，查看项目运行时所占用的端口号。在这里，我的后端项目启动时所占用的端口号为8080。

  接下来，我们需要配置一下数据库的连接信息，具体如下图所示：

2. 后端项目打包操作 

  点击运行旁边的package进行打包操作，在这个过程中可能碰到如下图所示的错误。 

  这个错误产生的原因可能是maven-resources-plugin版本与maven版本不一致，Maven版本太低maven-resources-plugin版本过高。解决方法：降低maven-resources-plugin版本。可以将以下配置项添加到pom.xml文件当中。

<plugin>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
 
<!--修改maven-resources-plugin版本-->
<plugin>
	<groupId>org.apache.maven.plugins</groupId>
	<artifactId>maven-resources-plugin</artifactId>
	<version>3.1.0</version>
</plugin>

参考博客： Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-reso-CSDN博客

3. 文件上传与启动 

  后端项目打包成功之后，target目录下会自动生成一个jar文件。同样，我们把打包后的这个jar文件上传至服务器中， 这里我上传到的服务器路径与dist文件夹的上一级目录（这个看个人选择）。

  接下来，我们需要点击后端文件目录下的终端，运行以下命令(该命令保证了spring程序能够在后台运行，不至于我们将控制台关闭之后程序就停止运行了)：

nohup java -jar xxx.jar

  当我们运行完上面的命令，刷新当前目录，就可以看到多出来的nohup.out文件，双击该文件可以查看spring的运行状态。

  我们在网址上输入对应的服务器IP和端口 ，此时就可以看到后台给我们响应回来的数据啦。

  启动完后端服务之后 ，我们再去前端页面查看，看是否有相关的数据。 到这里，我们的应用算是部署成功啦。

五、注意事项 ——JDK和跨域问题

  在部署的过程中，难免磕磕绊绊，比如在正式运行后端项目时我们需要先在Linux系统中安装JDK，并且在部署的时候还需要注意跨域问题。

  JDK怎么更好地安装呢？在没有安装JDK之前，我们可以尝试直接运行下面这一条命令，这时控制面板肯定会报错。与此同时，命令下方会有几行提示信息（即提示我们如何安装JDK并配置环境变量），我们只需要选择其中一条合适的命令，照着输入到控制台即可。

java -jar xxx.jar

   至于如何处理跨域问题，我们可以参考下面位博主的文章。我们在spring中使用@CrossOrigin注解时不一定会起作用，这时候我们就需要去找其他的方法了。

解决跨域报错问题&Access to XMLHttpRequest at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORs policy.header-CSDN博客

总结 

  整体下来，部署一个前后端分离的项目不是特别容易，这个过程难免磕磕绊绊，会遇到一些奇奇怪怪的问题。不过，从这个过程中，我们也能够锻炼一下自己查找错误和解决问题的能力，让自己在今后的学习过程中更加细致一点。路漫漫其修远兮，让我们一起加油吧！