Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何打通前端dist和后端jar? #3

Open
FrankKai opened this issue Nov 30, 2019 · 3 comments
Open

如何打通前端dist和后端jar? #3

FrankKai opened this issue Nov 30, 2019 · 3 comments

Comments

@FrankKai
Copy link
Contributor

FrankKai commented Nov 30, 2019

前端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
@FrankKai
Copy link
Contributor Author

FrankKai commented Nov 30, 2019

如何暴露出一个公网可访问的接口,例如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到主机

image
这里的主机指的是运行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也有正常返回,那么说明部署成功。

@FrankKai
Copy link
Contributor Author

FrankKai commented Nov 30, 2019

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

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

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

https://github.com/arya-spring-vue/arya-spring-vue-fe/blob/master/src/config/master.ts

修改前:

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

image

@FrankKai
Copy link
Contributor Author

FrankKai commented Nov 30, 2019

如何使用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端口成功!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant