Helmify your React App on EKS

Introduction

This article gives a step-by-step explanation of how to deploy a react app using Helm charts on EKS. The react app is a simple app that prints the current date and time.

Helm Chart is an open-source project owned by Kubernetes. It is Package Manager, Template Engine and Release engine for Kubernetes.

Prerequisites

• An AWS Account and IAM User with necessary role or Admin
• Have docker installed
• Have eksctl installed. Eksctl is the official command line for EKS
• Have Helm installed.

Getting the Application Source Code

Clone the repository for the tutorial.

git clone https://github.com/ToluwalopeAyo/demo-react-app.git

To run the app locally, switch to the directory, install dependencies and start the app.

cd reactapp
npm install
npm start

A new tab should open on your browser with the app running.

Containerize the App

In the working directory, create a Dockerfile and paste the following.

FROM node:16-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

To build the docker image, run the command below. Replace 'name' with a preferable name tag for your docker image.

docker build -t <name> .

Push Docker Image to a Container Registry

In this tutorial, we'd use Elastic Container Registry to publish the docker image.

First, log in to AWS console and search for the Elastic Container Registry Service.
Click on 'Create Repository' to create a repository for the docker image. The repository is to be private and give the repository a name.

Then, authenticate your docker client with ECR with this command:

aws ecr get-login-password --region region | docker login --username AWS --password-stdin aws_account_id.dkr.ecr.region.amazonaws.com

Replace 'region' and 'aws_account_id' with your AWS region and AWS account id respectively.
You should get a response with the message "Login Succeeded".

Tag the docker image that was created earlier with the uri of the ecr repository and a verison tag.

docker tag <name> aws_account_id.dkr.ecr.region.amazonaws.com/repository-name

Push the docker image to ECR

docker push aws_account_id.dkr.ecr.region.amazonaws.com/repository-name

Create the EKS Cluster

Using the Eksctl command, create a kubernetes cluster. Replace 'region' with your appropriate region.

eksctl create cluster --name helm-test --region <region> --nodegroup-name linux-nodes --node-type t2.micro --nodes 2

The cluster should take about 20 mins to create completely.

Create the Helm Chart

To create a new chart, run the helm create command in the react-app directory, where 'helm-test' is the name of the chart. This command creates a directory containing the common chart files and directories.

helm create helm-test

The file structure should look like this:

In the helm-test folder, delete all the files in the templates folder except the _helpers.tpl file. Also clear the values.yaml file. You can copy the files in a seperate directory for reference.

In the templates folder, create a deployment.yaml file and paste the code below.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{ include "helm-test.fullname" . }}
  labels: 
    # replaces this value with the chart name
    app: {{ include "helm-test.name" . }}
spec:
  # this gets the value of replicas from the values.yaml file
  replicas: {{ .Values.replicaCount }}
  selector:
    matchLabels:
      app: {{ include "helm-test.name" . }}
  template:
    metadata:
      labels:
        app: {{ include "helm-test.name" . }}
    spec:
      containers:
      - name: {{ .Chart.Name }}
        # gets the image repository value from the values.yaml file
        image: {{ .Values.image.repository }}
        imagePullPolicy: {{ .Values.image.pullPolicy}}
        ports:
        - containerPort: 3000

In the templates folder, create a svc.yaml file and paste the code below.

apiVersion: v1
kind: Service
metadata:
  labels:
    app: {{ include "helm-test.name" . }}
  name: {{ include "helm-test.name" .}}
spec:
  type: {{ .Values.service.type }}
  selector:
    app: {{ include "helm-test.name" .}}
  ports:
  - port: {{ .Values.service.port }}
    targetPort: {{ .Values.service.targetPort }}

In the values.yml file, paste the code below. Make sure to replace 'aws_account_id', 'region' and 'repository-name' with the appropriate value.

replicaCount: 1

image:
  repository: <aws_account_id>.dkr.ecr.<region>.amazonaws.com/<repository-name>:latest
  pullPolicy: IfNotPresent

service: 
  port: 80
  targetPort: 3000
  # The service type is a LoadBalancer so that we can access it from the browser
  type: LoadBalancer

Run the helm lint . command to be sure that the charts are well formatted. The output should look like this:

Deploying the Helm Charts to Kubernetes

To deploy the helm chart to kubernetes, run the 'helm install' command

helm install helm-test .

The output should look like this:

To confirm that the app was successfully deployed, run the kubectl get pods and get svc command.

kubectl get pods

The pod should be running

kubectl get svc

Copy the endpoint in the External IP and paste on your browser using http and you should see that the app is running.

Conclusion

In this article, we learnt how to use Helm Charts to deploy a react app to Kubernetes.

In order not to incur charges on AWS, please make sure to delete the EKS cluster.
First delete the helm chart.

helm uninstall helm-test

Then delete the cluster.

eksctl delete cluster --name helm-test --region <region>

Thank you