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

之前 Jerry 的兩篇文章，分別介紹了如何在本地使用 Visual Studio Code 創建一個 SAP Fiori Elements 應用，以及使用 Fiori Elements Controller Extension 理念，對該 Fiori Elements 應用進行二次開發的具體步驟。

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

本地開發完成之后，新的問題順理成章就來了：如何將該本地應用，部署到遠程的 ABAP 服務器上？

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

而通過 Visual Studio Code 進行 SAP Fiori Elements 應用的本地開發，右鍵菜單里并沒有部署相關的選項：

不過，我們仔細觀察項目工程文件夾里的 package.json，還是發現了一些關于部署的線索。在該文件的 scripts 標簽里，包含 deploy 和 deploy-config 兩個指令。

先執行 npm run deploy 命令，這條命令的內容是 fiori verify，即進行部署前的校驗工作。校驗的結果，在本地檢測不到部署配置信息，這樣 Visual Studio Code 里安裝的 SAP Fiori tools, 根本不知道開發人員期望將該應用，部署到哪個 ABAP 服務器上。

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

npm run deploy-config

如果遇到下列錯誤消息：

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

說明 Yeoman 沒有安裝，使用 npm install --global yo 進行安裝即可。

之后重新運行命令行：

npm run deploy-config

首先選擇部署目標類型為 ABAP 服務器。

接下來，需要指定待部署到的 ABAP 服務器的 url，client ID，部署到服務器上生成的 BSP 應用名稱，存放該應用的 ABAP 開發包名稱等信息。

我們在這個命令行向導里輸入的內容，會維護到一個名為 ui5-deploy.yaml 的配置文件里。因此，此處我們可以一路回車，待結束向導后，在 Visual Studio Code 里繼續編輯 ui5-deploy.yaml 即可。

npm run deploy-config 命令執行完畢后，生成了對應包含部署明細信息的 ui5-deploy.yaml 文件，同時 package.json 文件里，deploy 命令的內容，也從之前的 fiori verify，自動替換成了如下內容：

下圖是我修改過的 ui5-deploy.yaml 文件。整個文件由 SAP Fiori tools 自動生成，我們只需要修改圖中 1～3 區域的內容。

部署 ABAP 服務器的主機名和端口號，以及 client ID. 我部署的 ABAP 服務器為 ER9/001，采用 basic Authentication 方式認證。

credentials 區域，維護我登錄 ER9/001 的用戶名和密碼。因為該 yaml 文件需要上傳到 Github 上進行版本管理，故不應直接維護用戶名和密碼等敏感信息，而是將這些信息維護到一個叫做 .env 的文件里，然后在 ui5-deploy.yaml 里引用該 .env 文件。

部署到 ABAP 服務器上生成 BSP 應用的名稱，以及用來存儲該 BSP 應用的 ABAP 開發包名稱。

一切就緒之后，執行命令行：

npm run deploy

我第一次試圖部署時，遇到了下圖的錯誤消息：

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

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

SAP 開發了一個標準的 OData 服務 /UI5/ABAP_REPOSITORY_SRV, 能夠將本地 SAP UI5 應用打成的 zip 壓縮包上傳到 ABAP 服務器，并生成對應的 BSP 應用。

關于該 OData 服務的更多說明，請參閱 SAP 幫助文檔：

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

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

執行事務碼 /IWFND/MAINT_SERVICE, 將 /UI5/ABAP_REPOSITORY_SRV 添加到服務列表中。

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

對于 SAP_UI 753 以下的版本，可以嘗試使用報表 /UI5/UI5_REPOSITORY_LOAD 手動上傳。

npm run deploy 命令執行成功后，命令行會打印出部署到 ABAP 服務器上的 SAP Fiori Elements 應用可供訪問的 url：

粘貼到瀏覽器后即可訪問這個運行在 ABAP 服務器上的 SAP Fiori Elements 應用了：

在 ABAP 服務器 ER9/001 上生成的 BSP 應用如下圖所示：

至于如何將該 Fiori Elements 應用配置成 ABAP 服務器上 Fiori Launchpad 的一個 tile，這是另外一個話題了。我們后續繼續分享。

感謝閱讀。

更多閱讀

• SAP Fiori應用索引大全

• Fiori Fundamentals和SAP UI5 Web Components

• 為什么SAP GUI里的傳統事務碼能通過Fiori Launchpad啟動并運行在瀏覽器里

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

• SAP UI5應用開發人員了解UI5框架代碼的意義

• SAP UI5 module懶加載機制

• SAP UI5 控件渲染機制

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

• SAP UI5控件元數據的元數據實現

• SAP UI5控件的實例數據修改和讀取邏輯

• SAP UI5控件數據綁定的實現原理

• SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

• SAP UI5 OData謠言粉碎機：極短時間內發送兩個Odata request,前一個會自動被cancel掉嗎

• SAP UI5和Angular的函數防抖(Debounce)和函數節流(Throttle)實現原理介紹

• SAP UI渲染模式：客戶端渲染 VS 服務器端渲染

• SAP UI的加載動畫效果和幽靈設計(Ghost Design)

• 介紹一個能開發簡單SAP UI5應用的在線IDE：StackBlitz

• SAP CRM Fiori 應用和 SAP Commerce Cloud (電商云) UI 如何通過調整CSS來改變UI顯示風格

• SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商云) UI 增強實現中的體現

• 如何分辨 SAP Fiori Launchpad 里的真假 Fiori 應用

• 在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

• SAP Fiori 應用里圖標(Icon)的渲染原理和使用技巧

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

更多Jerry的原創文章，盡在：“汪子熙”:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。