Kubernetes Component Architecture

Krishna Dhakal — Thu, 12 Nov 2020 14:59:44 +0000

Background

With Docker you can run a single instance of the application with a simple Docker run command. In this case to run a single nodejs application you perform

docker run nodejs

Thats just one instance of your application in one Docker host.

What happens if the number of users increase and the instance is no longer to able to handle the load?

You perform the multiple instance run of your application as:

docker run nodejs

docker run nodejs

docker run nodejs

and so on.

You have to have a close watch at the load and performance of your application and deploy the instances yourself.Also if a container health is bad in some case then you have to find and replace it manually.

What about the health of host itself? What if the host crashes and is inaccessible?

The container hosted in the host are inaccessible too.

What will you do in such case where there are hundreds and thousands of instances as well as containers and your need to monitor state and health of them?

One practical approach could be to make scripts in case of those activities.But the more practical approach is to use Container Orchestration .

Container Orchestration

It is a tool and scripts collection where we can solve the scalable problem in terms of health of the containers and also the states.Usually they contain multiple Docker hosts that hosts containers.If one fails then the application is still accessible to others.

These Orchestration service helps not only in scaling our applications along different hosts but also in scaling the hosts as per the requirement.We can even setup network in between hosts and communicate the resources and activities in between. With features like load balancing such Orchestration engine has made our workflow really easier with other features like sharing storage and configuring management and security within the cluster.

There are multiple Container Orchestration solutions available in the market. Some of them are:
1.Kubernetes
2.MESOS
3.Docker Swarm

Here we will be focusing on the Kubernetes.

Kubernetes

So what could be the solution of our replica problem which was not suitable with Docker.

kubectl run --replicas=1000 my-web-server

With simple one command we can make replicas of our application by thousands of unit.

kubectl scale --replicas=3000 my-web-server

We can even make it auto scale with scale command for 3000 units.

Kubernetes also allows us to make sure we upgrade or downgrade as per the requirement through AB testing methods.Also there are hundreds of vendors for storage and network applications due to its open architecture.Kubernetes uses Docker host to host applications in the form of Docker containers.

Now lets take a look at the Kubernetes architecture.

Kubernetes Componenet Architecture

Node is a worker machine where the containers are launched by the Kubernetes engine.

Cluster is the set of Nodes grouped together.This was even if one node fails you have your application still accessible from the other nodes.We do have the cluster with these containers but how can we manage these nodes on the cluster ?

Master Node comes into play now.Master is the node with Control Plane which helps in controlling the containers in the working node of the cluster.

On installing Kubernetes in a system you are installing the following Components.

API Server
Etcd
Kubelet
Container Runtime
Controller Manager
Scheduler
Kube Proxy

API server acts as a Frontend for the Kube Cluster.It helps in communicating the Kubernetes cluster with the users via command line,UI etc

Etcd is a Distributed reliable key-value store used by Kubernetes to store all the data that is used to manage the Kube Cluster.It prevents multiple masters from controlling the respective nodes.

Scheduler is responsible for Distributing work for containers across multiple nodes.It looks for newly created containers and assigns them to the nodes.

Controller Managers are like the brain of Orchestration as they report whenever the endpoint,container,node etc goes down.Controller makes decision to bring up new containers in such cases.

Container Runtime(engine like Docker) a underlying software that is used to run containers. In our case which happens to be Docker.

Kubelet is the agent that runs in the each node in the cluster.This agents work is to make sure that the containers are running as expected in the given nodes.

Kube Proxy runs on each node which can proxy UDP, TCP and SCTP.It does not understand HTTP.It helps in providing load balancing.

Finally Kubectl is the command line utility for Kubernetes Orchestration environment via which a user operates the Kubernetes.

In this way Kubernetes Component Architecture works.

References:

https://assets.digitalocean.com/books/kubernetes-for-full-stack-developers.pdf
https://iamondemand.com/wp-content/uploads/2019/11/Kubernetes-eBook.pdf
https://www.cncf.io/wp-content/uploads/2020/08/Getting-Started-with-Containers-and-Kubernetes_-March-2020-CNCF-Webinar.pdf
https://www.youtube.com/watch?v=8C_SCDbUJTg
https://www.katacoda.com/courses/kubernetes
https://nebula-graph.io/posts/how-to-deploy-nebula-graph-in-kubernetes/
https://cdn.yongbok.net/ruo91/architecture/k8s/v1.1/kubernetes_architecture.png

Todo using React in html

Krishna Dhakal — Thu, 12 Nov 2020 04:47:03 +0000

Here I will be showing a program to make a todo list app using React.
I havent used any npm builders for this project.

First we will go on with the source code of the app.

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <body>
    <div id="mydiv"></div>

    <script type="text/babel">
      class TodoApp extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            value: "",
            items: [],
          };

          this.afterSubmit = this.afterSubmit.bind(this);
          this.afterChange = this.afterChange.bind(this);
          this.removeTodo = this.removeTodo.bind(this);
        }
        afterChange(e) {
          this.setState({
            value: e.target.value,
          });
        }

        afterSubmit(e) {
          e.preventDefault();

          if (this.state.value.length === 0) return;

          const newItem = {
            value: this.state.value,
            id: Date.now(),
          };

          this.setState((state) => ({
            items: state.items.concat(newItem),
            value: "",
          }));
        }

        removeTodo(i) {
          let items = this.state.items.slice();
          items.splice(i, 1);
          this.setState({
            items,
          });
        }

        render() {
          return (
            <div>
              <h3>TODOS:</h3>
              <br />
              {this.state.value}

              <TodoList items={this.state.items} removeTodo={this.removeTodo} />
              <form onSubmit={this.afterSubmit}>
                <br />

                <label>
                  What is the plan?
                  <br />
                  <input
                    type="text"
                    value={this.state.value}
                    name="listItem"
                    placeholder="enter TODO item"
                    onChange={this.afterChange}
                  />
                  <br />
                </label>
                <br />

                <input type="submit" value="Submit" />
              </form>
            </div>
          );
        }
      }

      class TodoList extends React.Component {
        deletItem(i) {
          this.props.removeTodo(i);
        }

        render() {
          return (
            <ul>
              {this.props.items.map((item, i) => (
                <li key={item.id} value={item.value} className="listItem">
                  {item.value}
                  <whitespace />
                  <input
                    type="button"
                    value="X"
                    onClick={() => {
                      this.deletItem(i);
                    }}
                  />
                </li>
              ))}
            </ul>
          );
        }
      }

      ReactDOM.render(<TodoApp />, document.getElementById("mydiv"));
    </script>
  </body>
</html>

The output of the above cove will be as shown below.

Random Number Generation in JS

Krishna Dhakal — Thu, 12 Nov 2020 03:11:25 +0000

Here we will be generating the random number of 9 digits using JS.

function getRandom(length) {

return Math.floor(Math.pow(10, length-1) + Math.random() * 9 * Math.pow(10, length-1));

}
getRandom(9)

Output:

234664534

Forem: Krishna Dhakal