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

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

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

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

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

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

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

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

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

不過，我們仔細觀察專案工程資料夾裡的 package.json，還是發現了一些關於部署的線索。在該檔案的 scripts 標籤裡，包含 deploy 和 deploy-config 兩個指令。

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

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

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

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

> 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 進行安裝即可。

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

之後重新執行命令列：

> npm run deploy-config

首先選擇部署目標型別為 ABAP 伺服器。

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

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

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

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

npm run deploy-config 命令執行完畢後，生成了對應包含部署明細資訊的 ui5-deploy.yaml 檔案，同時 package.json 檔案裡，deploy 命令的內容，也從之前的 fiori verify，自動替換成了如下內容：

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

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

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

1. 部署 ABAP 伺服器的主機名和埠號，以及 client ID. 我部署的 ABAP 伺服器為 ER9/001，採用 basic Authentication 方式認證。

2. credentials 區域，維護我登入 ER9/001 的使用者名稱和密碼。因為該 yaml 檔案需要上傳到 Github 上進行版本管理，故不應直接維護使用者名稱和密碼等敏感資訊，而是將這些資訊維護到一個叫做 .env 的檔案裡，然後在 ui5-deploy.yaml 裡引用該 .env 檔案。

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

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

一切就緒之後，執行命令列：

> npm run deploy

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

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

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

把該錯誤訊息貼上到 Google 裡，很快找到了錯誤原因。

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

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

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

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

SAP note 2999557 提供了啟用該 OData 服務的步驟：

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

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

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

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

對於 SAP_UI 753 以下的版本，可以嘗試使用報表 /UI5/UI5_REPOSITORY_LOAD 手動上傳。
![](https://img-blog.csdnimg.cn/img_convert/5b0b82d0c1a30f7ecb454e07c81c9b26.png)

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

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

貼上到瀏覽器後即可訪問這個執行在 ABAP 伺服器上的 SAP Fiori Elements 應用了：

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

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

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

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

感謝閱讀。

**更多閱讀**

*   [SAP Fiori應用索引大全](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247488734&idx=1&sn=7183bce297fd918de90215e40db8ea34&chksm=ead5a649dda22f5f875cdd56be5d94634240a2afd89abc318d73201b90d4e6f69f2c34c267ac&scene=21#wechat_redirect)

*   [Fiori Fundamentals和SAP UI5 Web Components](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486061&idx=1&sn=93024837a72cbb445b219655f75b1b75&chksm=ead5b8fadda231ec0b6b4dd35a0281cb92bddb0a2863335c5823950881314259f8835b32592e&scene=21#wechat_redirect)

*   [為什麼SAP GUI裡的傳統事務碼能透過Fiori Launchpad啟動並執行在瀏覽器裡](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489169&idx=1&sn=be9cfe4b23c667b2a367886107eaa652&chksm=ead5a406dda22d10854945679875b27af092bdad035b417b035a4122e60a568b61a8b9d8f176&scene=21#wechat_redirect)

*   [一步步把SAP GUI的事務碼配置到SAP Fiori Launchpad裡](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489214&idx=1&sn=d47192162ff1b098f7918cda3b6131f8&chksm=ead5a429dda22d3faf569ced7174f5915d61f33108e4b1dbc13e0270fee3930d978a9ed9865c&scene=21#wechat_redirect)

*   [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490624&idx=1&sn=355253156bec497d2d51925010feb8c1&chksm=ead5aed7dda227c1dd97a0ba5d24eb1d91415eadca97ec0f540cf49beaa6a699d734d5ce4f2c&scene=21#wechat_redirect)

*   [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

*   [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

*   [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

*   [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

*   [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

*   [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

*   [SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect)

*   [SAP UI5和Angular的函式防抖(Debounce)和函式節流(Throttle)實現原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491343&idx=1&sn=0e7aa53525157d8ef8af8681d79d7b64&chksm=ead5ad98dda2248e44955e59e89c95d81d5a4ae4fa3380486c74252e67515bc2c0883bd49967&scene=21#wechat_redirect)

*   [SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

*   [SAP UI的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&scene=21#wechat_redirect)

*   [介紹一個能開發簡單SAP UI5應用的線上IDE：StackBlitz](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491526&idx=1&sn=027753170e69179735a95297d8534ee9&chksm=ead5ad51dda22447efc4061ecb5cff5920863d617a114a124079e9ec8713c1607816ff2baff5&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [如何分辨 SAP Fiori Launchpad 裡的真假 Fiori 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491884&idx=1&sn=4b3dc9a96dc3c4c162ea0caadace52a2&chksm=ead653bbdda1daad81ec5bd73ce4ecc418f5d0090e5bfb3074a439687d2c8bb9dffb25fcb7a8&scene=21#wechat_redirect)

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [SAP Fiori 應用裡圖示(Icon)的渲染原理和使用技巧](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492089&idx=1&sn=05ba2705d32d76750ce22809c8f58058&chksm=ead6536edda1da78248899d24b6e65dc4a5c08c5d666ebdf4c8715b6cd1f8e5dad84f65fe385&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上？

相關文章