There are only 30 days left in 2018. On the last day of 2017, Jerry set a goal: the wechat official account will guarantee to publish at least one SAP original technical article every week in 2018.
Judging by the number of articles That Jerry has tallies behind the scenes for all of 2018, that goal has already been achieved ahead of schedule. To thank you for your support, on the last day of 2018, Jerry will publish a collection of XX Original Articles of SAP Chengdu Research Institute in 2018, which contains the articles published by colleagues of SAP Chengdu Research Institute throughout 2018.
Jerry went to SAP Shanghai Research Institute in mid-November to attend the internal training of Kubernetes (refer to my previous article: Newton on the Shoulders of Giants: Kubernetes and SAP Kyma for details). Colleagues in SAP Shanghai Research Institute can contact Yang Katie if they want to participate in this internal training.
In order to avoid forgetting all of my three teachers soon, I had to find some exercises for myself to reinforce what I had learned.
When Jerry joined the SAP CRM Fiori development team at the end of 2014, the CRM Fiori application we developed was still deployed on the traditional SAP Netweaver. Please refer to my article: Three Deployment modes of SAP Fiori Application for details.
Later, I came into contact with Salesforce’s Cloud platform Heroku, followed the example of many programmers to build their blog on Github, and then came into contact with SAP’s cloud platform, and naturally tried to deploy SAP UI5 on these platforms:
- 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 that you know Kubernetes, let’s try running SAP UI5 applications on Kubernetes.
The UI5 application I used to deploy is called Jerry’s Service Order. It is a typical master-detail application. The Master List on the left is a List of all Service orders.
This UI5 application looks like the one above. For simplicity, all displayed data is read from a JSON file in the project, and new orders cannot be created or modified. The app is available on my Github:
Github.com/i042416/jer…
As the title of this article suggests, the ultimate goal of this exercise is to get this UI5 application running on Kubernetes, so the first step is to get it running in a container. Just like SAP Kubernetes internal training, I chose Docker, a very popular container engine, as the container technology of this Kubernetes exercise.
For an introduction and installation introduction to Docker, please refer to Ruan Yifeng’s article: Getting Started with Docker
www.ruanyifeng.com/blog/2018/0…
Why do we use Docker containers? Here’s an excerpt from Ruan Yifeng’s blog:
“Docker is a wrapper around Linux containers that provides an easy-to-use interface for using containers. It is currently the most popular Linux container solution.
Docker packages the application and its dependencies in a single file. Running this file generates a virtual container. Programs run in this virtual container as if they were running on a real physical machine. With Docker you don’t have to worry about the environment.
Overall, Docker interface is quite simple, users can easily create and use containers, put their own applications into the container. Containers can also be versioned, copied, shared, and modified just like normal code.”
Jerry combed through the process of running SAP UI5 applications in Docker containers, which consists of three steps:
1. Make UI5 applications run in local containers
2. Make a new image of the local container containing the UI5 application
3. Upload the local image to the Docker Hub and download it for testing
Here are the steps.
1. Make UI5 applications run in local containers
If you can only run Docker’s Hello World, where do you start to get that requirement?
Start with images that contain web servers that can run UI5 applications, of course. Here I chose Nginx images that have 10.4K stars on Docker Hub.
Run the image directly with the following command:
docker run -it nginx
Use docker ps to get the instantiated container ID:
Then enter the running container and execute the shell command:
docker exec -it bbc5d48a761c /bin/sh
At the # prompt, go to the directory inside the container: /usr/share/nginx/html
If we can find a way to copy UI5 application files from Github into this directory, we will have achieved the purpose of running UI5 application in the local Docker container.
There are many ways to download github resources to the designated directory inside the Docker container. Here Jerry uses the simplest way, which I think is to use the Docker Volume technology to attach A directory on the host to the HTML folder inside the container in the way of Volume. In this way, we can directly download the WebApp folder on Github repository to the host folder A, which will automatically appear in the form of Volume in the internal mapped directory of the container.
docker run -d -p 1081:80 -v pwd/ webapp: / usr/share/nginx/HTML/webapp – name jerry – custom nginx
The Nginx service is exposed through port 1081 with the parameter -p 1081:80, so I’m going to test the newly started container instance this time using http://localhost:1081.
Make sure that the **/usr/share/nginx/html** folder does contain the EXPECTED UI5 application.
Type localhost:1081/ webApp in the browser to make sure the UI5 app is accessible. Now the app is running successfully in the local Docker container.
2. Make a new image of the local container containing the UI5 application
So far, this local docker instance is not available for others to use. Therefore, we have to make use of Dockerfile to make a docker image containing UI5 application and upload it to docker Hub for others to download.
Create a folder like Jerry-build, put the WebApp folder in it, and create a DockerFile with three lines:
**FROM nginx:stable **
**COPY webapp/ /usr/share/nginx/html/webapp/ **
RUN ls -la /usr/share/nginx/html/webapp*
These three instructions are not difficult to understand semantically. The first line of the FROM command tells the Docker image builder routine to build new images using the stable version of Nginx as the base image. The second COPY command is responsible for copying all UI5 resource files in the webApp folder to the corresponding directory of the Nginx Docker image. The third line runs the shell command ls to generate a new image file.
Dockerfile syntax please refer to Docker official documentation:
Docs.docker.com/engine/refe…
Execute the command docker build., the last one. Indicates current directory.
**-t jerry-nginx-image:1.0** Rebuild an image named jerry-nginx-image:
After a successful build, expose a new port 1082 with the parameter -p:
Docker run -d -p 1082:80 jerry-nginx-image:1.0
Now localhost:1082/ WebApp can also access UI5 applications.
Using ** Docker images, ** now we can see the image built, and we will push it to the Docker Hub.
3. Upload the local image to the Docker Hub
Docker Hub is used almost exactly the same way as Github. As an aside: Github was acquired by Microsoft in June, but the user experience hasn’t changed at all.
For more unusual uses of Github, see Jerry’s article: The Unusual uses of Github at the time of its Acquisition by Microsoft.
First register an account with Docker Hub:
Create a new repository:
Named i042416 / ui5 – nginx:
The new empty warehouse looks like this:
Docker ps to get the ID of the docker container running locally:
Commit the changes to the local container using the commit command (analogous to git commit) :
docker commit 53de4188b702 i042416/ui5-nginx
Now you’re ready to push this locally committed image to the Docker Hub.
Run the docker login command:
For those of you deploying applications on CloudFoundry, docker Login can be likened to CF Login:
The final step is to push the local image to the Docker Hub using a Docker push:
Refresh the new warehouse on Docker Hub, can observe the local push record and mirror size.
Now you can notify your friends to consume the image on their computers. Of course, you can also delete the local image on your computer and use Docker Run.
In both cases, we will see the prompt: Unable to find image ‘i042416/ UI5-nginx :latest’ locally, and then observe the download of the remote image.
Start a new container using port 1080 based on the image i042416/ UI5-nginx:
Localhost :1080/webapp works:
The docker inspect command verifies that the started container is indeed based on the image i042416/ UI5-nginx.
In the second half of this topic, we will use this i042416/ UI5-nginx image to start our journey into Kubernetes. Stay tuned.
Read more
- Github is being bought by Microsoft – those alternative uses of Github
- Three deployment modes for SAP Fiori applications
- Newton on the Shoulders of Giants: Kubernetes and SAP Kyma
For more of Jerry’s original articles, please follow the public account “Wang Zixi “:
