10分鐘在 Rainbond 上部署 mall 電商專案

Rainbond發表於2023-01-12
AI

很多小夥伴在學習 mall 電商專案時，都會在部署上折騰許久，雖然目前已經提供了很多種部署方式，比如 在 Linux 上部署 mall 、使用 Docker 或 DockerCompose 部署 mall ，但對於正在學習的我們都顯得比較複雜，需要理解並學習這些容器技術。而本文將使用 Rainbond 部署 mall 電商專案，透過 Rainbond 部署 mall 商城專案非常方便、簡單，讓我們專注於程式碼，Rainbond 是一個雲原生應用管理平臺，使用簡單，不需要懂容器、Kubernetes和底層複雜技術，輕鬆的在 Kubernetes 上部署應用並體驗 Kubernetes 帶來的能力。

本文介紹在 Rainbond 上的兩種部署 mall 電商專案的方式：

  1. 透過 Rainbond 開源應用商店快速部署 mall
  2. 從 0 開始部署 mall 專案所有服務

前提

安裝可用的 Rainbond 環境，Linux、Mac、Win上均可安裝，參閱 Rainbond 快速安裝

透過應用商店快速部署 mall

mall 電商專案已釋出到 Rainbond 開源應用商店，可以透過開源應用商店一鍵部署，在 平臺管理 -> 應用市場 -> 開源應用商店 中搜尋 mall 並安裝。

此時 Rainbond 會自動構建、啟動 mall 所有服務，只需等待即可，部署完成後拓撲圖如下：

訪問 mall-admin-web 前端專案驗證部署，預設使用者密碼：admin / macro123

mall-portal 和 mall-search 暫時沒有前端，可以訪問後端 swagger 驗證部署 http://xxx/swagger-ui/，如下：

從零開始部署 mall

中介軟體部署

mall 需要用到的中介軟體有：Mysql Redis RabbitMQ MongoDB ElasticSearch，這些中介軟體都可以透過 Rainbond 開源應用商店部署。

安裝 Redis

在開源應用商店中搜尋 Redis 並安裝 5.x 版本

安裝 MongoDB

在開源應用商店中搜尋 MongoDB 並安裝 4.x 版本

安裝 RabbitMQ

在開源應用商店中搜尋 RabbitMQ 並安裝

安裝 MySQL

在開源應用商店中搜尋 MySQL 並安裝 5.7 版本

  1. 在 Mysql 元件 -> 埠 開啟對外埠服務，透過 IP:PORT 連線，預設使用者密碼 root / root
  2. 透過工具連線並匯入 mall sql 資料。

安裝 ElasticSearch

在開源應用商店中搜尋 ElasticSearch 並安裝 7.15.2 版本

  • ElasticSearch 應用包含了 Kinbana，如不需要可刪除 Kinbana 元件
  • ElasticSearch 預設開啟了密碼驗證，在 元件 -> 環境配置 -> 配置檔案設定 編輯配置檔案將 xpack.security.enabled 設定為 false 並更新元件生效。

安裝中文分詞器 IK Analyzer

  1. 首先在 團隊檢視 -> 外掛 -> 新增外掛 -> 透過應用商店安裝外掛 搜尋 ES-IK-Analysis 並安裝外掛
  2. 為 ElasticSearch 元件新增儲存，元件 -> 儲存 -> 新增儲存
    • 名稱：自定義
    • 掛載路徑：/usr/share/elasticsearch/plugins
    • 型別：共享儲存
  3. 進入 元件 -> 外掛 -> 未開通，開通 ES-IK-Analysis 外掛
  4. 更新或重啟 ElasticSearch 元件即可生效。

部署 mall 後端服務

修改專案程式碼配置

註釋主 pom.xml 檔案中的 execution 部分，不需要在專案中配置 Docker 打包專案，打包工作交給 Rainbond 處理，pom.xml 配置如下：

<!-- 
<execution>
  <id>build-image</id>
  <phase>package</phase>
  <goals>
    <goal>build</goal>
  </goals>
</execution>
-->

修改 mall-admin 服務的 application-dev.yml 檔案，內容如下：

spring:
  datasource:
    url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/${MYSQL_DATABASE}?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false #MySQL連線地址
    username: ${MYSQL_USERNAME} #MySQL使用者
    password: ${MYSQL_PWD} #MySQL密碼
  ......
  redis:
    host: ${REDIS_HOST} #Redis連線地址
  ......

修改 mall-portal 服務的 application-dev.yml 檔案，內容如下：

spring:
  datasource:
    url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/${MYSQL_DATABASE}?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false #MySQL連線地址
    username: ${MYSQL_USERNAME} #MySQL使用者
    password: ${MYSQL_PWD} #MySQL密碼
  ......
  data:
    mongodb:
      host: ${MONGODB_HOST} #MySQL連線地址為環境變數
      port: 27017
      database: mall-port
  redis:
    host: ${REDIS_HOST} #Redis伺服器地址
  ......
  rabbitmq:
    host: ${AMQP_HOST} #RabbitMQ 連線地址
    virtual-host: ${RABBITMQ_DEFAULT_VHOST} #RabbitMQ virtual host
    username: ${RABBITMQ_DEFAULT_USER} #RabbitMQ 使用者
    password: ${RABBITMQ_DEFAULT_PASS} #RabbitMQ 密碼
  ......

修改 mall-search 服務的 application-dev.yml 檔案，內容如下：

spring:
  datasource:
    url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/${MYSQL_DATABASE}?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false #MySQL連線地址
    username: ${MYSQL_USERNAME} #MySQL使用者
    password: ${MYSQL_PWD} #MySQL密碼
  ......
  elasticsearch:
    uris: ${ES_HOST}:${ES_PORT} #ElasticSearch連線地址
  ......

為什麼都要改成環境變數的方式呢，因為這樣更靈活，只需修改簡單的變數配置可以讓 mall 專案在任何環境中執行。而在 Rainbond 中，元件之間建立了依賴關係之後，會自動注入被依賴元件的環境變數，這樣我們連環境變數都不用配置，更加方便，原理可參閱 Rainbond 元件之間的環境變數注入。

部署後端元件

在團隊檢視或應用檢視 新增從原始碼建立元件:

  • 元件名稱：自定義
  • 元件英文名稱：自定義
  • 倉庫地址：https://github.com/zzzhangqi/mall.git
  • 程式碼版本：master

以上倉庫已經修改了上述的程式碼配置

此時 Rainbond 會檢測到專案為多模組專案，進入多模組專案構建：勾選 mall-admin、mall-portal、mall-search 並構建。

進入每個元件內 -> 埠，刪除預設的 5000 埠，新增新的元件對應埠：

  • mall-admin：8080
  • mall-portal：8085
  • mall-search：8081

建立元件間的依賴關係

在應用內，切換到編輯模式，按照以下依賴關係並建立連線：

給元件之間新增依賴

部署 mall 前端服務

很多時候我們的後端服務一般是不對外提供訪問的，如果採用現在的配置那麼在部署的時候，config/prod.env.js 中後端的地址就必須與前端的訪問地址一樣，如果不一樣則會產生跨域，如下：

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://admin-api.xxx.com"'
}

如何不暴露後端服務的同時又能解決跨域，可以使用 Nginx 反向代理後端服務。

在 config/prod.env.js 定義一個不存在的介面，比如 /api

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"/api"'
}

比如現在前端訪問登陸介面的 URL 是 /api/admin/login ，顯然 /api 不是我們的介面，/admin/login 才是，那麼透過 Nginx URL 重寫，把 /api 重寫，訪問到後端的介面就是 /admin/login 此時介面正確就可以正常返回資料，也能解決跨域問題同時後端服務也不用對外暴露。

server {
    listen 80;

    location / {
      root /app/www;
      index index.html index.htm;
    }

    location  /api {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:8080;
    }
}

部署前端元件

在團隊檢視或應用檢視 新增從原始碼建立元件:

  • 元件名稱：自定義
  • 元件英文名稱：自定義
  • 倉庫地址：https://github.com/zzzhangqi/mall-admin-web.git
  • 程式碼版本：master

以上倉庫已經新增了上述配置

新增 mall-admin-web 依賴於 mall-admin

驗證部署

訪問 mall-admin-web 前端專案驗證部署，預設使用者密碼：admin / macro123。mall-portal 和 mall-search 暫時沒有前端，可以訪問後端 swagger 驗證部署 http://xxx/swagger-ui/

最後

下一期出在 Rainbond 上部署 mall-swarm 微服務專案實踐。

相關文章