目录
前言
当一个前后端分离的项目写好之后,我们应该如何将其部署到服务器中呢?下面我们将在一个服务器中部署前端的vue项目,和后端的springboot项目,看看一个完整的前后端项目究竟是如何部署起来的吧!(声明:其中的前端vue代码来自B站黑马程序员的资料,后端的springboot代码是本人所写~)
一、宝塔必要软件安装
在正式部署之前,我们应该将前提条件准备好, 必要的有FTP、MySQL、PHP、phpMyAdmin、java项目一键部署,其中,PHP用来启动前端项目,phpMyAdmin用来开启一个新的网页管理MySQL数据库。
二、前端Vue项目部署
1. 确定端口号并打包项目
在正式将文件上传到服务器之前,我们先在本地启动一下前端项目,查看一下前端项目在本地启动时所占用的端口,如图所示:
在这里,我的端口号是9528 ,注意这个细节,后面在上传前端文件之后需要用到。
查看完端口号后,我们需要用将前端代码打包一下,打包完成之后,原本的目录会自动生成一个dist文件夹,打包后的代码便放在这个文件夹这中,之后我们需要把这个文件夹上传到服务器上。关于vue项目如何打包大家也可以参考下面这位博主的文章:
2. 打包文件夹上传
项目打包好之后, 我们可以选择将刚才打包好的dist文件夹上传到www/wwwroot/default下面(这个看个人选择),具体如下:
3. 创建站点
完成好文件夹的上传之后,我们需要借助PHP添加一个站点,还记得刚刚那个端口号吗?在建站的时候需要填入项目在本地启动时的那个端口号,具体注意事项如下图所示:
当网站建立好之后,我们需要返回云服务器的控制台配置一下入口规则,否则刚刚建立的网站将无法访问。具体如下:
当一切准备就绪之后,我们再输入相关的地址,就能够访问刚刚部署的前端应用了。
三、MySQL数据库准备
接下来,我们要将项目所要用到的数据在数据库中建立好。在这里,我采用sql脚本创建初始的数据。登录phpMyAdmin管理页面,账号填写root,密码可以在下图所示的地方查看。
进入管理页面后,新建一个需要的数据库,名字叫tlias,在该数据库中执行事先准备好的sql脚本。除了执行sql脚本,我们也可以导入本地电脑中的sql文件,这里就不再阐述了,大家可以参考一下下面这篇文章:
四、后端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>
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注解时不一定会起作用,这时候我们就需要去找其他的方法了。
总结
整体下来,部署一个前后端分离的项目不是特别容易,这个过程难免磕磕绊绊,会遇到一些奇奇怪怪的问题。不过,从这个过程中,我们也能够锻炼一下自己查找错误和解决问题的能力,让自己在今后的学习过程中更加细致一点。路漫漫其修远兮,让我们一起加油吧!