---
title: 'How to Deploy, Run, and Access a Containerized Web App in Kubernetes'
disqus: hackmd
---

How to Deploy, Run, and Access a Containerized Web App in Kubernetes
===
###### tags: `IMRC` `Container` `Docker` `Kubernetes` `v1.18` `Hybrid Cluster` `Mixed Nodes` `Linux` `Windows` `Documentation`
> Written by Benny Suryajaya, compiled from various sources.
> NOTE: This guide is far from perfect. Please contribute to fix and/or complete this guide.

## Table of Contents

[TOC]

## Preparing the Web App
In order to run a web app in Kubernetes, first you need to have a containerized web app that has been uploaded as container image in image repositories (e.g. Docker Hub).

In this example, we will be using the [Ubuntu Portalsite](https://hub.docker.com/r/hmx4/node-portalsite-ubuntu) that is already available in Docker Hub. The application is build on Node.js and will show the following web GUI when accessed.


## Preparing the Deployment

Create a new file with the content below, and save it as `deployment.yaml`.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: node-portalsite-ubuntu-deployment
  labels:
    app: node-portalsite-ubuntu
spec:
  replicas: 1
  selector:
    matchLabels:
      app: node-portalsite-ubuntu
  template:
    metadata:
      labels:
        app: node-portalsite-ubuntu
    spec:
      containers:
      - name: node-portalsite-ubuntu
        image: hmx4/node-portalsite-ubuntu
        ports:
        - containerPort: 3000

Important lines are explained below.
* **Line 6** specifies the deployment label.
* **Line 8** specifies the intended number of replica.
* **Line 19** specifies the container image name to be used.
* **Line 21** specifies the required port by the web application. In this example, we write down port 3000 which is occupied by the Portalsite web app.

## Preparing the Service
Kubernetes has several kinds of service type. A more detailed explanation about each service type can be found [here](https://kubernetes.io/docs/concepts/services-networking/service/#publishing-services-service-types).

In this example, we will be using NodePort as the service type.
Create a new file with the content below, and save it as `service.yaml`.

apiVersion: v1
kind: Service
metadata:
  name: node-portalsite-ubuntu-service
  labels:
    app: node-portalsite-ubuntu
spec:
  clusterIP: 10.110.15.1
  selector:
    app: node-portalsite-ubuntu
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000
      nodePort: 32280
  type: NodePort

Important lines are explained below.
* **Line 8** specifies the Cluster IP to be used. Cluster IP is a virtual IP allocated by Kubernetes which acts as an internal IP within Kubernetes cluster. By default, the service cluster IP range is `10.0.0.0/8` and must be **unique**.
* **Line 10** specifies the label of the target deployment.
* **Line 13-14** specify the port used by the web app in target deployment. `port` refers to the port listened by the service, while `targetPort` refers to the port listened by the target deployment. Both `port` and `targetPort` are not necessarily unique, thus allowing several instances of a same app in different deployments to listen to the same port.
Quoting from [Kubernetes official documentation](https://kubernetes.io/docs/concepts/services-networking/service/):
> A Service can map any incoming `port` to a `targetPort`.
By default and for convenience, the `targetPort` is set to the same value as the `port` field.
* **Line 15** specifies the port used for NodePort. Using NodePort allows us to expose the service to external traffic. The port defined as NodePort is opened on all nodes in the cluster. In this way, access to the service is allowed by calling any node IP and the NodePort, then all traffic through this port is forwarded to the service. From here, the NodePort can be forwarded to allow access from outside the cluster. By default, the NodePort range is 30000-32767 and must be **unique**.

In order for the service to work properly, there are several points that we must pay attention to.
* Assure that the service is selecting the correct **deployment label**.
* Assure that the service is targetting the correct **container port**.


## Deploying to Kubernetes

The steps explained below is operated from a Kubernetes Dashboard GUI.

Login to the Kubernetes Dashboard and follow these steps.
1. Click the "Create new resource" button to deploy new Kubernetes component.
2. Select "Create from file" to deploy using a YAML file.
3. Select the `deployment.yaml` file that we have prepared.
4. Click "Upload".


By following the above same steps, upload the `service.yaml` file to run the service for the deployment.

## Accesing the Web App

The deployed web app can be accessed locally from any node in the cluster by using the `ClusterIP` and `port` from the service (`[ClusterIP]:[port]`).


Another way to access the web app locally is by using the NodePort together with worker node IP (`[Worker Node IP]:[NodePort]`).


To access the web app from any computer outside the cluster, we can setup the firewall and forward the NodePort to the outside, then access the web app with the address `[Public IP]:[Forwarded port]`.
In this example, the worker node IP and NodePort `192.168.0.111:32280` has been forwarded to `xxx.xxx.xxx.xxx:11130`.


## Appendix and FAQ

:::info
**Find this document incomplete?** Leave a comment!
:::