vue和springboot项目部署到Linux服务器

写在前面的话

前后端分离的项目中,需要分别部署前端与后端项目。前端项目使用npm打包,将得到的dist文件夹下的内容上传到服务器后,用nginx的alias指向文件夹即可访问,而后端项目使用maven打包,需使用tomcat在后台启动,再通过nginx转发,供前端项目调用。

打包

前端的打包

前端项目使用的是vue-element-admin的基础版本:vue-admin-template

根据教程从github上下载后,在webstorm中运行成功。

原项目中只有前端,但可以完成简单的数据交互,根据使用手册介绍,该项目使用了mockjs模拟数据。

而我们需要做前后端交互,故不使用mockjs。

修改为访问后端的路径

方法很简单,在根目录下的.env.development文件下,将VUE_APP_BASE_API改为你的本地后端地址。

 

在根目录下的.env.production文件下,将VUE_APP_BASE_API改为你的云服务器的后端地址。

这里可能会有一些小bug,主要是要与服务器的路径对应起来。

根据该项目package.json内所设置的,使用npm run build:prod打包,生成dist文件夹

最后得到dist文件夹。

后端的打包

编写接口

首先,编写Controller,写一些接口。

此处使用的ResponseData来自于https://blog.csdn.net/weixin_33863087/article/details/89540234

处理跨域

新增一个config包装入跨域的配置类,来自于https://www.cnblogs.com/tonggc1668/p/11215932.html

打成war包

注意,原始的springboot项目默认将项目打成jar包,需要设置。

这里我备份一下我的pom.xml

需要注意的点是,第11行设置导出的格式为war,然后要去除内嵌的tomcat,还要引入一个servlet的依赖。最后在<build>标签内还要指定maven-war-plugin和maven-compiler-plugin两个插件。

同时,启动类也需要更改。

需要继承一个SpringBootServletInitializer 才能使用。

最后点击右边maven的package,在目录下的target找到.war的文件,打包就算完成了。

Linux服务器配置

tomcat依赖java,所以需要先装java。

tomcat配置

然后再装tomcat,这里建议使用源代码安装(其实解压就可以用了)

配置tomcat的conf/server.xml。

由于本次我们的后端只负责接收请求,故不需要配置<Engine>标签,只需要修改监听的端口号就行了。

将8080改为10081,并且设定一些参数。

后端部署

将刚才springboot打的war包放入webapps文件夹下,然后进入bin,启动。

输入./startup.sh 启动

关闭的话,./shutdown.sh会报错,看不太懂,但是我们可以用ps -ef |grep tomcat查看正在运行的tomcat,然后用kill -9 进程号 将其关闭

Nginx配置

这里依旧建议源代码安装(注意安装过程中可能会提示缺了什么插件,去查找然后装好就行了)

安装方法:

https://segmentfault.com/a/1190000007116797#articleHeader8

然后,建一个文件夹专门放前端项目。

将dist文件夹整个上传到服务器中,改个名。

配置Nginx

我们刚才在后端配置的时候写的端口号是10081,故在upstream内也写这个端口号。

而用户真正访问的端口是20081。

alias指向前端的文件夹,需是完整路径。

后端则用proxy_pass指向tomcat监听的端口。

nginx的启动:进入/sbin下,

启动 ./nginx

停止 ./nginx -s stop

启动顺序

先启动tomcat,再启动nginx即可。

结果