Rainbond 中Vue、React項目如何調用後端接口

Rainbond中怎麼部署 Vue 、React 項目請參考 Rainbond部署Vue、React項目html

前言

以往咱們在部署前端項目後，調用後端接口有如下幾種場景：前端

後端接口沒有統一，比較分散，例如：/system/user,/tool/gen 。vue

一般咱們會在項目的全局配置文件 .env.production中直接寫入後端ip，例如：java
```
ENV = 'production'
VUE_APP_BASE_API = '192.168.6.66:8080'
```
這樣寫雖能夠正常訪問，但會致使產生跨域問題。mysql
後端接口統一，例如：/api/system/user, /api/tool/gen。react

大部分小夥伴也仍是一樣會直接把IP + 後綴寫入到項目全局配置文件，例如：nginx
```
ENV = 'production'
VUE_APP_BASE_API = '192.168.6.66:8080/api'
```
這樣寫固然了也會有跨域的問題。git

那咱們該怎麼解決接口不統一或接口統一的跨域問題呢。redis

答：使用Nginx 反向代理。sql

大部分小夥伴用nginx都是項目打包完的dist包丟進nginx，配置個 location proxy_pass 反向代理後端，而後在項目全局配置裏填寫Nginx地址。醬紫仍是會跨越哦😋。那究竟該怎麼處理呢，請往下看👇

解決跨域對於不一樣的場景有如下幾種方法：

接口沒有統一

接口數量較少的話，好比只有幾個接口system tool moitor login getmenu等。

首先須要修改全局配置文件.env.production 的請求api 爲**/**，醬紫寫前端發起請求的時候會直接轉發到nginx。
```
ENV = 'production'
VUE_APP_BASE_API = '/'
```
其次修改Nginx配置文件，添加多個location，在瀏覽器請求的時候就會匹配到nginx的location規則，例如：

瀏覽器請求菜單：http://192.168.6.66/getmenu，會匹配 location /getmenu規則反向代理到後端。
```
server {
      listen       5000;
  		#靜態頁面
      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/;
      }
  }
```
這種方式當然能夠，但對於接口幾十個上百個一一配置很麻煩。
接口數量不少。

一樣首先也須要修改全局配置文件.env.production，修改請求接口爲 api，這個接口自定義的。有的小夥伴就疑問了，我沒有這個接口呀，請接着往下看。
```
ENV = 'production'
VUE_APP_BASE_API = '/api'
```
緊接着修改Nginx配置文件，在nginx配置文件中添加了location /api，而且添加了 rewrite、proxy_pass，這個 rewrite是URL重寫。

例如：請求 http://192.168.6.66/api/system/menu，醬紫請求正常狀況發送到後端，後端會報錯是沒有這個接口的。

咱們經過rewrite 重寫URL，此時URL就會變成http://192.168.6.66/system/menu而且經過proxy_pass反向代理到後端，此時發送接口請求/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模塊，在這裏簡單介紹下：

rewrite ^/api/(.*)$ /$1 break

關鍵字正則替代內容 flag標記

接口統一

對於這種就比較好處理了。

一樣首先也是修改項目的全局配置文件.env.production，修改請求接口爲 /prod-api。這個統一接口是後端提供的哈。

ENV = 'production'
VUE_APP_BASE_API = '/prod-api'

修改Nginx配置文件，增長一條location，反向代理到後端地址。

此時在瀏覽器請求的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;
    }
}

跨域問題解決了，那咱們開始實踐一次😁。

本次前端的配置就是上面說的接口統一的方式

接下來部署一個SpringBoot後端項目來配合前端一塊兒使用。

源碼部署後端

本項目源碼地址https://gitee.com/zhangbigqi/RuoYi-Vue.git Fork開源項目若依
後端是SpringBoot + Mysql + Redis 架構。

Dockerfile源碼構建部署Mysql

參考博客文章Rainbond 中用 Dockerfile 便捷構建運行應用

經過Dockerfile源碼構建部署Mysql。參考文檔Dockerfile源碼構建

Dockerfile源碼構建須要在項目所需Sql目錄放置Dockerfile文件自動初始化數據庫。

Dockerfile文件可參考https://gitee.com/zhangbigqi/RuoYi-Vue.git 此項目下的 sql 目錄
填寫源碼倉庫地址，填寫Mysql子目錄 sql，構建Mysql。
確認建立組件，平臺會自動識別語言爲 dockerfile。
建立，等待構建組件完成便可。
構建完成後，在組件 > 端口中打開對內服務而且修改 別名，點擊便可修改，改成MYSQL_HOST,以供後端鏈接時使用。

Docker鏡像部署Redis

經過 docker鏡像部署redis，具體參考官方文檔docker鏡像構建
使用 redis 官方鏡像，redis:latest
確認建立，平臺會檢測出來一些鏡像信息，直接建立便可。
構建完成後，在組件 > 端口中打開對內服務。以供後端鏈接使用

Java源碼構建部署 SpringBoot

這裏提早修改了後端項目裏的配置文件 ruoyi-admin/src/main/resources/application-druid.yml鏈接數據庫的配置，改成了環境變量鏈接，這裏就用到了上面修改的端口別名。以及修改了ruoyi-admin/src/main/resources/application.yml文件中的鏈接Redis配置
```
# 主庫數據源
  master:
      url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/ry-vue?
  redis:
      # 地址
      host: 127.0.0.1
      # 端口，默認爲6379
      port: 6379
```
經過Java源碼構建項目，具體參考官方文檔JAVA源碼構建
填寫源碼倉庫地址，構建SpringBoot項目。
平臺會根據項目根目錄的 pom.xml 文件檢測是什麼項目，這裏檢測的是多模塊項目。
進入多模塊構建，勾選ruoyi-admin模塊，此模塊是可運行的，其餘模塊都是依賴。具體模塊功能參考若依官方文檔
可修改Maven構建參數，無特殊要求無需修改。
確認建立，等待構建完成。

這裏須要注意，平臺默認使用openjdk ，此項目須要使用oraclejdk來生成前端驗證碼。

須要在組件 > 構建源中修改 JDK類型爲自定義JDK，填寫自定義JDK下載路徑。

自定義JDK下載地址：https://buildpack.oss-cn-shanghai.aliyuncs.com/jdk/jdk1.8.0.tgz

須要打開 禁用緩存按鈕，防止包不同出現奇奇怪怪的問題。構建成功後再把禁用緩存關閉，下次構建就緩存正確的包了。
修改後 保存修改。構建組件，等待構建完成，修改端口爲 8080 。
進入拓撲圖界面，切換爲編輯模式，創建組件依賴關係。
- **ruoyi-ui **鏈接 ruoyi-admin。
- **ruoyi-admin **鏈接 Mysql、Redis。
更新組件ruoyi-ui ruoyi-admin，至此完成。
最終效果，拓撲圖：

頁面效果：

Rainbond 雲原生應用管理平臺，實現微服務架構不用改代碼，管理 Kubernetes 不用學容器，幫企業實現應用上雲，一站式將任何企業應用持續交付到 Kubernetes 集羣、混合雲、多雲等基礎設施。是 Rainstore 雲原生應用商店的支撐平臺。

1. Rainbond 官網

2. Rainbond 安裝使用

3. Rainbond 參考手冊全集

本文做者：張齊