如何打通前端dist和后端jar？

前端dist和后端jar已经分别独立部署到服务器上，这篇博客是对下面两篇博客的延续。

• 如何部署前端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

如何暴露出一个公网可访问的接口，例如GET aryaapi.frankkai.cn/users？

• 主机8080端口运行包含tomcat的jar包
• 腾讯云服务器添加新的域名解析aryaapi.frankkai.cn到主机

主机8080端口运行包含tomcat的jar包

java -jar /usr/java/arya-spring-vue-be-0.0.1-SNAPSHOT.jar
复制代码

腾讯云服务器添加新的域名解析aryaapi.frankkai.cn到主机

这里的主机指的是运行java服务端服务的主机。

可使用curl aryaapi.frankkai.cn/users查看服务端接口是否成功部署。

9-11-30 15:19:56.554  INFO 17978 --- [nio-8080-exec-1] o.h.h.i.QueryTranslatorFactoryInitiator  : HHH000397: Using ASTQueryTranslatorFactory
Hibernate: 
    select
        user0_.id as id1_0_,
        user0_.age as age2_0_,
        user0_.CreateTime as CreateTi3_0_,
        user0_.email as email4_0_,
        user0_.name as name5_0_,
        user0_.sex as sex6_0_,
        user0_.UpdateTime as UpdateTi7_0_ 
    from
        Users user0_
复制代码

[]%
复制代码

看到spring有打印日志，curl也有正常返回，那么说明部署成功。

arya-spring-vue-fe前端调用arya-spring-vue-be接口该如何修改配置？

• 修改前端接口调用配置，从新打包上传dist
• 修改服务端跨域容许域名，从新打包上传jar并从新运行

修改前端接口调用配置，从新打包上传dist

github.com/arya-spring…

修改前：

const config = {
  ARYA_SPRING_VUE_BE: "http://localhost:8080"
};
export default config;
复制代码

修改后：

const config = {
  ARYA_SPRING_VUE_BE: "http://aryaapi.frankkai.cn:8080"
};
export default config;
复制代码

修改服务端跨域容许域名，从新打包上传jar并从新运行

修改前：

.allowedOrigins("http://localhost:3000")
复制代码

修改后：

.allowedOrigins("http://arya.frankkai.cn")
复制代码

从新打包出jar包上传并运行。 若是不修改，会报403的错误。

这一步作完以后，其实就能够作到打通前端dist和后端jar了。

咱们能够经过这样去访问应用：http://arya.frankkai.cn/index.html#/user。

如何使用nginx反向代理fooapi.bar.cn隐藏8080端口？

• 添加nginx反向代理配置
• 修改前端接口配置打包上传dist

添加nginx反向代理配置

上面已经作到了先后端打通且可访问，可是在network中咱们看到，接口调用是http://aryaapi.frankkai.cn:8080/spring/vue/readUsers的形式。

太暴露很差。有没有办法去掉8080端口呢？

那固然是nginx的反向代理了，配置以下：

server {
        listen       80;
        server_name  aryaapi.frankkai.cn;
        location / {
            proxy_pass http://127.0.0.1:8080;
        }
    }
复制代码

小插曲：添加了这个反向代理配置后，接口一直报405 Not Allowed。试了add_header添加可跨域头，可跨域源，重启nginx等等方法都不生效，最后重启机器竟然好了。重启大法果真好。

修改前端接口配置打包上传dist

修改前：

const config = {
  ARYA_SPRING_VUE_BE: "http://http://aryaapi.frankkai.cn:8080"
};
export default config;
复制代码

修改后：

const config = {
  ARYA_SPRING_VUE_BE: "http://aryaapi.frankkai.cn"
};
export default config;
复制代码

从新打包上传dist包便可。

此时再访问http://arya.frankkai.cn/index.html#/user，接口调用就直接http://aryaapi.frankkai.cn/spring/vue/readUsers的形式了。

使用nginx反向代理fooapi.bar.cn隐藏8080端口成功！

原文：github.com/arya-spring…