Deploying a NuxtJS application to a Kubernetes Cluster in Cloud

If you have been following my series on creating a Personal Website, you might think this is insane! We haven't even written a single line of code for our website, and we are already deploying it to internet!! Hold your horses!

1. Cross-Device Compatibility checking: Even after using containerization of application, you might still face issues where the web app works perfectly in Dev environment but has issues in prod. These issues might accumulate over numerous commits. Detecting them early makes our life easier.

2. Easier to ask for Reviews: It's impossible to share your code with your peers for review. But they can always suggest improvements by visiting your deployed website. I have received reviews and incorporated them to improve the user experience.

3. Gives an Agile spirit to your Project: Large Enterprises don't deploy a 100% developed product to production. They deploy the most miniature usable product and then build upon it. You can follow the same. Use versioning to track changes to your website. You can even create a Changelog.

4. Source of Motivation: A visible product will motivate you to work than a codebase running on Sandbox in your development machine. It feels nice to open your website now and then. ?

What is Kubernetes Platform?

Kubernetes is a portable, extensible, open-source platform for managing containerized workloads and services that facilitates both declarative configuration and automation. It has a large, rapidly growing ecosystem. Kubernetes services, support, and tools are widely available.

Overview

Kubernetes is a portable, extensible, open source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation. It has a large, rapidly growing ecosystem. Kubernetes services, support, and tools are widely available. This page is an overview of Kubernetes.

https://kubernetes.io/docs/concepts/overview/what-is-kubernetes/

Introduction to Kubernetes (K8S) - GeeksforGeeks

Kubernetes is an open-source Container Management tool which automates container deployment, container scaling, and descaling and container load balancing (also called as container orchestration tool). It is written in Golang and has a huge community because it was first developed by Google and later donated to CNCF (Cloud Native Computing Foundation).

https://www.geeksforgeeks.org/introduction-to-kubernetes-k8s/

Setting up a Cluster

Kubernetes on Google Cloud (GKE)

Google Kubernetes Engine (GKE) is the simplest and most common way of setting up a Kubernetes Cluster. You may be able to receive free credits for trying it out (though note that a free account comes with limitations). Either way, you will need to connect your credit card or other payment method to your google cloud account.

https://zero-to-jupyterhub.readthedocs.io/en/stable/kubernetes/google/step-zero-gcp.html

• Name: Give any to your liking

• Location Type: Depends on your requirements and budget. If you are low on budget, select zone instead of the region. You are trading redundancy for cost.

• The number of nodes: Two should be more than enough for our use case.

• Machine configuration: You can choose E2-Medium (2 vCPU, 4 GB Ram). This gives you a total of 4vCPU and 8 GB Ram.

• Leave the rest as default.

Setting up Persistent Volumes

# ssd-storageclass.yaml
apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
  name: solid-state
provisioner: kubernetes.io/gce-pd
parameters:
  type: pd-ssd

# PersistentVolumeClaim.yml
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: limosyn-com-pv-claim
spec:
  storageClassName: solid-state
  accessModes:
  - ReadWriteOnce
  resources:
    requests:
      storage: 10Gi

Setting up GitHub Actions

Some Prerequisites

1. Get a service account with proper access to GKE. Visit this link to create one.

2. Keep your cluster, Information Handy.

Adding required files

1. .github/workflows/google.yml : Main configuration used by GitHub to access your Kubernetes cluster and deploy. It also publishes the generated Image to google's Container Registry.

2. .github/deployment.yml : Has deployment information such as the number of replicas, deployment strategy, to name a few.

3. .github/service.yml : Has information required to expose your deployed service to the internet or within your cluster.

4. kustomization.yml : Keeps a record of all the deployment and yml files.

5. Dockerfile: For creating your application container image

#Dockerfile

FROM node:latest as build-stage
RUN apt update -y && apt upgrade -y
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY ./ .
EXPOSE 3000
ENV HOST=0.0.0.0
ENV PORT=3000
RUN yarn build
CMD ["yarn", "start"]

• PROJECT_ID : The GCP Project ID.

• GKE_CLUSTER : Name of the GKE Cluster

• GKE_ZONE : Zone where the cluster exists

• DEPLOYMENT_NAME : Give any to your liking.

# deployment.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nuxt-frontend
  namespace: "default"
spec:
  replicas: 2
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
  selector:
    matchLabels:
      app: nuxt-frontend
  template:
    metadata:
      labels:
        app: nuxt-frontend
    spec:
      containers:
      - name: app
        image: gcr.io/PROJECT_ID/IMAGE:TAG
        imagePullPolicy: Always
        ports:
        - containerPort: 3000
        livenessProbe:
          tcpSocket:
            port: 3000
          initialDelaySeconds: 10
          timeoutSeconds: 5
          periodSeconds: 30
        readinessProbe:
          tcpSocket:
            port: 3000
          initialDelaySeconds: 30
          timeoutSeconds: 5
          periodSeconds: 30

# service.yml

apiVersion: v1
kind: Service
metadata:
  name: nuxt-frontend
  namespace: default
  labels:
    app: nuxt-frontend
    tier: frontend
spec:
  ports:
  - protocol: TCP
    port: 80
    targetPort: 3000
  selector:
    app: nuxt-frontend
  type: LoadBalancer

# kustomization.yml

apiVersion: kustomize.config.k8s.io/v1beta1
kind: Kustomization

resources:
  - .github/service.yaml
  - .github/deployment.yaml

Summing it up...

1. Created a GCP account with a free trial.

2. Set up a GKE cluster to deploy your application.

3. Created files critical to GitHub Actions integration.

4. Created a GitHub actions workflow.