如何打通前端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…