一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去

摘要:
本文描述了如何在Kubernetes容器编排平台上运行包含SAPUI5应用程序的Docker映像。它存储在项目的dist文件夹中。使用dist文件夹中的资源文件。在函数实现源代码的源区域中,将其复制到如下所示的函数编辑器中。您不需要关心功能的部署和运行环境。它是创建函数时自动生成的同名服务资源。

这是 Jerry 2021 年的第 40 篇文章,也是汪子熙公众号总共第 317 篇原创文章。

Jerry 2018年曾经写过两篇文章,介绍了如何在 Kubernetes 这个容器编排平台上运行一个包含 SAP UI5 应用的 Docker 镜像。

SAP Kyma,是一个由 SAP 推进的开源的企业软件扩展平台,底层基于 Kubernetes,能以Serverless/微服务架构的方式,对 On-premise 和云应用进行扩展。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第1张

SAP Business Technology Platform (下文简称 BTP) 于 2020年开始支持 Kyma 运行环境。本文介绍如何把本地开发的 SAP UI5 应用,打包成 Docker 镜像文件,然后部署并运行在 SAP BTP Kyma 运行环境里。

首先我们在本地开发一个 SAP UI5 应用。这个应用的源代码,大家可以在 Github 下载。

这个 SAP UI5 应用的构建,采取 SAP UI5 Tool 提供的 Command Line Interface,即 @ui5/cli 完成。

使用命令行 npm run-script build, 调用 UI5 CLI 进行构建,得到生产版本的 SAP UI5 资源文件,存储在项目工程的 dist 文件夹内。稍后我们制作 Docker 镜像文件时,会使用 dist 文件夹内的资源文件。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第2张
使用命令行 npm run-script start,本地运行这个 SAP UI5 应用,界面如下:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第3张

应用显示的这三条订单数据,维护在项目工程的 orders.json 文件内。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第4张
出于演示目的,我只实现了订单列表显示功能。而订单添加,修改和删除功能,大家可以自行实现。

下面我们继续对该 SAP UI5 应用进行调整:将其订单列表的数据源,从本地 orders.json 文件, 调整成消费 SAP BTP Kyma 上运行的 Serverless Function.

登录 SAP BTP Cockpit,如今即便是 Trial 账号,也能免费启用 Kyma 运行环境。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第5张

点击 Go to Dashboard,就能进入 Kyma 控制台了:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第6张

在 dev 命名空间内,创建一个新的 Function:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第7张

Function 命名为 order-manager, 其实现技术栈选择成 Node.js 12:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第8张

在函数实现源代码的 Source 区域,将之前 SAP UI5 工程里的 orders.json 文件里的内容,拷贝到下图函数编辑器里。保存之后,Function 状态变为 RUNNING,立即可用。这体现了 Kyma Serveless 计算的优势:开发人员只需专注于函数业务逻辑的编写,无需关心函数的部署和运行环境问题。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第9张

切换到 Function Configuration 面板,点击 Expose Function,创建一个新的 API Rule,将该函数通过 HTTP 调用的方式,暴露给 Internet 上的其他消费者。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第10张

API Rule 按照下图所示进行维护,其中 Service 下拉列表里显示的,是创建 Function 时自动生成的同名 Service 资源。
一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第11张
API Rule 创建完毕后,点击其 Host 字段,就能通过 HTTP 的方式,调用即执行对应的 Function 了。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第12张

在浏览器里访问该超链接,能看到我们在 Function 源代码里,硬编码的三条订单数据:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第13张

对 UI5 应用做简单的调整,让其消费部署在 SAP BTP Kyma 运行环境上刚刚创建的 Function. 至此我们完成了 UI5 应用的开发,可以开始构建 Docker 镜像文件了。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第14张

新建 Dockerfile 文件,该 Docker 镜像构建具体分为两个步骤,即所谓的多阶段构建。首先,使用关键字 FROM,指定构建的基本镜像为 node:current-slim,执行 npm install 下载 SAP UI5 应用 package.json 文件里定义的依赖,然后执行 npm run-script build,生成包含该 UI5 项目生产环境版本资源文件的 dist 文件夹。考虑到运行一个 SAP UI5 应用,只需要构建出的 dist 文件夹里的资源即可,而 node:current-slim 镜像内的所有内容,与 SAP UI5 应用的运行毫无关系。因此,第10行代码,我们用 FROM 指定了一个新的镜像,即 nginx:alpine. 第11行用关键字 COPY,将前一镜像构建出的 dist 文件夹的内容,拷贝到 nginx 工作目录即 html 内,这样能大大减小最后构建出的 Docker 镜像的尺寸。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第15张

使用如下命令行构建 Docker 镜像文件:

docker build -t i042416/ui5-kyma -f docker/Dockerfile .

注意,命令行末尾的".",代表当前目录,而非命令行结束的标识符。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第16张

使用 docker push 命令,将该构建好的镜像,上传到 Docker Hub 去:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第17张

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第18张

我们在本地测试一下这个构建好的 Docker 镜像。

通过命令行本地启动 Docker 容器:

docker run -p 1081:80 -d i042416/ui5-kyma

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第19张

将镜像内 nginx 对应的 80 端口,映射成本地宿主机的 1081 端口,然后浏览器打开 localhost:1081 ,确保 SAP UI5 应用能够正常工作,并且检查此时加载的资源,已经是 dist 文件夹里构建好的生产系统版本的文件,即 component-preload.js:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第20张

最后一步,将该 Docker 镜像,通过 Kubernetes 规范部署到 SAP Kyma 上。可以使用 Kubernetes 提供的命令行工具 kubectl,也可使用 SAP Kyma 控制台的图形界面。

创建一个名为 deployment.yaml 的文件,里面定义一个名为 jerry-ui5-kyma 的 Deployment 资源,这是 Kubernetes 原生支持的资源类型之一。指定使用之前构建好并且上传到 Docker Hub 的镜像文件:i042416/ui5-kyma:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第21张

回到 Kyma 控制台,菜单 Deployment new workload -> Upload YAML, 选择前一步创建好的 deployment.yaml:

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第22张

确保该 Deployment 处于 Running 状态:
一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第23张
最后基于 jerry-ui5-kyma 创建一个 API Rule,从而使其可以在 Internet 上被访问。下图高亮区域,即是被构建在 Docker 镜像里的 SAP UI5 应用,在 SAP Kyma 运行环境里被访问的 URL:

https://jerryui5kyma.c-46d70f2.kyma.shoot.live.k8s-hana.ondemand.com/

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第24张

至此,我们已经逐步实现了本文开头提出的任务:

(1) 本地开发一个 SAP UI5 应用
(2) 将该 SAP UI5 应用打包成 Docker 镜像
(3) 通过 Kubernetes Deployment,将包含前一步的 Docker 镜像,部署到 SAP Kyma 上并运行。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第25张
既然 SAP Kyma 底层基于 Kubernetes,所以当然也可以使用 Kubernetes 命令行工具 kubectl,直接操纵 SAP Kyma 资源。

在 SAP Kyma 控制台右上角,点击 Get kubeconfig 下载同名配置文件。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第26张

将下载到本地的 kubeconfig.yml 文件的路径,配置成环境变量 KUBECONFIG.

执行 kubectl version 命令行,能看到 kubectl 打印出客户端和服务器端的 git 和 go 运行环境的版本号:
一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第27张

接下来就能使用 kubectl 命令行,查询刚才下载好的 kubeconfig.yml 文件指向的 SAP Kyma 实例上运行的各种资源了。

比如使用如下命令行,查询到 SAP UI5 应用运行的 pod 名称为:jerry-ui5-kyma-785b458ff5-zm7xt

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第28张
得到 pod 名称后,使用命令行进入该 pod 默认容器,即 jerry-ui5-kyma 内部:

kubectl exec -it jerry-ui5-kyma-785b458ff5-zm7xt -n dev -- /bin/sh
一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第29张

进入容器内部之后,切换到目录 /usr/share/nginx/html, 这里能看到我们之前本地开发的 SAP UI5 的资源文件。 这些文件,正是由我们之前制作 Docker 镜像时编写的 Dockerfile 里的最后一行,通过 COPY 操作,从前一个 node 基准镜像,执行 npm run-script build 命令后构建而成的 UI5 生产版本的资源文件,拷贝到 nginx 镜像的 /usr/share/nginx/html 目录而生成的。

一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第30张

希望本文能够帮助大家,对如何开发 SAP UI5 应用,并部署和运行于 SAP Kyma 上的完整步骤,有一个直观的了解。本文提到的 SAP UI5 应用,后续还有很多可以继续增强的地方,比如实现订单添加和删除功能,并使用 Redis 进行持久化,同时将 Redis 服务也部署在 SAP Kyma 上,然后让该 UI5 应用,消费 SAP Kyma 上的 Redis 服务,而非本文介绍的 Serverless Function. 大家可以试着自行实现,或者等待本公众号后续的分享。感谢阅读。

更多阅读

更多Jerry的原创文章,尽在:"汪子熙":
一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去第31张

免责声明:文章转载自《一步步把 SAP UI5 应用部署到 SAP BTP Kyma 运行环境中去》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Vue 3.2 刚刚发布!新的单文件组件,响应式性能大幅提升kafka集群搭建和使用Java写kafka生产者消费者下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Nginx大文件(百M以上)的上传下载实现技术

javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求     1. 通过form表单向后端发送请求          <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" m...

几种NFS系统对比,选型理由

选型需要考虑,但不限于如下几个方面: 自建 nfs 选型,moosefs,ceph,seaweedfs,lustre,glusterfs,FastDFS 等。 如何平滑迁移?大文件、软链不少,小文件较多,迁移耗时长,且迁移过程中要保证不停服运行。 要考虑做隔离,除了给平台提供服务,还会给其他产品提供服务,各自挂了不影响其他的。 容错恢复能力和监控。 h...

微信小程序:小程序中使用Less

   配置: 首选项 -> 设置 -> 用户 -> 扩展 (找到EasyLess插件,编辑setting.json文件进行配置) 点击vscode左下角的à设置à点击右上角的à添加以上代码(将less文件编译成.wxss文件) 新建index.less文件,内容如下: 编译之后生成index.wxss文件,内容如下: Less语法...

springmvc/springboot开发restful API, 使用MockMVC 编写测试用例

  非rest的url写法: 查询 GET /user/query?name=tom 详情 GET /user/getinfo?id=1 创建 POST /user/create?name=tom 修改 POST /user/update?id=1&name=tom 删除 GET /user/delete?id=1   rest风格的写法...

使用U盘安装mint

系统坏了,重新装的时候,硬盘甚至都没法格式化。。。所以,狠狠心买了块固态硬盘,123G,威刚。 想自己装Linux系统,这样用起来更方便一点,不用装虚拟机,然后再跑linux什么的。最后选了mint。 好嘛,问题来了,怎么装上去? 其实,找张空盘,把系统刻上去,这可能是最省力的方法了。但是,问题是另一台笔记本没有光驱。so。。。只能考虑u盘。 最初,是想尝...

不离开Emacs完成简单程序的编辑编译运行(windows或Linux)

(1)打开Emacs (2)建立一个新的程序文件. 执行 C-x C-f, 然后在屏幕的底部出现minibuffer,光标提示你输入文件名称, 文件名称要带上后缀名,如hello.cpp。回车,然后开始编辑源代码。 (3)编译代码。执行Alt-x compile,出现minibuffer,提示你输入编译命令。 默认情况下,有个make -k出现在min...