本地开发完成的 Fiori Elements 应用,部署到远端 ABAP 服务器上的详细步骤
![本地开发完成的 Fiori Elements 应用,部署到远端 ABAP 服务器上的详细步骤](https://static001.geekbang.org/infoq/1c/1cd79adea8649b20f53fea3f27da1cc7.jpeg)
之前笔者的两篇文章,分别介绍了如何在本地使用 Visual Studio Code 创建一个 SAP Fiori Elements 应用,以及使用 Fiori Elements Controller Extension 理念,对该 Fiori Elements 应用进行二次开发的具体步骤。
本地开发完成之后,新的问题顺理成章就来了:如何将该本地应用,部署到远程的 ABAP 服务器上?
![](https://static001.geekbang.org/infoq/99/99e520474f4276428452e306d4245220.png)
如果是在以前的 SAP Cloud Platform (现在改名叫 SAP Business Technology Platform) Neo 环境提供的 Full Stack WebIDE 里开发 SAP Fiori Elements 应用,那么直接使用 SAP WebIDE 里的右键菜单,选择 "Deploy to SAPUI5 ABAP Repository" 即可完成部署。
![](https://static001.geekbang.org/infoq/e5/e5e7ddef1dda95a36d3ff8372f4a6d58.png)
而通过 Visual Studio Code 进行 SAP Fiori Elements 应用的本地开发,右键菜单里并没有部署相关的选项:
![](https://static001.geekbang.org/infoq/9e/9eb71938f70f6f85f5b4dea4f3884da6.png)
不过,我们仔细观察项目工程文件夹里的 package.json,还是发现了一些关于部署的线索。在该文件的 scripts 标签里,包含 deploy 和 deploy-config 两个指令。
![](https://static001.geekbang.org/infoq/58/581cbc94207ff27c4429ad6d5d90d1c9.png)
先执行 npm run deploy 命令,这条命令的内容是 fiori verify,即进行部署前的校验工作。校验的结果,在本地检测不到部署配置信息,这样 Visual Studio Code 里安装的 SAP Fiori tools, 根本不知道开发人员期望将该应用,部署到哪个 ABAP 服务器上。
![](https://static001.geekbang.org/infoq/39/39e0dc6fb913e6da336f3406e8e2dc14.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://static001.geekbang.org/infoq/84/8487a1ddafcef3fb6eb8e357e5e102fb.png)
之后重新运行命令行:
npm run deploy-config
首先选择部署目标类型为 ABAP 服务器。
![](https://static001.geekbang.org/infoq/21/21fe758f5e235bb00c192fac70fb9cb5.png)
接下来,需要指定待部署到的 ABAP 服务器的 url,client ID,部署到服务器上生成的 BSP 应用名称,存放该应用的 ABAP 开发包名称等信息。
![](https://static001.geekbang.org/infoq/38/386fdb3db805428e7336075738419930.png)
我们在这个命令行向导里输入的内容,会维护到一个名为 ui5-deploy.yaml 的配置文件里。因此,此处我们可以一路回车,待结束向导后,在 Visual Studio Code 里继续编辑 ui5-deploy.yaml 即可。
npm run deploy-config 命令执行完毕后,生成了对应包含部署明细信息的 ui5-deploy.yaml 文件,同时 package.json 文件里,deploy 命令的内容,也从之前的 fiori verify,自动替换成了如下内容:
![](https://static001.geekbang.org/infoq/8c/8cdc51513dad7e26dff809bde498656a.png)
下图是我修改过的 ui5-deploy.yaml 文件。整个文件由 SAP Fiori tools 自动生成,我们只需要修改图中 1~3 区域的内容。
![](https://static001.geekbang.org/infoq/39/39c5567139bc3940f6ab2cd698075ce8.png)
部署 ABAP 服务器的主机名和端口号,以及 client ID. 我部署的 ABAP 服务器为 ER9/001,采用 basic Authentication 方式认证。
credentials 区域,维护我登录 ER9/001 的用户名和密码。因为该 yaml 文件需要上传到 Github 上进行版本管理,故不应直接维护用户名和密码等敏感信息,而是将这些信息维护到一个叫做 .env 的文件里,然后在 ui5-deploy.yaml 里引用该 .env 文件。
![](https://static001.geekbang.org/infoq/ce/ce10acb82f3e0aa8e74fc8d641cfefc0.png)
部署到 ABAP 服务器上生成 BSP 应用的名称,以及用来存储该 BSP 应用的 ABAP 开发包名称。
一切就绪之后,执行命令行:
npm run deploy
我第一次试图部署时,遇到了下图的错误消息:
Invalid URL: /sap/opu/odata/UI5/ABAP_REPOSITORY_SRV
![](https://static001.geekbang.org/infoq/4a/4a3af6160b5d6219326150efcbc5a92a.png)
把该错误消息粘贴到 Google 里,很快找到了错误原因。
SAP 开发了一个标准的 OData 服务 /UI5/ABAP_REPOSITORY_SRV, 能够将本地 SAP UI5 应用打成的 zip 压缩包上传到 ABAP 服务器,并生成对应的 BSP 应用。
![](https://static001.geekbang.org/infoq/4c/4c93c4a3ab90b272ca95d1c0913dcc65.png)
关于该 OData 服务的更多说明,请参阅 SAP 帮助文档:
https://sapui5.hana.ondemand.com/#/topic/a883327a82ef4cc792f3c1e7b7a48de8.html
SAP note 2999557 提供了激活该 OData 服务的步骤:
![](https://static001.geekbang.org/infoq/5e/5e9b5f1ab08300dcf71e19c23b4bca94.png)
执行事务码 /IWFND/MAINT_SERVICE, 将 /UI5/ABAP_REPOSITORY_SRV 添加到服务列表中。
![](https://static001.geekbang.org/infoq/66/66b0dbdb420fb3d54d888e624e6a05d4.png)
注意,该 OData 服务仅在 SAP_UI 753 及其以上的版本才可用。
对于 SAP_UI 753 以下的版本,可以尝试使用报表 /UI5/UI5_REPOSITORY_LOAD 手动上传。
![](https://static001.geekbang.org/infoq/a1/a1a06cb78a46ade6744adb3b84293fb4.png)
npm run deploy 命令执行成功后,命令行会打印出部署到 ABAP 服务器上的 SAP Fiori Elements 应用可供访问的 url:
![](https://static001.geekbang.org/infoq/4d/4d81950c30b4914f0033a898ea4fa15d.png)
粘贴到浏览器后即可访问这个运行在 ABAP 服务器上的 SAP Fiori Elements 应用了:
![](https://static001.geekbang.org/infoq/00/00b804ca22f98910d7f807aedd086861.png)
在 ABAP 服务器 ER9/001 上生成的 BSP 应用如下图所示:
![](https://static001.geekbang.org/infoq/a3/a3094f9aa4a6426d86442f17c335842f.png)
至于如何将该 Fiori Elements 应用配置成 ABAP 服务器上 Fiori Launchpad 的一个 tile,这是另外一个话题了。我们后续继续分享。
感谢阅读。
版权声明: 本文为 InfoQ 作者【Jerry Wang】的原创文章。
原文链接:【http://xie.infoq.cn/article/b884db55ae9079b212907806a】。文章转载请联系作者。
评论