How to convert your web application to a Helm chart

In this tutorial, you learn how to transform your web app to a Helm chart, which can be deployed on IBM Cloud Private or on a private cluster.

Note: This tutorial does not bind any Watson services, because it is a private cloud, which is hosted on premises and not on a public IBM cluster. Therefore, if you want to integrate any IBM Cloud service, you need to do that by using the conventional API call mechanism. For reference, you can look at my GitHub repo. Alternatively, you can bind the services to your cluster by using these steps and updating the deployment.yaml accordingly.

Prerequisites

  1. Install Docker in your development environment and create an account in Docker.
  2. You must have a private cluster, either through IBM Cloud Private or on a Public IBM Cluster. If you are new to IBM Cloud Private, then you need to first complete this short exercise to get familiar with IBM Cloud Private. Or you can navigate to your IBM Cloud dashboard > Containers > Create cluster.
  3. Go through this tutorial to set up your CLI and to create a private cluster. After this step, you will have kubectl and bx commands configured.
  4. (Note: This step is only for IBM Cloud Private users) Log in to your IBM Cloud Private dashboard and navigate to Command Line Tools > Cloud Private CLI. Download and install bx pr command.

Estimated time

Completing this tutorial should take about 20-30 minutes.

Steps

Build the Docker image

  1. First create your web-app and create the Docker file in the same directory. For example, check the icp_helmchart directory in my GitHub repo, which contains the Dockerfile and application-dependent contents.
    Check for Dockerfile and app in the same directory
    Here, app.py runs a simple Flask-based web-app with the port as 6111.
  2. Build the Docker image and push it to your public or private Docker repository; it should be pulled without any issues. To build the Docker image, check out my GitHub repo. Then execute the command: docker image build -t <docker_username>/<docker-image-name>:<docker-image-tag>. In this case, I named my app arprasto/userinfoicphelmchart:v1.
  3. Next, push your locally built Docker image to the cloud by using docker push <docker_username>/<docker-image-name>:<tag>.

Prepare the Helm chart

  1. Update the below properties in the values.yaml file:

    • image.repository: <docker_username>/<docker-image-name>
    • image.tag: <docker-image-tag>
    • service.internalPort: 6111
    • service.externalPort: 6111
    • service.nodeport: 31000 This port will be exposed to svc to navigate your app home page through a web browser.

    Note: service.internalPort and service.externalPort should be similar to the port specified in app.py. See how they are related and co-dependent here!

  2. Next, open the icp_helmchart directory and run: helm --debug install icphelmchart --dry-run. You can check that all values appeared properly by referencing the Kubernetes document, “Connecting Applications with Services”. After running the above command, you should see output similar to the one below:

    [debug] Created tunnel using local port: '52521'
    [debug] SERVER: "127.ø.e.1:52521"
    [debug] Original chart version: ""
    [debug] CHART PATH: Users/arpitrastogi/scrap/icp/icp_helmchart/icphelmchart
    
    NAME:    full—quoll
    REVISION: 1
    RELEASED: Mon Dec 17 19:53:41 2018
    CHART: icphelmchart—0.1.0
    USER-SUPPLIED VALUES:
    {}
    
    COMPUTED VALUES:
    image:
     pullPo1icy: Always
     repository: arprasto/userinfoicphelmchart
     tag: v2
    replicaCount: 1
    resources:
     limits:
       memory : 512Mi
    requests :
       memory: 128Mi
    service :
     externalPort: 6111
     internalPort: 6111
     name: icphelmchart
     nodeport: 31000
     tier: frontend
     type: NodePort
    
    HOOKS:
    MANIFEST:
    
    # Source: icphelmchart/templates/service.yaml
    apiVersion: v1
    kind: Service
    metadata:
    name: icphelmchartsvc
    labels:
       run: icphelmchart
    spec:
    type: NodePort
    ports:
       — port: 6111
     nodePort: 31000
     protocol: TCP
     targetPort: 6111
    selector:
     run: icphelmchart
    
    # Source: icphelmchart/templates/deployment.yaml
    apiVersion: extensions/vlbetal
    kind: Deployment
    metadata :
     name: icphelmchart
    spec :
     replicas: 1
     template:
           metadata:
     name: icphelmchart
     labels:
       run: icphelmchart
       spec :
     containers :
     — name: icphelmchart
       image: "arprasto/userinfoicphelmchart: v2"
       imagePuIIPolicy: Always
    

Deploy helmchart into an IBM private cluster

  1. Navigate to Resource List > Kubernetes Clusters and click on your newly created cluster**.
  2. You will see a tab, called Access:
    Access your new cluster There will be instructions on this Access page, such as downloading CLI tools and other items that you need to follow and execute.
  3. Run ibmcloud regions to check its API endpoints:

    Listing regions...
    
    Name        Display name
    au—syd         Sydney
    jp-tok         Tokyo
    eu—de         Frankfurt
    eu—gb         London
    us-south     Dallas
    us—east     Washington DC
    
  4. Run ibmcloud login -a https://api.<your_cluster_region_name>.bluemix.net

  5. Run ibmcloud cs clusters to make sure that you have successfully connected to your private cluster. Make sure to keep note of your <cluster-name>.
  6. Open the icp_helmchart directory and run helm install icphelmchart. This will install your helmchart into your cluster.
  7. To check the running status of your helmchart, run kubectl get all|grep icphelmchart.

    NAME                                      READY      STATUS          RESTARTS      AGE
    pod/icphelmchart-7b8dcd9685-p628p         1/1        Running         0             2m
    
    NAME                                      TYPE       CLUSTER-IP      EXTERNAL-IP   PORT(S)          AGE
    service/icphelmchartsvc                   NodePort   172.21.222.134  <none>        6111:31000/TCP   2m
    service/kubernetes                        ClusterIP  172.21.0.1      <none>        443/TCP          2h
    
    NAME                                      DESIRED    CURRENT         UP-TO-DATE    AVAILABLE        AGE
    deployment.apps/icphelmchart              1          1               1             1                2m
    
    NAME                                      DESIRED    CURRENT         READY         AGE
    replicaset.apps/icphelmchart-7b8dcd9685   1          1               1             2m
    

    If your pod is not in a running state, check the root cause of it by running kubectl --tail=1000 logs <pod-id>. For example, in the above screenshot we can see the logs by running kubectl --tail=1000 logs icphelmchart-7b8dcd9685-p628p.

  8. Run ibmcloud cs workers <cluster-name> to check the public and private IP addresses of your cluster.

    ibmcloud cs workers <cluster-name>
    
    ID                Public IP   Private IP   Machine Type   State    Status   Zone     Version
    Your-cluster-id   x.x.x.x     x.x.x.x      free           normal   Ready    me101    1.10.11_1536
    
  9. Now go to your web browser and navigate to your web-app home page: http://: Note: If you have not changed the nodeport, than you can use 31000 as the nodeport.

Deploy helmchart into IBM Cloud Private through the dashboard

  1. Go to your parent directory above the helming directory. For example, in my case here’s my parent directory:
    Parent directory helm
  2. cd icp_helmchart and then helm package icphelmchart. This builds a <helm-name>.tgz file.
  3. mv .tgz to helmrepo/
  4. Before the next step, publish your GitHub repo where you want to push your helm chart. Publish your git repository by using this guide. In my case, the published directory is https://arprasto.github.io/icp_helmchart/helmrepo/. This will generate an index.yaml file inside your helmrepo/ directory.
  5. Push your above changes to GitHub.
  6. Now to add your own helm dir to IBM Cloud Private, log in to the IBM Cloud Private dashboard. Navigate to Manage > Helm Repositories > Add Repository. Then give a name to your directory and the published repo URL and add it.
  7. Sync your repositories.
  8. Navigate to Catalog > helm chart. This is where you’ll see your helm chart published.

Deploy helm chart into IBM Cloud Private through a shell prompt

Complete the following steps to deploy your new helm chart into IBM Cloud Private through shell prompts.

  1. bx pr init
    Deploy new helm chart 1
  2. bx pr login
    Deploy new helm chart 2
  3. bx pr clusters, which shows the .
    Deploy new helm chart 3
  4. bx pr cluster-config <cluster-name>
    Deploy new helm chart 4
  5. Add your helm repository by using helm repo add <alias-name> <published-repo-url>
    Deploy new helm chart 5
  6. Update your helm repo to sync it with your IBM Cloud Private account by using helm repo update.
    Deploy new helm chart 6
  7. Now search to check if you can see your helm chart in the local helm repo by using helm search <helm-chart-name>.
    Deploy new helm chart 7
    At this point you should be able to see your helmchart listed. If not, please resync or check if your changes checked into Git.
  8. You can now install your helm chart into your IBM Cloud Private cluster by using helm install <helm-chart-name>.

Summary

In this tutorial, you saw how to convert your web-app to helm chart and how to deploy it in a public or private cloud. This approach is also another way to convert your conventional web app to a microservice. I encourage you to continue experimenting with Helm charts and building on IBM Cloud for free.

Suggested further reading

Arpit Rastogi