Deploy SAP ui5 applications to the sap BTP kyma operating environment step by step

Jerry 2018 I wrote two articles in , Introduced how to in Kubernetes This container choreography platform runs a container that contains SAP UI5 Applied Docker Mirror image .

• stay Kubernetes Up operation SAP UI5 application ( On ）

• stay Kubernetes Up operation SAP UI5 application ( Next ）

SAP Kyma, It's a by SAP Promote open source enterprise software expansion platform , Bottom based Kubernetes, Can be Serverless/ The way of microservice Architecture , Yes On-premise And Cloud Applications .

SAP Business Technology Platform ( Hereinafter referred to as" BTP) On 2020 Support for Kyma Running environment . This article introduces how to make local development SAP UI5 application , Pack it up Docker Image file , And then deploy and run on SAP BTP Kyma In the running environment .

First, we'll develop a local SAP UI5 application . The source code of this application , You can Github download .

This SAP UI5 Application building , take SAP UI5 Tool Provided Command Line Interface, namely @ui5/cli complete .

Using the command line npm run-script build, call UI5 CLI Build , Get the production version of SAP UI5 Resource file , Stored in the project's dist In the folder . Later we'll make Docker When you mirror a file , Will use dist Resource files in the folder .

Using the command line npm run-script start, Run this locally SAP UI5 application , The interface is as follows ：

The application displays the three order data , Maintenance in project engineering orders.json In the file .

For demonstration purposes , I only realized the order list display function . And orders add , Modify and delete functions , You can do it yourself .

Let's continue with this SAP UI5 Apply to adjust ： The data source of the order list , From local orders.json file , Adjust to consumption SAP BTP Kyma Running on Serverless Function.

Sign in SAP BTP Cockpit, Now even Trial account number , It can also be used for free Kyma Running environment .

Click on Go to Dashboard, You can get into Kyma Console. ：

stay dev In namespace , Create a new Function：

Function Name it order-manager, Its implementation technology stack is Node.js 12：

In the function implementation of the source code Source Area , Before SAP UI5 In engineering orders.json The contents of the document , Copy it to the function editor below . After preservation ,Function The status changes to RUNNING, Available now . This is reflected. Kyma Serveless The advantage of Computing ： Developers only need to focus on the writing of function business logic , There is no need to care about the deployment and running environment of functions .

Switch to Function Configuration panel , Click on Expose Function, Create a new API Rule, Pass this function through HTTP The way it's called , Exposed to the Internet Other consumers on the Internet .

API Rule Do the maintenance as shown in the figure below , among Service The drop-down list shows , Is to create Function The same name is automatically generated when Service resources .

API Rule After creation , Click on its Host Field , You can pass HTTP The way , Call to execute the corresponding Function 了 .

Access the hyperlink in the browser , You can see us in Function In the source code , Hard coded three order data ：

Yes UI5 The application makes simple adjustments , Let its consumption be deployed in SAP BTP Kyma Just created on the runtime Function. So far we're done UI5 Application development , You can start building Docker Image file .

newly build Dockerfile file , The Docker Image building is divided into two steps , It's called multistage construction . First , Use keywords FROM, Specifies that the base image of the build is node:current-slim, perform npm install download SAP UI5 application package.json The dependencies defined in the file , And then execute npm run-script build, The generation contains the UI5 Project production environment version resource file dist Folder . Consider running a SAP UI5 application , Just build it up dist The resources in the folder are enough , and node:current-slim Everything in the mirror , And SAP UI5 It doesn't matter how the application works . therefore , The first 10 Line code , We use it FROM A new image is specified , namely nginx：alpine. The first 11 The line uses keywords COPY, Build from the previous image dist The contents of the folder , copy to nginx The working directory is html Inside , This greatly reduces the amount of Docker The size of the mirror .

Use the following command line to build Docker Image file ：

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

Be careful , At the end of the command line ".", Represents the current directory , Instead of the identifier at the end of the command line .

Use docker push command , Put the image in place , Upload to Docker Hub Go to ：

Let's test it locally Docker Mirror image .

Start locally from the command line Docker Containers ：

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

Put the image inside nginx Corresponding 80 port , The mapping costs the host's 1081 port , And then the browser opens localhost:1081 , Make sure SAP UI5 The application works properly , And check the resources loaded at this time , It's already dist Files of the built production system version in the folder , namely component-preload.js：

The last step , Will be Docker Mirror image , adopt Kubernetes Specifications are deployed to SAP Kyma On . have access to Kubernetes Command line tools provided kubectl, You can also use SAP Kyma The graphical interface of the console .

Create a file called deployment.yaml The file of , There is a definition called jerry-ui5-kyma Of Deployment resources , This is a Kubernetes One of the resource types that are natively supported . Build and upload to before use Docker Hub The image file of ：i042416/ui5-kyma:

go back to Kyma Console , menu Deployment new workload -> Upload YAML, Choose the one you created in the previous step deployment.yaml:

Ensure that Deployment be in Running state ：

Based on the jerry-ui5-kyma Create a API Rule, So that it can be used in Internet I was interviewed on . Here's the highlight , It's built on Docker In the mirror SAP UI5 application , stay SAP Kyma In the runtime environment URL：

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

thus , We have gradually realized the task proposed at the beginning of this article ：

(1) Develop a local SAP UI5 application
(2) Will be SAP UI5 The application is packaged into Docker Mirror image
(3) adopt Kubernetes Deployment, Will include the previous Docker Mirror image , Deploy to SAP Kyma And run .

since SAP Kyma Bottom based Kubernetes, So of course you can also use Kubernetes Command line tools kubectl, Direct manipulation SAP Kyma resources .

stay SAP Kyma The upper right corner of the console , Click on Get kubeconfig Download the profile with the same name .

Will download to local kubeconfig.yml Path to file , Configure as an environment variable KUBECONFIG.

perform kubectl version Command line , Can see kubectl Print out the client and server git and go The version number of the running environment ：

Then you can use kubectl Command line , Check the download just now kubeconfig.yml The file points to SAP Kyma All kinds of resources running on the instance .

For example, use the following command line , Query to SAP UI5 Application running pod The name is ：jerry-ui5-kyma-785b458ff5-zm7xt

obtain pod After name , Use the command line to enter the pod Default container , namely jerry-ui5-kyma Inside ：

kubectl exec -it jerry-ui5-kyma-785b458ff5-zm7xt -n dev – /bin/sh

Once inside the container , Switch to directory /usr/share/nginx/html, Here we can see what we developed locally before SAP UI5 Resource files for . These documents , It was made by us before Docker It's written in mirror time Dockerfile The last line in , adopt COPY operation , Once upon a time node Reference image , perform npm run-script build Built on command UI5 Production version of the resource file , copy to nginx mirrored /usr/share/nginx/html Directory .

I hope this article can help you , How to develop SAP UI5 application , And deploy and run on SAP Kyma Complete steps on , Have an intuitive understanding of . As mentioned in this article SAP UI5 application , There are still many areas that can be further enhanced in the future , For example, we can add and delete orders , And use Redis persist , At the same time Redis Services are also deployed in SAP Kyma On , Then let it be UI5 application , consumption SAP Kyma Upper Redis service , Instead of what this article introduces Serverless Function.