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

這是 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 檔案。