Technical Articles
Step by step to run your UI5 application on Kubernetes – part 1
- 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!
Dear Jerry
Thanks for the great blog,have one doubt though. Offlate i have been trying to understand this world of containers via podcast/tutorials etc. so bear with me if my doubt sounded silly. As of now in this blog you are able to create the container image via docker and able to publish it. I feel till now you have not used any orchestator like K8S or docker swarm to create pods and then run containers on them, right? Secondly i beleive you are using the cdn for SAPUI5 right? Will it not be better if we have that also referenced locally in the conatiner thus making your image completely independent?
Thanks
Nabheet
Hello Nabheet,
Thanks a lot for your reading!
I am still a newbie regarding docker, let's learn & share 🙂
Best regards,
Jerry
Cool, thanks for the clarification yes lets learns and share?
Hi Jerry,
Greetings of the day,
I am trying to do a sample demo on this but I am stuck at this point.
In your words you have said, Now download all files within the web app folder from my GitHub into web app folder in my host,
There is no clue for me to navigate to the localhost and add these downloaded files.
How can I go to the specified localhost and add my downloaded files from your GitHub ?
If you see the above image, I have created the localhost but not able to add the files in the web app folder and go further.
Please suggest me the solution.
Thank You,
Srikar Nagadevara
Hi there,
In Docker world, host often means the physical machine where the Docker software is running. Here the main trick we have to do is how to download the UI5 source code files from github to the internal folder "/usr/share/nginx/html/webapp" of the running docker container instance.
Here I use the folder in host machine as a bridge, host means your physical laptop, not "localhost:8080". I draw a picture to demonstrate:
Best regards,
Jerry