App deployment to Linode Kubernetes Cluster

✨ Introduction

Hello Everyone! I am going to share my experiences of the Linode x Hashnode Hackathon with you all.

Before I deep dive into the development of what I rebuilt an app during the hackathon, I would like to tell about my experiences in my words.

When I first came across Linode x Hashnode Challenge on hashnode, I was overwhelming to find related track which I could be fit for and build an app to enrich my knowledge here and there to get into it. It was really a learning opportunity to someone who is newbie and wants to build and deploy any stuff under the hood. I stepped into the Linode kubernetes on the dashboard left side bar, where I didn’t even know what the ecosystem around it is. I was much curious then. Next, I delved into one of the projects for a few days and looked into a few options to deploy and integrate with continuous delivery. I managed to rebuild an app using React framework and use the most of it to trigger the app on LKE cluster.

💻 Introducing Taj Mahal Restaurant App

Taj Mahal Restaurant is a country wide famous restaurant where service is awesome and food's quality is exceptional.

The app I tried to rebuild was Restaurant App which allows you to provide services based on the online resource and to book orders available on the menu. This app also has other feature that allow you to view the items on different categories using the search bar, choose the items and buy it based on the availability.

🔥 Inspiration !

With themes related to open-source project using Linode and the environment in general, deploying an app to Linode Kubernets cluster and leveraging ArgoCD came to my mind. Although they are typically exciting road trips, sometimes there are moments when you aren't sure what to do and need some inspiration. Inspired by the Kubernetes and DevOps tool i.e. Linode Kubernetes Engine(LKE), Nginx Ingress Controller and CD pipeline provided by ArgoCD tool, and became excited to create a web application on top of this tool deploying to LKE cluster. My project aims to establish the network secure using nginx ingress loadbalancer to route the traffic accessible to users and admin when it comes to booking app.

🤔 How I built it?

Frontend built using React and Bootstrap CSS, deployed to LKE Cluster, Overpass for querying food item API (currently), Two stages docker images built under the hood and nginx server CD pipeline using ArgoCD platform.

⚙️ Tech Stack

ReactJs
Bootstrap CSS
Food item API (currently)
Kubernetes
Two stage Docker
ArgoCD

⚒️ Workflow Diagram

🚀 Development

First of all, I will describe on how the app works and how I leverage Linode platform to deploy it. More specifically, I will show how to run my web app smoothly, containerise it in a docker hub, deploy it on LKEcluster for production using nginx ingress controller, and set up CD pipeline through ArgoCD.

Let's run our app using yarn start before that make sure you have installed the dependencies using yarn install. The host machine would land you on the home page of Taj Mahal Restaurant App as simple as that.

The menu page shows you the available items as shown below that you can choose and book your order through contact details.

If you want to search for deserts or beverages, you will able to use search bar and view the items, later you can contact the restaurant to order.

Now, let's move to deployment steps. What I did is I used Linode Kubernetes cluster to deploy which is quite accessible Linux cloud solutions and services. I created 3 nodes under the hood and spun up the pods and services to the cluster. Later I configured loadbalancer to expose the service accessible through outside the network using nginx ingress controllers. This is so easy that you don't have install nginx server locally, you can install nginx ingress controller as your choice using helm chart as simple as that without any much memory usage.

The ingress manifest can be created and configured as per your network rule as below:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: res-ingress
spec:
  ingressClassName: nginx
  rules:
    - host: myres-svc.172.105.44.234.nip.io
      http:
        paths:
          - pathType: Prefix
            path: /    
            backend:
              service:
                name: restuarant-service
                port:
                  number: 80

You can customise as per your desired state of your ingress for loadbalancer.

kubectl get ingress -n myc

NAME          CLASS   HOSTS                             ADDRESS          PORTS   AGE
res-ingress   nginx   myres-svc.172.105.44.234.nip.io   172.105.44.234   80      20h

The below image shows the metrics of the usage of the network exposed externally as well as the CPU consumption.

As soon as I deployed it to cluster, I set up the CD (Continuous Delivery) pipeline to sync and automate the application with the git repo and update the ecosystem accordingly as a GitOps as a Service. Argo CD is a declarative, GitOps continuous delivery tool for Kubernetes.

This below pipeline shows the network connectivity through loadbalancer using nginx ingress controller which controls Traffic routing by rules defined on the Ingress resource.

📽️ Video Demo

https://youtu.be/S1Q741JMB98

⏭ What's next! and Summary

I will try to make my project more user-friendly and include more resources in an organised way. Leverage the application to support the chat feature from the chat bot API. If you have any idea to enhance the page, feel free to raise an issue and request for a feature or even you are more welcome to create a PR for that. Plz follow our Contributing guide before that.

The experience with the Linode platform is amazing when you first deploy your app and configure the kubernetes engine. Even you can make use of the marketplace features and their own CLI tool to configure clusters, nodes, etc.

Afzal Ansari's Blog