本地开发好的 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 文件。

部署到 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 服务器上？相关推荐

如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之三十五 - 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之三十五 - 如何把本地开发的 SAP UI5 应用部署到 ABAP 服务器上
本教程前 34 个步骤, SAP UI5 应用一直是在本地 Visual Studio Code 中开发并通过本地命令行 ui5 serve 启动然后本地测试的. 本步骤我们将学习,如何使用 SAP ...
部署到ABAP服务器上的SAP UI5应用，其index.html的读取逻辑
Created by Jerry Wang, last modified on Aug 26, 2015 原标题:How is correct index.html served by ui5 han ...
本地开发的 SAP UI5 应用，部署到 ABAP 服务器执行出错的问题分析
我使用 SAP UI5 Tools 的 CLI 工具,运行命令 npm run deploy 将 Visual Studio Code 里开发的 SAP UI5 应用,部署到 ABAP 服务器后,成功 ...
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章. Jerry 前一篇文章深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fio ...
深入理解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 应用添加自定义按钮
这是 Jerry 2021 年的第 33 篇文章,也是汪子熙公众号总共第 309 篇原创文章. Jerry 的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流 ...
如何使用 ABAP 报表将 ABAP 服务器上的 SAP UI5 应用下载到本地
我文章本地开发好的 SAP Fiori Elements 应用,如何部署到 ABAP 服务器上? 的留言: 其实很容易,使用报表 /UI5/UI5_REPOSITORY_LOAD. 假设需要将这个名 ...
SAP Fiori Elements 公开课第一单元概要介绍
Open SAP 课程地址很多 SAP 从业者反映,open SAP 上的视频,因为网络原因无法访问,所以我会陆续在我的个人微信号"汪子熙"上面,把这些视频配上中文字幕并发布 ...

本地开发好的 SAP Fiori Elements 应用，如何部署到 ABAP 服务器上？

本地开发好的 SAP Fiori Elements 应用，如何部署到 ABAP 服务器上？相关推荐

最新文章

热门文章