Step by step to run your UI5 application on Kubernetes - part 1

[JerryWang]

• Step1: make UI5 application run in your local Docker container


• Step2: package your UI5 web application into a new image by dockerfile


• Step3: publish the local image to Docker hub

Two weeks ago I joined a training held in SAP Labs China about Docker and Kubernetes.

And after this training, I wrote a post for local partners in China, briefly introducing why Kubernetes is also needed within SAP and relationship between Kubernetes and SAP Kyma. For more details please refer to my article: the Newton on shoulders of the giant.

As I am just quite a newbie in this completely new world, I would like to share what I have learned in the community.

Still use our SAP UI5 application for example.

In the post I have illustrated how to deploy a SAP UI5 application to various platform:

• Step by step to host your UI5 application in Heroku


• Step by step to host your web application to Github


• Deploy your web application to Cloud Foundry which can access resource from On-Premise ABAP system

Now it's time to learn how to deploy the same UI5 application to Kubernetes.

The UI5 application I use is a typical "Master-Detail" application which could be found from my github.

My aim is to deploy and make it running smoothly in Kubernetes，just as what I did the same in Heroku, Github and SAP Cloud Platform.

In order not to make this blog too lengthy and due to the fact that container is a key to Kubernetes, the article is splited into two parts. This blog as the first part will show you how to make the UI5 application running within container. And I choose Docker, a very popular application container engine for demonstration.

Follow the instructions of this blog and you will in the end have the UI5 application running in Docker container.

Step1: make UI5 application run in your local Docker container

Now let's start by exploring the "star" Docker image, Nginx, which has got so far 10.4k stars.

Use the following command to run Nginx image in container:

docker run -it nginx

Use docker ps to get the id of instantiated container:

and enter this running container via docker exec -it with shell command /bin/sh:

Now we see the "#" prompt within Docker container. The folder /usr/share/nginx/html is the place where your web application must be located.

Now we should think about an approach to download the UI5 application to the path /usr/share/nginx/html in Docker container.

I use "Docker Volume" which I think is a convenient way to pass some data from host to Docker container and vice versa.

docker run -d -p 1081:80 -v `pwd`/webapp:/usr/share/nginx/html/webapp --name jerry-custom nginx

Use the above command, I create a new Docker container instance by mapping the folder webapp in my host to the folder with the same name in container internal folder /usr/share/nginx/html, which means as soon as I put anything in host webapp folder, the same content should be immediately visible in Docker container as well.

The option -p 1081:80 also exposes port 1081 instead of the default 80 port, so later we will verify via url localhost:1081.

Now download all files within webapp folder from my github into webapp folder in my host, and peek container folder /usr/share/nginx/html to ensure everything is there, too.

Now launch url localhost:1081/webapp and you should see the UI5 application as expected.

Step2: package your UI5 web application into a new image by dockerfile

Till now the UI5 application is only running in my local Docker container and thus could not be consumed by others without publishing it into Docker hub.

And the prerequisite for publish is to package the application on top of Nginx image into a new Docker image.

Create a new folder such as jerry-build folder in the host and move webapp folder into it, and write a new file dockerfile with the following three lines:

FROM nginx:stable

COPY webapp/ /usr/share/nginx/html/webapp/

RUN ls -la /usr/share/nginx/html/webapp*

These are very self-explained instruction which tells Docker utilities how to burn a new image.

Let's first have a dry run without specifying any new image name:

The successful message indicates the readiness to have an official image build now:

I would like to have "jerry-nginx-image" as new image name:

Once this new image is ready, ensure its working in operation by the following command:

docker run -d -p 1082:80 jerry-nginx-image:1.0

Now this image is available in my local image repository and available for push into Docker hub.

Step3: publish the local image to Docker hub

For those readers who reach this part, I assume you own git experience already and thanks to the docker design, you don't need to learn anything new to push the local image into Docker hub - everything works exactly the same as how you push your application code to github.com via git client.

Of course you should first create an account in Docker hub.

And create a new repository for the image to be uploaded soon:

I name it as i042416/ui5-nginx:

The created repository looks as below:

use docker ps to obtain the id of currently working container instance:

Perform the commit command ( just as git commit )：

docker commit 53de4188b702 i042416/ui5-nginx

docker login ( to connect to Docker hub 😞

Last step: docker push

Wait for a while till upload finishes.

Refresh your repository in Docker hub and you will see the last Updated column has changed accordingly.

Now you can tell your friends to try your new Docker image in their laptop or you can also delete the already downloaded image locally and re-launch it from scratch. In both situation, it is expected to first get notification "Unable to find image 'i042416/ui5-nginx:latest' locally and then catch sight of the remote downloading behavior.

The result of docker inspect against running container proves that it's based on the image 'i042416/ui5-nginx' fetched from Docker hub.

Now we have finished the prerequisite to make the UI5 application running in Kubernetes. Stay tuned for the incoming really funny stuff!