Introduction

Kubernetes is mainly used for large scale production container orchestration. I have been using from the initial releases of Kubernetes. It has evolved immensely over the years and deployment and maintenance has never been this easy. Kubernetes is very helpful for large microservice architectures, at the same time for hosting a vue, angular or react application.

There are different ways to deploy a static application, it could be done using a simple setup on an AWS S3 and served to the user. But this is not a suggested method for dynamic large scale production quality application. In this blog I will explain in detail about the environment and its configuration.

Setup

In this example I have used a simple vue application for demo purposes. You can find it here .

Step 1 — Nginx config to serve the web application

Here there are two ways to setup the nginx. You can do a simple setup as shown below or add prerender if you want to have SEO. As this demo is solely to understand the kubernetes configuration I will use the simple configuration as shown below. If you want the prerender version of the application you can read my previous and find the repo . The below nginx conf will be used to direct the traffic to the index.html of the application.

Step 2 — Dockerizing the web application

The application contains different docker files i.e Dockerfile.dev and Dockerfile. The dev file is used to deploy on a staging environment with different env variables. I will explain the production config here. The below is the code in the Dockerfile. I use the alpine node image as it very lightweight, The first step is a builder step where the node alpine is only required to build the web application. The compiled and build application only can be served which helps the image to be very lightweight without unwanted dependencies. A working directory is created in the container and then the package.json is copied and all the dependencies are installed. Then the application is built using the npm run build-prod command. This completes the builder step. Now we use nginx as our webserver in the container, so we use the nginx image and then expose the port we want to serve it from. Then the nginx config is copied and the built dist folder is copied to the root directory to serve.

Step 3— Kubernetes configuration for the web application

There are 3 important configurations required to serve the web application. The first one is the kubernetes deployment file. You can read more about writing kubernetes deployments .

The secret in the above file i.e srregcred is created in the kubernetes environment. The secret contains the docker hub username and password. The command template is as follows:

kubectl create secret docker-registry srregcred --docker-server=https://index.docker.io/v1/ --docker-username=YOUR_USERNAME --docker-password='YOUR_PASSWORD' --docker-email='YOUR_EMAIL'

The next file is the Client IP Service. This file is used to direct the traffic to the right target port.

The last file is the ingress config. This file used to expose the ports to the external world, using http. We use nginx ingress for this purpose. The ingress also acts as load balancer to the container.

We can provide https certificate using certbot or from an dns vendor. In my case I use cloudflare for the ssl certificate as it is easy to maintain. You can access the full repository here to understand the project structure.