一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去
這是 Jerry 2021 年的第 40 篇文章,也是汪子熙公眾號總共第 317 篇原創(chuàng)文章。
Jerry 2018年曾經寫過兩篇文章,介紹了如何在 Kubernetes 這個容器編排平臺上運行一個包含 SAP UI5 應用的 Docker 鏡像。
-
在 Kubernetes 上運行 SAP UI5 應用(上)
-
在 Kubernetes 上運行 SAP UI5 應用(下)
SAP Kyma,是一個由 SAP 推進的開源的企業(yè)軟件擴展平臺,底層基于 Kubernetes,能以Serverless/微服務架構的方式,對 On-premise 和云應用進行擴展。
SAP Business Technology Platform (下文簡稱 BTP) 于 2020年開始支持 Kyma 運行環(huán)境。本文介紹如何把本地開發(fā)的 SAP UI5 應用,打包成 Docker 鏡像文件,然后部署并運行在 SAP BTP Kyma 運行環(huán)境里。
首先我們在本地開發(fā)一個 SAP UI5 應用。這個應用的源代碼,大家可以在 Github 下載。
這個 SAP UI5 應用的構建,采取 SAP UI5 Tool 提供的 Command Line Interface,即 @ui5/cli 完成。
使用命令行 npm run-script build, 調用 UI5 CLI 進行構建,得到生產版本的 SAP UI5 資源文件,存儲在項目工程的 dist 文件夾內。稍后我們制作 Docker 鏡像文件時,會使用 dist 文件夾內的資源文件。
使用命令行 npm run-script start,本地運行這個 SAP UI5 應用,界面如下:
應用顯示的這三條訂單數(shù)據(jù),維護在項目工程的 orders.json 文件內。
出于演示目的,我只實現(xiàn)了訂單列表顯示功能。而訂單添加,修改和刪除功能,大家可以自行實現(xiàn)。
下面我們繼續(xù)對該 SAP UI5 應用進行調整:將其訂單列表的數(shù)據(jù)源,從本地 orders.json 文件, 調整成消費 SAP BTP Kyma 上運行的 Serverless Function.
登錄 SAP BTP Cockpit,如今即便是 Trial 賬號,也能免費啟用 Kyma 運行環(huán)境。
點擊 Go to Dashboard,就能進入 Kyma 控制臺了:
在 dev 命名空間內,創(chuàng)建一個新的 Function:
Function 命名為 order-manager, 其實現(xiàn)技術棧選擇成 Node.js 12:
在函數(shù)實現(xiàn)源代碼的 Source 區(qū)域,將之前 SAP UI5 工程里的 orders.json 文件里的內容,拷貝到下圖函數(shù)編輯器里。保存之后,Function 狀態(tài)變?yōu)?RUNNING,立即可用。這體現(xiàn)了 Kyma Serveless 計算的優(yōu)勢:開發(fā)人員只需專注于函數(shù)業(yè)務邏輯的編寫,無需關心函數(shù)的部署和運行環(huán)境問題。
切換到 Function Configuration 面板,點擊 Expose Function,創(chuàng)建一個新的 API Rule,將該函數(shù)通過 HTTP 調用的方式,暴露給 Internet 上的其他消費者。
API Rule 按照下圖所示進行維護,其中 Service 下拉列表里顯示的,是創(chuàng)建 Function 時自動生成的同名 Service 資源。
API Rule 創(chuàng)建完畢后,點擊其 Host 字段,就能通過 HTTP 的方式,調用即執(zhí)行對應的 Function 了。
在瀏覽器里訪問該超鏈接,能看到我們在 Function 源代碼里,硬編碼的三條訂單數(shù)據(jù):
對 UI5 應用做簡單的調整,讓其消費部署在 SAP BTP Kyma 運行環(huán)境上剛剛創(chuàng)建的 Function. 至此我們完成了 UI5 應用的開發(fā),可以開始構建 Docker 鏡像文件了。
新建 Dockerfile 文件,該 Docker 鏡像構建具體分為兩個步驟,即所謂的多階段構建。首先,使用關鍵字 FROM,指定構建的基本鏡像為 node:current-slim,執(zhí)行 npm install 下載 SAP UI5 應用 package.json 文件里定義的依賴,然后執(zhí)行 npm run-script build,生成包含該 UI5 項目生產環(huán)境版本資源文件的 dist 文件夾。考慮到運行一個 SAP UI5 應用,只需要構建出的 dist 文件夾里的資源即可,而 node:current-slim 鏡像內的所有內容,與 SAP UI5 應用的運行毫無關系。因此,第10行代碼,我們用 FROM 指定了一個新的鏡像,即 nginx:alpine. 第11行用關鍵字 COPY,將前一鏡像構建出的 dist 文件夾的內容,拷貝到 nginx 工作目錄即 html 內,這樣能大大減小最后構建出的 Docker 鏡像的尺寸。
使用如下命令行構建 Docker 鏡像文件:
docker build -t i042416/ui5-kyma -f docker/Dockerfile .
注意,命令行末尾的".",代表當前目錄,而非命令行結束的標識符。
使用 docker push 命令,將該構建好的鏡像,上傳到 Docker Hub 去:
我們在本地測試一下這個構建好的 Docker 鏡像。
通過命令行本地啟動 Docker 容器:
docker run -p 1081:80 -d i042416/ui5-kyma
將鏡像內 nginx 對應的 80 端口,映射成本地宿主機的 1081 端口,然后瀏覽器打開 localhost:1081 ,確保 SAP UI5 應用能夠正常工作,并且檢查此時加載的資源,已經是 dist 文件夾里構建好的生產系統(tǒng)版本的文件,即 component-preload.js:
最后一步,將該 Docker 鏡像,通過 Kubernetes 規(guī)范部署到 SAP Kyma 上。可以使用 Kubernetes 提供的命令行工具 kubectl,也可使用 SAP Kyma 控制臺的圖形界面。
創(chuàng)建一個名為 deployment.yaml 的文件,里面定義一個名為 jerry-ui5-kyma 的 Deployment 資源,這是 Kubernetes 原生支持的資源類型之一。指定使用之前構建好并且上傳到 Docker Hub 的鏡像文件:i042416/ui5-kyma:
回到 Kyma 控制臺,菜單 Deployment new workload -> Upload YAML, 選擇前一步創(chuàng)建好的 deployment.yaml:
確保該 Deployment 處于 Running 狀態(tài):
最后基于 jerry-ui5-kyma 創(chuàng)建一個 API Rule,從而使其可以在 Internet 上被訪問。下圖高亮區(qū)域,即是被構建在 Docker 鏡像里的 SAP UI5 應用,在 SAP Kyma 運行環(huán)境里被訪問的 URL:
https://jerryui5kyma.c-46d70f2.kyma.shoot.live.k8s-hana.ondemand.com/
至此,我們已經逐步實現(xiàn)了本文開頭提出的任務:
(1) 本地開發(fā)一個 SAP UI5 應用
(2) 將該 SAP UI5 應用打包成 Docker 鏡像
(3) 通過 Kubernetes Deployment,將包含前一步的 Docker 鏡像,部署到 SAP Kyma 上并運行。
既然 SAP Kyma 底層基于 Kubernetes,所以當然也可以使用 Kubernetes 命令行工具 kubectl,直接操縱 SAP Kyma 資源。
在 SAP Kyma 控制臺右上角,點擊 Get kubeconfig 下載同名配置文件。
將下載到本地的 kubeconfig.yml 文件的路徑,配置成環(huán)境變量 KUBECONFIG.
執(zhí)行 kubectl version 命令行,能看到 kubectl 打印出客戶端和服務器端的 git 和 go 運行環(huán)境的版本號:
接下來就能使用 kubectl 命令行,查詢剛才下載好的 kubeconfig.yml 文件指向的 SAP Kyma 實例上運行的各種資源了。
比如使用如下命令行,查詢到 SAP UI5 應用運行的 pod 名稱為:jerry-ui5-kyma-785b458ff5-zm7xt
得到 pod 名稱后,使用命令行進入該 pod 默認容器,即 jerry-ui5-kyma 內部:
kubectl exec -it jerry-ui5-kyma-785b458ff5-zm7xt -n dev – /bin/sh
進入容器內部之后,切換到目錄 /usr/share/nginx/html, 這里能看到我們之前本地開發(fā)的 SAP UI5 的資源文件。 這些文件,正是由我們之前制作 Docker 鏡像時編寫的 Dockerfile 里的最后一行,通過 COPY 操作,從前一個 node 基準鏡像,執(zhí)行 npm run-script build 命令后構建而成的 UI5 生產版本的資源文件,拷貝到 nginx 鏡像的 /usr/share/nginx/html 目錄而生成的。
希望本文能夠幫助大家,對如何開發(fā) SAP UI5 應用,并部署和運行于 SAP Kyma 上的完整步驟,有一個直觀的了解。本文提到的 SAP UI5 應用,后續(xù)還有很多可以繼續(xù)增強的地方,比如實現(xiàn)訂單添加和刪除功能,并使用 Redis 進行持久化,同時將 Redis 服務也部署在 SAP Kyma 上,然后讓該 UI5 應用,消費 SAP Kyma 上的 Redis 服務,而非本文介紹的 Serverless Function. 大家可以試著自行實現(xiàn),或者等待本公眾號后續(xù)的分享。感謝閱讀。
更多閱讀
-
站在巨人肩膀上的牛頓:Kubernetes和SAP Kyma
-
在Kubernetes上運行SAP UI5應用(上)
-
在Kubernetes上運行SAP UI5應用(下)
-
WordPress,SAP Kyma和微信三者的集成
-
從ABAP Netweaver的SICF到SAP Kyma的Lambda Function
-
周伯通的空明拳,米諾斯的星塵傀儡線,SAP Kyma的Serverless
-
基于SAP Kyma的訂單編排增強介紹
-
第三方應用如何在SAP Kyma上進行服務注冊
更多Jerry的原創(chuàng)文章,盡在:“汪子熙”:
總結
以上是生活随笔為你收集整理的一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SAP UI5 Routing 路由介绍
- 下一篇: Python模拟随机漫步