Rainbond調(diào)用Vue?React項(xiàng)目的后端接口
Rainbond中怎么部署 Vue 、React 項(xiàng)目請(qǐng)參考 Rainbond部署Vue、React項(xiàng)目
前言
以往我們?cè)诓渴鹎岸隧?xiàng)目后，調(diào)用后端接口有以下幾種場(chǎng)景：
后端接口沒(méi)有統(tǒng)一，比較分散，例如：/system/user,/tool/gen 。
通常我們會(huì)在項(xiàng)目的全局配置文件.env.production中直接寫(xiě)入后端ip，例如：
ENV = 'production' VUE_APP_BASE_API = '192.168.6.66:8080'
這樣寫(xiě)雖可以正常訪問(wèn)，但會(huì)導(dǎo)致產(chǎn)生跨域問(wèn)題。
后端接口統(tǒng)一，例如：/api/system/user, /api/tool/gen。
大部分小伙伴也還是同樣會(huì)直接把IP + 后綴寫(xiě)入到項(xiàng)目全局配置文件，例如：
ENV = 'production' VUE_APP_BASE_API = '192.168.6.66:8080/api'
這樣寫(xiě)當(dāng)然了也會(huì)有跨域的問(wèn)題。
那我們?cè)撛趺唇鉀Q接口不統(tǒng)一或接口統(tǒng)一的跨域問(wèn)題呢。
? 答：使用Nginx 反向代理。
? 大部分小伙伴用nginx都是項(xiàng)目打包完的dist包丟進(jìn)nginx，配置個(gè) location proxy_pass 反向代理后端，然后在項(xiàng)目全局配置里填寫(xiě)Nginx地址。醬紫還是會(huì)跨越哦。那究竟該怎么處理呢，請(qǐng)往下看
解決跨域?qū)τ诓煌膱?chǎng)景有以下幾種方法：
接口沒(méi)有統(tǒng)一
接口數(shù)量較少的話，比如只有幾個(gè)接口system tool moitor login getmenu等。
首先需要修改全局配置文件.env.production 的請(qǐng)求api 為**/**，醬紫寫(xiě)前端發(fā)起請(qǐng)求的時(shí)候會(huì)直接轉(zhuǎn)發(fā)到nginx。
ENV = 'production' VUE_APP_BASE_API = '/'
其次修改Nginx配置文件，添加多個(gè)location，在瀏覽器請(qǐng)求的時(shí)候就會(huì)匹配到nginx的location規(guī)則，例如：
? 瀏覽器請(qǐng)求菜單：http://192.168.6.66/getmenu，會(huì)匹配 location /getmenu規(guī)則反向代理到后端。
server {
listen 5000;
#靜態(tài)頁(yè)面
location / {
root /app/www;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /getmenu{
proxy_pass http://127.0.0.1:8080/;
}
}
這種方式固然可以，但對(duì)于接口幾十個(gè)上百個(gè) 一一配置很麻煩。
接口數(shù)量很多。
同樣首先也需要修改全局配置文件.env.production，修改請(qǐng)求接口為 api，這個(gè)接口自定義的。有的小伙伴就疑問(wèn)了，我沒(méi)有這個(gè)接口呀，請(qǐng)接著往下看。
ENV = 'production' VUE_APP_BASE_API = '/api'
緊接著修改Nginx配置文件，在nginx配置文件中添加了location /api，并且添加了 rewrite、proxy_pass，這個(gè) rewrite是URL重寫(xiě)。
例如：請(qǐng)求 http://192.168.6.66/api/system/menu，醬紫請(qǐng)求正常情況發(fā)送到后端，后端會(huì)報(bào)錯(cuò)是沒(méi)有這個(gè)接口的。
我們通過(guò)rewrite 重寫(xiě)URL，此時(shí)URL就會(huì)變成http://192.168.6.66/system/menu并且通過(guò)proxy_pass反向代理到后端，此時(shí)發(fā)送接口請(qǐng)求/system/menu，后端正常返回。
server {
listen 5000;
location / {
root /app/www;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /api {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://192.168.2.182:8080;
}
}
rewrite ^/api/(.*)$ /$1 break具體可參考Nginx官方文檔rewrite_module模塊，在這里簡(jiǎn)單介紹下：
? rewrite ^/api/(.*)$ /$1 break
? 關(guān)鍵字 正則 替代內(nèi)容 flag標(biāo)記
接口統(tǒng)一
對(duì)于這種就比較好處理了。
同樣首先也是修改項(xiàng)目的全局配置文件.env.production，修改請(qǐng)求接口為 /prod-api。這個(gè)統(tǒng)一接口是后端提供的哈。
ENV = 'production' VUE_APP_BASE_API = '/prod-api'
修改Nginx配置文件，增加一條location，反向代理到后端地址。
此時(shí)在瀏覽器請(qǐng)求的URL則為：http://192.168.6.66/prod-api/system/menu。
server {
listen 5000;
location / {
root /app/www;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api {
proxy_pass http://192.168.2.182:8080;
}
}
跨域問(wèn)題解決了，那我們開(kāi)始實(shí)踐一次。
本次前端的配置就是上面說(shuō)的接口統(tǒng)一的方式
接下來(lái)部署一個(gè)SpringBoot后端項(xiàng)目來(lái)配合前端一起使用。
源碼部署后端
本項(xiàng)目源碼地址 Fork開(kāi)源項(xiàng)目 若依
后端是SpringBoot + Mysql + Redis 架構(gòu)。
Dockerfile源碼構(gòu)建部署Mysql
參考官方文檔Rainbond 中用 Dockerfile 便捷構(gòu)建運(yùn)行應(yīng)用
通過(guò)Dockerfile源碼構(gòu)建部署Mysql。
? Dockerfile源碼構(gòu)建需要在項(xiàng)目所需Sql目錄放置Dockerfile文件自動(dòng)初始化數(shù)據(jù)庫(kù)。
? Dockerfile文件可參考https://gitee.com/zhangbigqi/RuoYi-Vue.git 此項(xiàng)目下的 sql 目錄
填寫(xiě)源碼倉(cāng)庫(kù)地址，填寫(xiě)Mysql子目錄 sql，構(gòu)建Mysql。
確認(rèn)創(chuàng)建組件，平臺(tái)會(huì)自動(dòng)識(shí)別語(yǔ)言為 dockerfile。
創(chuàng)建，等待構(gòu)建組件完成即可。
構(gòu)建完成后，在組件 > 端口中打開(kāi)對(duì)內(nèi)服務(wù)并且修改 別名，點(diǎn)擊即可修改，改為MYSQL_HOST,以供后端連接時(shí)使用。
Docker鏡像部署Redis
通過(guò) docker鏡像部署redis，具體參考官方文檔docker鏡像構(gòu)建
使用 redis 官方鏡像，redis:latest
確認(rèn)創(chuàng)建，平臺(tái)會(huì)檢測(cè)出來(lái)一些鏡像信息，直接創(chuàng)建即可。
構(gòu)建完成后，在組件 > 端口中打開(kāi)對(duì)內(nèi)服務(wù)。以供后端連接使用
Java源碼構(gòu)建部署 SpringBoot
這里提前修改了后端項(xiàng)目里的配置文件 ruoyi-admin/src/main/resources/application-druid.yml連接數(shù)據(jù)庫(kù)的配置，改為了環(huán)境變量連接，這里就用到了上面修改的端口別名。
以及修改了ruoyi-admin/src/main/resources/application.yml文件中的連接Redis配置
# 主庫(kù)數(shù)據(jù)源
master:
url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/ry-vue?
redis:
# 地址
host: 127.0.0.1
# 端口，默認(rèn)為6379
port: 6379
通過(guò)Java源碼構(gòu)建項(xiàng)目，具體參考官方文檔JAVA源碼構(gòu)建
填寫(xiě)源碼倉(cāng)庫(kù)地址，構(gòu)建SpringBoot項(xiàng)目。
平臺(tái)會(huì)根據(jù)項(xiàng)目根目錄的 pom.xml 文件檢測(cè)是什么項(xiàng)目，這里檢測(cè)的是多模塊項(xiàng)目。
進(jìn)入多模塊構(gòu)建，勾選ruoyi-admin模塊，此模塊是可運(yùn)行的，其他模塊都是依賴。具體模塊功能參考若依官方文檔
可修改Maven構(gòu)建參數(shù)，無(wú)特殊要求無(wú)需修改。
確認(rèn)創(chuàng)建，等待構(gòu)建完成。
? 這里需要注意，平臺(tái)默認(rèn)使用openjdk ，此項(xiàng)目需要使用oraclejdk來(lái)生成前端驗(yàn)證碼。
? 需要在組件 > 構(gòu)建源中修改 JDK類型為自定義JDK，填寫(xiě)自定義JDK下載路徑。
自定義JDK下載地址：http://m.fzitv.net/softs/596666.html
需要打開(kāi) 禁用緩存按鈕，防止包不一樣出現(xiàn)奇奇怪怪的問(wèn)題。構(gòu)建成功后再把禁用緩存關(guān)閉，下次構(gòu)建就緩存正確的包了。
修改后 保存修改。構(gòu)建組件，等待構(gòu)建完成，修改端口為 8080 。
進(jìn)入拓?fù)鋱D界面，切換為編輯模式，建立組件依賴關(guān)系。
**ruoyi-ui **連接 ruoyi-admin。**ruoyi-admin **連接 Mysql、Redis。
更新組件ruoyi-ui ruoyi-admin，至此完成。
最終效果，拓?fù)鋱D：
頁(yè)面效果：
Rainbond 云原生應(yīng)用管理平臺(tái)，實(shí)現(xiàn)微服務(wù)架構(gòu)不用改代碼，管理 Kubernetes 不用學(xué)容器，幫企業(yè)實(shí)現(xiàn)應(yīng)用上云，一站式將任何企業(yè)應(yīng)用持續(xù)交付到 Kubernetes 集群、混合云、多云等基礎(chǔ)設(shè)施。是 Rainstore 云原生應(yīng)用商店的支撐平臺(tái)。
以上就是Rainbond調(diào)用Vue React項(xiàng)目的后端接口的詳細(xì)內(nèi)容，更多關(guān)于Rainbond調(diào)用Vue React后端接口的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
k8s跨服務(wù)調(diào)用入門(mén)到實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了k8s跨服務(wù)調(diào)用入門(mén)到實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Spark實(shí)現(xiàn)K-Means算法代碼示例
這篇文章主要介紹了Spark實(shí)現(xiàn)K-Means算法代碼示例，簡(jiǎn)單介紹了K-Means算法及其原理，然后通過(guò)具體實(shí)例向大家展示了用spark實(shí)現(xiàn)K-Means算法，需要的朋友可以參考下。2017-10-10
Rainbond調(diào)用Vue?React項(xiàng)目的后端接口
這篇文章主要為大家介紹了Rainbond調(diào)用Vue?React項(xiàng)目的后端接口問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
k8s強(qiáng)制刪除一個(gè)Pod的詳細(xì)步驟
有時(shí)候遇到node宕機(jī)或者失聯(lián)太久導(dǎo)致pod一直處于Terminating狀態(tài),kubectl?delete又刪不掉,其實(shí)這個(gè)pod已經(jīng)確定已經(jīng)死了,需要強(qiáng)制把他摘掉,這篇文章主要給大家介紹了關(guān)于k8s強(qiáng)制刪除一個(gè)Pod的詳細(xì)步驟,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了十步驟Kubernetes部署的可視化地圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
kubernetes k8s 存儲(chǔ)動(dòng)態(tài)掛載配置詳解
這篇文章主要為大家介紹了kubernetes k8s 存儲(chǔ)動(dòng)態(tài)掛載配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
kubernetes部署dashboard及應(yīng)用小結(jié)
Dashboard?是基于網(wǎng)頁(yè)的?Kubernetes?用戶界面,可以對(duì)?Deployment?實(shí)現(xiàn)彈性伸縮、發(fā)起滾動(dòng)升級(jí)、重啟?Pod?或者使用向?qū)?chuàng)建新的應(yīng)用,這篇文章主要介紹了kubernetes部署dashboard,需要的朋友可以參考下2024-06-06
這篇文章介紹了Kubernetes集群環(huán)境初始化的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
詳解Rainbond云原生平臺(tái)簡(jiǎn)化Kubernetes業(yè)務(wù)問(wèn)題排查
這篇文章主要介紹了詳解Rainbond云原生平臺(tái)簡(jiǎn)化Kubernetes業(yè)務(wù)問(wèn)題排查，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
k8s實(shí)現(xiàn)身份認(rèn)證策略及過(guò)程解析
這篇文章主要為大家介紹了k8s實(shí)現(xiàn)身份認(rèn)證策略及過(guò)程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02