這是 Jerry 2021 年的第 40 篇文章，也是汪子熙公眾號總共第 317 篇原創文章。

Jerry 2018年曾經寫過兩篇文章，介紹瞭如何在 Kubernetes 這個容器編排平臺上執行一個包含 SAP UI5 應用的 Docker 映象。

*   [在 Kubernetes 上執行 SAP UI5 應用(上）](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485598&idx=1&sn=adf1e5c77fb1d331f093ccd8e207ded6&chksm=ead5ba09dda2331fbc73c0d17c5db3f0da475e36b9ed0005314f3a656e484837ef1c6a061a75&scene=21#wechat_redirect)

*   [在 Kubernetes 上執行 SAP UI5 應用(下）](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485616&idx=1&sn=600ea4b9e3657abf8416af74ece1cd76&chksm=ead5ba27dda23331926221abe7bcba81256a9d7f329506789bd8eb73b62df09b20d902db27af&scene=21#wechat_redirect)

SAP Kyma，是一個由 SAP 推進的開源的企業軟體擴充套件平臺，底層基於 Kubernetes，能以Serverless/微服務架構的方式，對 On-premise 和雲應用進行擴充套件。

![](https://img-blog.csdnimg.cn/img_convert/ec7add382961acb62aefdb0fcc6e5a62.png)

SAP Business Technology Platform (下文簡稱 BTP) 於 2020年開始支援 Kyma 執行環境。本文介紹如何把本地開發的 SAP UI5 應用，打包成 Docker 映象檔案，然後部署並執行在 SAP BTP Kyma 執行環境裡。

首先我們在本地開發一個 SAP UI5 應用。這個應用的原始碼，大家可以在 [Github](https://github.com/wangzixi-diablo/ui5-for-kyma) 下載。

這個 SAP UI5 應用的構建，採取 SAP UI5 Tool 提供的 Command Line Interface，即 @ui5/cli 完成。

使用命令列 npm run-script build, 呼叫 UI5 CLI 進行構建，得到生產版本的 SAP UI5 資原始檔，儲存在專案工程的 dist 資料夾內。稍後我們製作 Docker 映象檔案時，會使用 dist 資料夾內的資原始檔。

![](https://img-blog.csdnimg.cn/img_convert/8af810f6f35697dae3f212b9218015e7.png)
使用命令列 npm run-script start，本地執行這個 SAP UI5 應用，介面如下：

![](https://img-blog.csdnimg.cn/img_convert/3d67290cd8615380b0ee69626b5e310a.png)

應用顯示的這三條訂單資料，維護在專案工程的 orders.json 檔案內。

![](https://img-blog.csdnimg.cn/img_convert/bda021a6915ecfd1856d11bf8e3a4951.png)
出於演示目的，我只實現了訂單列表顯示功能。而訂單新增，修改和刪除功能，大家可以自行實現。

下面我們繼續對該 SAP UI5 應用進行調整：將其訂單列表的資料來源，從本地 orders.json 檔案, 調整成消費 SAP BTP Kyma 上執行的 Serverless Function.

登入 SAP BTP Cockpit，如今即便是 Trial 賬號，也能免費啟用 Kyma 執行環境。

![](https://img-blog.csdnimg.cn/img_convert/f1164887127e2592bf174da55c6c6fee.png)

點選 Go to Dashboard，就能進入 Kyma 控制檯了：

![](https://img-blog.csdnimg.cn/img_convert/8af03e00ca3e31d9fe99a6d375caad0f.png)

在 dev 名稱空間內，建立一個新的 Function：

![](https://img-blog.csdnimg.cn/img_convert/34e79b64db79250ec6753bf203b66ae8.png)

Function 命名為 order-manager, 其實現技術棧選擇成 Node.js 12：

![](https://img-blog.csdnimg.cn/img_convert/355f7f5dfbcb48783184f8ff44450f80.png)

在函式實現原始碼的 Source 區域，將之前 SAP UI5 工程裡的 orders.json 檔案裡的內容，複製到下圖函式編輯器裡。儲存之後，Function 狀態變為 RUNNING，立即可用。這體現了 Kyma Serveless 計算的優勢：開發人員只需專注於函式業務邏輯的編寫，無需關心函式的部署和執行環境問題。

![](https://img-blog.csdnimg.cn/img_convert/b7d143c1cb5062261cdead093e12d5e7.png)

切換到 Function Configuration 皮膚，點選 Expose Function，建立一個新的 API Rule，將該函式透過 HTTP 呼叫的方式，暴露給 Internet 上的其他消費者。

![](https://img-blog.csdnimg.cn/img_convert/12db7df9f657e8315a0e65d25ef32787.png)

API Rule 按照下圖所示進行維護，其中 Service 下拉選單裡顯示的，是建立 Function 時自動生成的同名 Service 資源。
![](https://img-blog.csdnimg.cn/img_convert/073a7b34ab10126be8f02dbe7967df82.png)
API Rule 建立完畢後，點選其 Host 欄位，就能透過 HTTP 的方式，呼叫即執行對應的 Function 了。

![](https://img-blog.csdnimg.cn/img_convert/db62e8601271933d41046c53e4889a5e.png)

在瀏覽器裡訪問該超連結，能看到我們在 Function 原始碼裡，硬編碼的三條訂單資料：

![](https://img-blog.csdnimg.cn/img_convert/b75a22ea818b5bd521070421fa3e8ff8.png)

對 UI5 應用做簡單的調整，讓其消費部署在 SAP BTP Kyma 執行環境上剛剛建立的 Function. 至此我們完成了 UI5 應用的開發，可以開始構建 Docker 映象檔案了。

![](https://img-blog.csdnimg.cn/img_convert/8618e70a5ca8c1c392b43a61eef66a0e.png)

新建 Dockerfile 檔案，該 Docker 映象構建具體分為兩個步驟，即所謂的多階段構建。首先，使用關鍵字 FROM，指定構建的基本映象為 node:current-slim,執行 npm install 下載 SAP UI5 應用 package.json 檔案裡定義的依賴，然後執行 npm run-script build,生成包含該 UI5 專案生產環境版本資原始檔的 dist 資料夾。考慮到執行一個 SAP UI5 應用，只需要構建出的 dist 資料夾裡的資源即可，而 node:current-slim 映象內的所有內容，與 SAP UI5 應用的執行毫無關係。因此，第10行程式碼，我們用 FROM 指定了一個新的映象，即 nginx：alpine. 第11行用關鍵字 COPY，將前一映象構建出的 dist 資料夾的內容，複製到 nginx 工作目錄即 html 內，這樣能大大減小最後構建出的 Docker 映象的尺寸。

![](https://img-blog.csdnimg.cn/img_convert/74ba1da394e0da33ca8f52c190ab3b18.png)

使用如下命令列構建 Docker 映象檔案：

> docker build -t i042416/ui5-kyma -f docker/Dockerfile .

注意，命令列末尾的".",代表當前目錄，而非命令列結束的識別符號。

![](https://img-blog.csdnimg.cn/img_convert/247ac3979015d3a4d38848127ffcddb8.png)

使用 docker push 命令，將該構建好的映象，上傳到 Docker Hub 去：

![](https://img-blog.csdnimg.cn/img_convert/cf9371f28a9d06bd23ef60d563bdb7b8.png)

![](https://img-blog.csdnimg.cn/img_convert/1bbe373e321426934e1f8cfc5de97f09.png)

我們在本地測試一下這個構建好的 Docker 映象。

透過命令列本地啟動 Docker 容器：

> docker run -p 1081:80 -d i042416/ui5-kyma

![](https://img-blog.csdnimg.cn/img_convert/6c11ae89156afa8f6adeb0e68b6d60d6.png)

將映象內 nginx 對應的 80 埠，對映成本地宿主機的 1081 埠，然後瀏覽器開啟 localhost:1081 ，確保 SAP UI5 應用能夠正常工作，並且檢查此時載入的資源，已經是 dist 資料夾裡構建好的生產系統版本的檔案，即 component-preload.js：

![](https://img-blog.csdnimg.cn/img_convert/9251afa8e7320f14ebb8b02904ecc946.png)

最後一步，將該 Docker 映象，透過 Kubernetes 規範部署到 SAP Kyma 上。可以使用 Kubernetes 提供的命令列工具 kubectl，也可使用 SAP Kyma 控制檯的圖形介面。

建立一個名為 deployment.yaml 的檔案，裡面定義一個名為 jerry-ui5-kyma 的 Deployment 資源，這是 Kubernetes 原生支援的資源型別之一。指定使用之前構建好並且上傳到 Docker Hub 的映象檔案：i042416/ui5-kyma:

![](https://img-blog.csdnimg.cn/img_convert/c1fd812688a148d3392fb427f7e62afa.png)

回到 Kyma 控制檯，選單 Deployment new workload -> Upload YAML, 選擇前一步建立好的 deployment.yaml:

![](https://img-blog.csdnimg.cn/img_convert/6b63ead101c3bff9e4e937ef61cd4dcf.png)

確保該 Deployment 處於 Running 狀態：
![](https://img-blog.csdnimg.cn/img_convert/3fa8e3080decbbb9188a951b90937a20.png)
最後基於 jerry-ui5-kyma 建立一個 API Rule，從而使其可以在 Internet 上被訪問。下圖高亮區域，即是被構建在 Docker 映象裡的 SAP UI5 應用，在 SAP Kyma 執行環境裡被訪問的 URL：

https://jerryui5kyma.c-46d70f2.kyma.shoot.live.k8s-hana.ondemand.com/

![](https://img-blog.csdnimg.cn/img_convert/74fe231417578e3344d8c734954b2314.png)

至此，我們已經逐步實現了本文開頭提出的任務：

(1) 本地開發一個 SAP UI5 應用
(2) 將該 SAP UI5 應用打包成 Docker 映象
(3) 透過 Kubernetes Deployment，將包含前一步的 Docker 映象，部署到 SAP Kyma 上並執行。

![](https://img-blog.csdnimg.cn/img_convert/a1b5fbd7f22184f01d617ec9c91da17f.png)
既然 SAP Kyma 底層基於 Kubernetes，所以當然也可以使用 Kubernetes 命令列工具 kubectl，直接操縱 SAP Kyma 資源。

在 SAP Kyma 控制檯右上角，點選 Get kubeconfig 下載同名配置檔案。

![](https://img-blog.csdnimg.cn/img_convert/28a6311646d195fc145b6f2ecbf38083.png)

將下載到本地的 kubeconfig.yml 檔案的路徑，配置成環境變數 KUBECONFIG.

執行 kubectl version 命令列,能看到 kubectl 列印出客戶端和伺服器端的 git 和 go 執行環境的版本號：
![](https://img-blog.csdnimg.cn/img_convert/dd873c22d8b4aa38273d323bd39ca185.png)

接下來就能使用 kubectl 命令列，查詢剛才下載好的 kubeconfig.yml 檔案指向的 SAP Kyma 例項上執行的各種資源了。

比如使用如下命令列，查詢到 SAP UI5 應用執行的 pod 名稱為：jerry-ui5-kyma-785b458ff5-zm7xt

![](https://img-blog.csdnimg.cn/img_convert/6cf7e338d0f112b8865e46845aa5b659.png)
得到 pod 名稱後，使用命令列進入該 pod 預設容器，即 jerry-ui5-kyma 內部：

> kubectl exec -it jerry-ui5-kyma-785b458ff5-zm7xt -n dev -- /bin/sh
![](https://img-blog.csdnimg.cn/img_convert/360ea19d60c82c892205d6f8c07c9c00.png)

進入容器內部之後，切換到目錄 /usr/share/nginx/html, 這裡能看到我們之前本地開發的 SAP UI5 的資原始檔。 這些檔案，正是由我們之前製作 Docker 映象時編寫的 Dockerfile 裡的最後一行，透過 COPY 操作，從前一個 node 基準映象，執行 npm run-script build 命令後構建而成的 UI5 生產版本的資原始檔，複製到 nginx 映象的 /usr/share/nginx/html 目錄而生成的。

![](https://img-blog.csdnimg.cn/img_convert/421145d3a8b08eef890c6f5def38c2e2.png)

希望本文能夠幫助大家，對如何開發 SAP UI5 應用，並部署和執行於 SAP Kyma 上的完整步驟，有一個直觀的瞭解。本文提到的 SAP UI5 應用，後續還有很多可以繼續增強的地方，比如實現訂單新增和刪除功能，並使用 Redis 進行持久化，同時將 Redis 服務也部署在 SAP Kyma 上，然後讓該 UI5 應用，消費 SAP Kyma 上的 Redis 服務，而非本文介紹的 Serverless Function. 大家可以試著自行實現，或者等待本公眾號後續的分享。感謝閱讀。

# 更多閱讀

*   [站在巨人肩膀上的牛頓：Kubernetes和SAP Kyma](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485582&idx=1&sn=dc1aeee8005c27a6bea42143c0db1e7c&chksm=ead5ba19dda2330fe363fc71fa1fa4eedb2f9edc24292be37001604c20f67df9e0c44579e911&scene=21#wechat_redirect)

*   [在Kubernetes上執行SAP UI5應用(上）](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485598&idx=1&sn=adf1e5c77fb1d331f093ccd8e207ded6&chksm=ead5ba09dda2331fbc73c0d17c5db3f0da475e36b9ed0005314f3a656e484837ef1c6a061a75&scene=21#wechat_redirect)

*   [在Kubernetes上執行SAP UI5應用(下）](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485616&idx=1&sn=600ea4b9e3657abf8416af74ece1cd76&chksm=ead5ba27dda23331926221abe7bcba81256a9d7f329506789bd8eb73b62df09b20d902db27af&scene=21#wechat_redirect)

*   [WordPress，SAP Kyma和微信三者的整合](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486526&idx=1&sn=eab77d2c9aad3dcbbab4776da0cd470b&chksm=ead5bea9dda237bfc03418df3c895592eb780f2a8dff18628edd0adde5a28b176cd65cd4ae76&scene=21#wechat_redirect)

*   [從ABAP Netweaver的SICF到SAP Kyma的Lambda Function](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486552&idx=1&sn=6eab70d228670d0e01be822cc088986f&chksm=ead5becfdda237d9655e177c5c85609bc721cbee62e18891337ea6dcbbf815e54442599aea04&scene=21#wechat_redirect)

*   [周伯通的空明拳，米諾斯的星塵傀儡線，SAP Kyma的Serverless](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486579&idx=1&sn=18a9fdaa87f9113ffc3c89ad7570aaaf&chksm=ead5bee4dda237f2087e01c710bfc4dbea0d1e9093a4e0580100bb063ef839715d88f1771808&scene=21#wechat_redirect)

*   [基於SAP Kyma的訂單編排增強介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485820&idx=1&sn=81e15e0e2ce07bea5043d0187db62877&chksm=ead5bbebdda232fdb8769c33b98705ff49f33ad16365f8b5c0f354f48e41a7f3ea2313492022&scene=21#wechat_redirect)

*   [第三方應用如何在SAP Kyma上進行服務註冊](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486489&idx=1&sn=91c9812bdf59e88178fab3b8c56522cc&chksm=ead5be8edda237985ff6ba30b6c68dc2f127f57fa429e68fc5b834190893f08a95bfcf617ca0&scene=21#wechat_redirect)

一步步把 SAP UI5 應用部署到 SAP BTP Kyma 執行環境中去

相關文章