Open
Description
前端dist和后端jar已经分别独立部署到服务器上,这篇博客是对下面两篇博客的延续。
那么,怎样打通前后端,产出一个完整的线上项目呢?
这篇博客主要基于arya-spring-vue项目探索如何打通前端dist与后端jar,从而完成一个完整的包含前后端开发到运维的完整项目。
主要包含以下内容:
- 如何暴露出一个公网可访问的接口,例如GET aryaapi.frankkai.cn/users?
- 主机8080端口运行包含tomcat的jar包
- 腾讯云服务器添加新的域名解析aryaapi.frankkai.cn到主机
- arya-spring-vue-fe前端调用arya-spring-vue-be接口该如何修改配置?
- 修改前端接口调用配置,重新打包上传dist
- 修改服务端跨域允许域名,重新打包上传jar并重新运行
- 如何使用nginx反向代理fooapi.bar.cn隐藏8080端口?
- 添加nginx反向代理配置
- 修改前端接口配置打包上传dist
Activity
FrankKai commentedon Nov 30, 2019
如何暴露出一个公网可访问的接口,例如GET aryaapi.frankkai.cn/users?
主机8080端口运行包含tomcat的jar包
腾讯云服务器添加新的域名解析aryaapi.frankkai.cn到主机
这里的主机指的是运行java服务端服务的主机。
可以使用
curl aryaapi.frankkai.cn/users
查看服务端接口是否成功部署。看到spring有打印日志,curl也有正常返回,那么说明部署成功。
FrankKai commentedon Nov 30, 2019
arya-spring-vue-fe前端调用arya-spring-vue-be接口该如何修改配置?
修改前端接口调用配置,重新打包上传dist
https://github.com/arya-spring-vue/arya-spring-vue-fe/blob/master/src/config/master.ts
修改前:
修改后:
修改服务端跨域允许域名,重新打包上传jar并重新运行
修改前:
修改后:
重新打包出jar包上传并运行。
如果不修改,会报403的错误。
这一步做完之后,其实就可以做到打通前端dist和后端jar了。
我们可以通过这样去访问应用:
http://arya.frankkai.cn/index.html#/user
。FrankKai commentedon Nov 30, 2019
如何使用nginx反向代理fooapi.bar.cn隐藏8080端口?
添加nginx反向代理配置
上面已经做到了前后端打通且可访问,但是在network中我们看到,接口调用是
http://aryaapi.frankkai.cn:8080/spring/vue/readUsers
的形式。太暴露不好。有没有办法去掉8080端口呢?
那当然是nginx的反向代理了,配置如下:
小插曲:添加了这个反向代理配置后,接口一直报405 Not Allowed。试了add_header添加可跨域头,可跨域源,重启nginx等等方法都不生效,最后重启机器居然好了。重启大法果然好。
修改前端接口配置打包上传dist
修改前:
修改后:
重新打包上传dist包即可。
此时再访问
http://arya.frankkai.cn/index.html#/user
,接口调用就直接http://aryaapi.frankkai.cn/spring/vue/readUsers
的形式了。使用nginx反向代理fooapi.bar.cn隐藏8080端口成功!