前端dist和后端jar已經(jīng)分別獨立部署到服務(wù)器上，這篇博客是對下面兩篇博客的延續(xù)。
那么，怎樣打通前后端，產(chǎn)出一個完整的線上項目呢？
這篇博客主要基于arya-spring-vue項目探索如何打通前端dist與后端jar，從而完成一個完整的包含前后端開發(fā)到運維的完整項目。
主要包含以下內(nèi)容：
- 如何暴露出一個公網(wǎng)可訪問的接口，例如GET aryaapi.frankkai.cn/users？
- 主機8080端口運行包含tomcat的jar包
- 騰訊云服務(wù)器添加新的域名解析aryaapi.frankkai.cn到主機
- arya-spring-vue-fe前端調(diào)用arya-spring-vue-be接口該如何修改配置？
- 修改前端接口調(diào)用配置，重新打包上傳dist
- 修改服務(wù)端跨域允許域名，重新打包上傳jar并重新運行
- 如何使用nginx反向代理fooapi.bar.cn隱藏8080端口？
- 添加nginx反向代理配置
- 修改前端接口配置打包上傳dist
如何暴露出一個公網(wǎng)可訪問的接口，例如GET aryaapi.frankkai.cn/users？
- 主機8080端口運行包含tomcat的jar包
- 騰訊云服務(wù)器添加新的域名解析aryaapi.frankkai.cn到主機
主機8080端口運行包含tomcat的jar包
java -jar /usr/java/arya-spring-vue-be-0.0.1-SNAPSHOT.jar
騰訊云服務(wù)器添加新的域名解析aryaapi.frankkai.cn到主機
這里的主機指的是運行java服務(wù)端服務(wù)的主機。
可以使用curl aryaapi.frankkai.cn/users查看服務(wù)端接口是否成功部署。
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前端調(diào)用arya-spring-vue-be接口該如何修改配置？
- 修改前端接口調(diào)用配置，重新打包上傳dist
- 修改服務(wù)端跨域允許域名，重新打包上傳jar并重新運行
修改前端接口調(diào)用配置，重新打包上傳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;
修改服務(wù)端跨域允許域名，重新打包上傳jar并重新運行
修改前：
.allowedOrigins("http://localhost:3000")
修改后：
.allowedOrigins("http://arya.frankkai.cn")
重新打包出jar包上傳并運行。
如果不修改，會報403的錯誤。
這一步做完之后，其實就可以做到打通前端dist和后端jar了。
我們可以通過這樣去訪問應(yīng)用：http://arya.frankkai.cn/index.html#/user。
如何使用nginx反向代理fooapi.bar.cn隱藏8080端口？
- 添加nginx反向代理配置
- 修改前端接口配置打包上傳dist
添加nginx反向代理配置
上面已經(jīng)做到了前后端打通且可訪問，但是在network中我們看到，接口調(diào)用是http://aryaapi.frankkai.cn:8080/spring/vue/readUsers的形式。
太暴露不好。有沒有辦法去掉8080端口呢？
那當(dāng)然是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，接口調(diào)用就直接http://aryaapi.frankkai.cn/spring/vue/readUsers的形式了。
使用nginx反向代理fooapi.bar.cn隱藏8080端口成功！
原文：https://github.com/arya-spring-vue/arya-spring-vue-dp/issues/3
期待和大家交流，共同進(jìn)步，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關(guān)的技術(shù)討論小組：
- SegmentFault技術(shù)圈:ES新規(guī)范語法糖
- SegmentFault專欄：趁你還年輕，做個優(yōu)秀的前端工程師
- 知乎專欄：趁你還年輕，做個優(yōu)秀的前端工程師
- Github博客: 趁你還年輕233的個人博客
- 前端開發(fā)QQ群：660634678
微信公眾號： 人獸鬼 / excellent_developers
努力成為優(yōu)秀前端工程師！
