這是 Jerry 2021 年的第 29 篇文章，也是汪子熙公眾號(hào)總共第 300 篇原創(chuàng)文章。

之前 Jerry 的兩篇文章，分別介紹了如何在本地使用 Visual Studio Code 創(chuàng)建一個(gè) SAP Fiori Elements 應(yīng)用，以及使用 Fiori Elements Controller Extension 理念，對(duì)該 Fiori Elements 應(yīng)用進(jìn)行二次開(kāi)發(fā)的具體步驟。

• 在沒(méi)有任何前端開(kāi)發(fā)經(jīng)驗(yàn)的基礎(chǔ)上, 創(chuàng)建第一個(gè) SAP Fiori Elements 應(yīng)用

• 答網(wǎng)友提問(wèn)：使用 SAP Fiori Tools 創(chuàng)建的 Fiori Elements 應(yīng)用，如何進(jìn)行二次開(kāi)發(fā)？

本地開(kāi)發(fā)完成之后，新的問(wèn)題順理成章就來(lái)了：如何將該本地應(yīng)用，部署到遠(yuǎn)程的 ABAP 服務(wù)器上？

如果是在以前的 SAP Cloud Platform (現(xiàn)在改名叫 SAP Business Technology Platform) Neo 環(huán)境提供的 Full Stack WebIDE 里開(kāi)發(fā) SAP Fiori Elements 應(yīng)用，那么直接使用 SAP WebIDE 里的右鍵菜單，選擇 “Deploy to SAPUI5 ABAP Repository” 即可完成部署。

而通過(guò) Visual Studio Code 進(jìn)行 SAP Fiori Elements 應(yīng)用的本地開(kāi)發(fā)，右鍵菜單里并沒(méi)有部署相關(guān)的選項(xiàng)：

不過(guò)，我們仔細(xì)觀察項(xiàng)目工程文件夾里的 package.json，還是發(fā)現(xiàn)了一些關(guān)于部署的線索。在該文件的 scripts 標(biāo)簽里，包含 deploy 和 deploy-config 兩個(gè)指令。

先執(zhí)行 npm run deploy 命令，這條命令的內(nèi)容是 fiori verify，即進(jìn)行部署前的校驗(yàn)工作。校驗(yàn)的結(jié)果，在本地檢測(cè)不到部署配置信息，這樣 Visual Studio Code 里安裝的 SAP Fiori tools, 根本不知道開(kāi)發(fā)人員期望將該應(yīng)用，部署到哪個(gè) ABAP 服務(wù)器上。

因此按照上圖橙色的提示信息，運(yùn)行下列命令行，生成部署配置信息。

npm run deploy-config

如果遇到下列錯(cuò)誤消息：

Yeoman is not installed or available in your executable path. Please check your configuration or use npm/yarn to install it globally.

說(shuō)明 Yeoman 沒(méi)有安裝，使用 npm install --global yo 進(jìn)行安裝即可。

之后重新運(yùn)行命令行：

npm run deploy-config

首先選擇部署目標(biāo)類型為 ABAP 服務(wù)器。

接下來(lái)，需要指定待部署到的 ABAP 服務(wù)器的 url，client ID，部署到服務(wù)器上生成的 BSP 應(yīng)用名稱，存放該應(yīng)用的 ABAP 開(kāi)發(fā)包名稱等信息。

我們?cè)谶@個(gè)命令行向?qū)Ю镙斎氲膬?nèi)容，會(huì)維護(hù)到一個(gè)名為 ui5-deploy.yaml 的配置文件里。因此，此處我們可以一路回車，待結(jié)束向?qū)Ш?#xff0c;在 Visual Studio Code 里繼續(xù)編輯 ui5-deploy.yaml 即可。

npm run deploy-config 命令執(zhí)行完畢后，生成了對(duì)應(yīng)包含部署明細(xì)信息的 ui5-deploy.yaml 文件，同時(shí) package.json 文件里，deploy 命令的內(nèi)容，也從之前的 fiori verify，自動(dòng)替換成了如下內(nèi)容：

下圖是我修改過(guò)的 ui5-deploy.yaml 文件。整個(gè)文件由 SAP Fiori tools 自動(dòng)生成，我們只需要修改圖中 1～3 區(qū)域的內(nèi)容。

部署 ABAP 服務(wù)器的主機(jī)名和端口號(hào)，以及 client ID. 我部署的 ABAP 服務(wù)器為 ER9/001，采用 basic Authentication 方式認(rèn)證。

credentials 區(qū)域，維護(hù)我登錄 ER9/001 的用戶名和密碼。因?yàn)樵?yaml 文件需要上傳到 Github 上進(jìn)行版本管理，故不應(yīng)直接維護(hù)用戶名和密碼等敏感信息，而是將這些信息維護(hù)到一個(gè)叫做 .env 的文件里，然后在 ui5-deploy.yaml 里引用該 .env 文件。

部署到 ABAP 服務(wù)器上生成 BSP 應(yīng)用的名稱，以及用來(lái)存儲(chǔ)該 BSP 應(yīng)用的 ABAP 開(kāi)發(fā)包名稱。

一切就緒之后，執(zhí)行命令行：

npm run deploy

我第一次試圖部署時(shí)，遇到了下圖的錯(cuò)誤消息：

Invalid URL: /sap/opu/odata/UI5/ABAP_REPOSITORY_SRV

把該錯(cuò)誤消息粘貼到 Google 里，很快找到了錯(cuò)誤原因。

SAP 開(kāi)發(fā)了一個(gè)標(biāo)準(zhǔn)的 OData 服務(wù) /UI5/ABAP_REPOSITORY_SRV, 能夠?qū)⒈镜?SAP UI5 應(yīng)用打成的 zip 壓縮包上傳到 ABAP 服務(wù)器，并生成對(duì)應(yīng)的 BSP 應(yīng)用。

關(guān)于該 OData 服務(wù)的更多說(shuō)明，請(qǐng)參閱 SAP 幫助文檔：

https://sapui5.hana.ondemand.com/#/topic/a883327a82ef4cc792f3c1e7b7a48de8.html

SAP note 2999557 提供了激活該 OData 服務(wù)的步驟：

執(zhí)行事務(wù)碼 /IWFND/MAINT_SERVICE, 將 /UI5/ABAP_REPOSITORY_SRV 添加到服務(wù)列表中。

注意，該 OData 服務(wù)僅在 SAP_UI 753 及其以上的版本才可用。

對(duì)于 SAP_UI 753 以下的版本，可以嘗試使用報(bào)表 /UI5/UI5_REPOSITORY_LOAD 手動(dòng)上傳。

npm run deploy 命令執(zhí)行成功后，命令行會(huì)打印出部署到 ABAP 服務(wù)器上的 SAP Fiori Elements 應(yīng)用可供訪問(wèn)的 url：

粘貼到瀏覽器后即可訪問(wèn)這個(gè)運(yùn)行在 ABAP 服務(wù)器上的 SAP Fiori Elements 應(yīng)用了：

在 ABAP 服務(wù)器 ER9/001 上生成的 BSP 應(yīng)用如下圖所示：

至于如何將該 Fiori Elements 應(yīng)用配置成 ABAP 服務(wù)器上 Fiori Launchpad 的一個(gè) tile，這是另外一個(gè)話題了。我們后續(xù)繼續(xù)分享。

感謝閱讀。

更多閱讀

• SAP Fiori應(yīng)用索引大全

• Fiori Fundamentals和SAP UI5 Web Components

• 為什么SAP GUI里的傳統(tǒng)事務(wù)碼能通過(guò)Fiori Launchpad啟動(dòng)并運(yùn)行在瀏覽器里

• 一步步把SAP GUI的事務(wù)碼配置到SAP Fiori Launchpad里

• SAP UI5應(yīng)用開(kāi)發(fā)人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機(jī)制

• SAP UI5 控件渲染機(jī)制

• HTML原生事件 VS SAP UI5 Semantic事件

• SAP UI5控件元數(shù)據(jù)的元數(shù)據(jù)實(shí)現(xiàn)

• SAP UI5控件的實(shí)例數(shù)據(jù)修改和讀取邏輯

• SAP UI5控件數(shù)據(jù)綁定的實(shí)現(xiàn)原理

• SAP UI5控件數(shù)據(jù)綁定的三種模式：One Way, Two Way和OneTime實(shí)現(xiàn)原理比較

• SAP UI5 OData謠言粉碎機(jī)：極短時(shí)間內(nèi)發(fā)送兩個(gè)Odata request,前一個(gè)會(huì)自動(dòng)被cancel掉嗎

• SAP UI5和Angular的函數(shù)防抖(Debounce)和函數(shù)節(jié)流(Throttle)實(shí)現(xiàn)原理介紹

• SAP UI渲染模式：客戶端渲染 VS 服務(wù)器端渲染

• SAP UI的加載動(dòng)畫效果和幽靈設(shè)計(jì)(Ghost Design)

• 介紹一個(gè)能開(kāi)發(fā)簡(jiǎn)單SAP UI5應(yīng)用的在線IDE：StackBlitz

• SAP CRM Fiori 應(yīng)用和 SAP Commerce Cloud (電商云) UI 如何通過(guò)調(diào)整CSS來(lái)改變UI顯示風(fēng)格

• SAP 產(chǎn)品一脈相承的 UI 增強(qiáng)思路，在 SAP Commerce Cloud(電商云) UI 增強(qiáng)實(shí)現(xiàn)中的體現(xiàn)

• 如何分辨 SAP Fiori Launchpad 里的真假 Fiori 應(yīng)用

• 在沒(méi)有任何前端開(kāi)發(fā)經(jīng)驗(yàn)的基礎(chǔ)上, 創(chuàng)建第一個(gè) SAP Fiori Elements 應(yīng)用

• SAP Fiori 應(yīng)用里圖標(biāo)(Icon)的渲染原理和使用技巧

• 答網(wǎng)友提問(wèn)：使用 SAP Fiori Tools 創(chuàng)建的 Fiori Elements 應(yīng)用，如何進(jìn)行二次開(kāi)發(fā)？

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的本地开发好的 SAP Fiori Elements 应用，如何部署到 ABAP 服务器上？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。