Deploy frontend app using Kubernetes In 2025 – Step By Step Guide.

Introduction to Kubernetes

Kubernetes is used widely because it deploys, organizes, and manages the scale of various applications on different containers. This open-source technology was developed by Google and it is extensively used worldwide.

Adding to the customization offered by Kubernetes, developers can control specific application functions using declarative configuration documents. Kubernetes offers automation to reduce the chances of human errors during operations like region partitioning, service level partitioning, rolling updates, and high availability guarantees.

In this Minikube provides a lighter version of Kubernetes, simulating production-like conditions. With Minikube, developers can test various configurations on their computers before deploying them in the actual system. In this case, Kubernetes and Minikube are deployed for managing drain and controlling a React front-end application.

In this blog, we are learning how to deploy a frontend app using Kubernetes for efficient container orchestration and scaling. By the end of this guide, you’ll have a React application running on a local Kubernetes cluster powered by Minikube.

Overview

In this project, Kubernetes and Minikube are used to deliver a React frontend application. After being integrated into a Docker container and pushed to an AWS ECR repository, the application is subsequently set up on a Minikube cluster. To deploy frontend app using Kubernetes, these steps below are necessary .

The prerequisites
Make sure the following is installed on your computer before you start:
Docker: For application containerisation.
Kubectl:  The command-line tool for Kubernetes .
Minikube: One tool that manages a local Kubernetes cluster .
AWS CLI: Amazon Wen Services Command Line Interface, used for interacting with AWS services, including Elastic Container Registry (ECR).

Step 1: Install Kubectl 

To be able to deploy a frontend app using Kubernetes, the first tool we need is something called kubectl which is the command line interface for using Kubernetes. It enables you to deploy, monitor, and control containerized applications in a Kubernetes ecosystem.

curl -LO "https://dl.k8s.io/release/$(curl -L -s
https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"

Set up kubectl:

sudo install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl

Step 2: Install Minikube 

In order to deploy a frontend app using the Kubernetes system in a local setup, you will require Minikube, which is a tool that creates a simulated light weight version of a Kubernetes “production” cluster right on your local desktop.

curl -LO
https://storage.googleapis.com/minikube/releases/latest/minikube-linux
-amd64

Set up Minikube:

sudo install minikube-linux-amd64 /usr/local/bin/minikube

Step 3: Start Minikube

Once you’ve installed the tools, start your local Kubernetes cluster using Minikube. This is the foundation step to deploy frontend app using Kubernetes locally for development or testing.

minikube start

You can deploy and test your application using the local Kubernetes cluster that this command creates on your computer.

 

Step 4: Clone the frontend Application Repository

To deploy frontend app using Kubernetes with your actual project, you’ll need the source code for your frontend. Clone your project repository from GitHub:

git clone <your-frontend-repo-url>
cd <your-frontend-repo-directory>

Change <your-frontend-repo-directory> to the directory name and <your-frontend-repo-url> to the real URL of your GitHub repository.

 

Step 5: Build and Push the Docker Images

In order to deploy a kube focused frontend edge with it’s infrastructure, you will need first to containerize the React application and put it on docker registry such as AWS ECR.

Login to AWS ECR:

aws ecr get-login-password --region ap-southeast-1 | docker login
--username AWS --password-stdin
654654282708.dkr.ecr.ap-southeast-1.amazonaws.com (Replace 654654282708.dkr.ecr.ap-southeast-1.amazonaws.com with your actual ECR registry URL.)

Build the Docker image:

docker build -t kube-sun-frontend .

Tag the docker Images:

docker tag 654654282708.dkr.ecr.ap-southeast-1.amazonaws.com/kube-sun-frontend:latest

Push the Docker Images to AWS ECR:

docker push 654654282708.dkr.ecr.ap-southeast-1.amazonaws.com/kube-sun-frontend:latest

 

Step 6: Make Service and Deployment Files for Kubernetes

To deploy frontend app using Kubernetes effectively, you need two YAML files: one for the Deployment and another for the Service that exposes your application.

Make a front-end application deployment.yml file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend-container
          image: 654654282708.dkr.ecr.ap-southeast-1.amazonaws.com/kube-sun-frontend:latest
          ports:
            - containerPort: 80

Make a service.yml file that exposes the application’s frontend:yaml

apiVersion: v1
kind: Service
metadata:
  name: frontend-service
spec:
  type: NodePort
  selector:
    app: frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

Step 7: Apply Kubernetes Configuration

Once your YAML files are ready, the next step to deploy frontend app using Kubernetes is to apply them to the cluster using

Use the configuration files to deploy the front-end application to your Kubernetes cluster.
Put the deployment into action:

kubectl apply -f deployment.yml

Apply the service:

kubectl apply -f service.yml

Step 8: Create Docker Registry Secret

Kubernetes needs permission to pull your image from AWS ECR. In order to deploy frontend app using Kubernetes with images stored in a private registry, create a Docker secret:

Make a secret so that Kubernetes may retrieve the Docker image from your AWS ECR:

kubectl create secret docker-registry regcred \
--docker-server=654654282708.dkr.ecr.ap-southeast-1.amazonaws.com \
--docker-username=AWS \
--docker-password=$(aws ecr get-login-password --region
ap-southeast-1) \
[email protected]

Step 9: Access the Deployed frontend Application

After you deploy frontend app using Kubernetes, you’ll need a way to access it from your browser. You can do this using either Minikube’s built-in service URL or port forwarding.

Option 1: Use the Minikube Service to gain access
Use Minikube to retrieve the service URL:

minikube service frontend-service --url

Option 2: Access via Port Forwarding 

To access the frontend service port, forward a local port:

kubectl port-forward svc/frontend-service <local-port>:80 --address 0.0.0.0 &. (Replace <local-port> with the port number you wish to use on your local machine.)

Step 10: Check the deployment Status 

To verify a successful deploy frontend app using Kubernetes process, inspect the pods and services to confirm that your application is running smoothly.
Verify the pods’ status:

kubectl get pods

Verify the services’ current status:

kubectl get services --all-namespaces

Benefits of Deploying Frontend App Using Kubernetes

Choosing to deploy frontend app using Kubernetes offers numerous advantages for developers, DevOps teams, and businesses aiming for scalability, resilience, and operational efficiency.

Below are some key benefits:

1. Balancing Load and Scalability

Kubernetes permits the automatic scaling of backend applications according to traffic. This makes certain that there is sustained performance during peak loads while idling helps in saving costs.

2. Improved Reliability

Kubernetes allows for high availability by running multiple replicas of your frontend application in pods. This way, you do not experience downtime even if certain pods fail, ensuring maximum reliability.

3. Updates and rollbacks with ease

You can perform rolling updates while deploying frontend apps on Kubernetes, which means any changes made do not require the entire app to be capped for changes. Hence, you can change versions of the app without incurring downtime. Instant rollbacks are possible in case anything breaks.

4. Lack of changes in an environment

By running your app on a Kubernetes powered web server, it is guaranteed that there will be one configuration in the local, staging and production pods, which minimizes bugs that arise due to lack of uniformity.

5. Setting configuration declarations

With the adoption of as-code infrastructures, one has the ability to declare frameworks using YAML files which makes defining frontend deployments simpler, reproducible, and traceable.

6. Saving of resources

Kubernetes makes sure that your frontend pods are optimally placed in all the nodes making maximum use of server resources and avoiding server wastage or strain to deploy frontend app using Kubernetes.

7. Support for CI/CD Integration

Integrating Kubernetes with CI/CD tools like Jenkins, GitHub Actions, and Argo CD is effortless. Automation of deployment of the frontend app using Kubernetes for every code push is streamlined.

Conclusion:

The local setting to deploy frontend app using Kubernetes can be built with ease with the help of Minikube. It provides a flexible and reliable local development environment, allowing developers to test and troubleshoot applications before moving to production-grade clusters. Scaling and exposure are simplified by containerizing the application and utilizing the necessary Deployment and Service YAML files. This process enhances integration with continuous deployment frameworks, ensuring smooth deployment pipelines across various environments.

When we deploy frontend app using Kubernetes, developers can rely on consistent, high-performing deployments regardless of the environment. Kubernetes ensures that the application remains robust and highly available, with streamlined updates and reduced errors when following best practices. The use of Minikube further simplifies testing and troubleshooting, making it an excellent tool for simulating production scenarios in a local setting. Overall, deploying the frontend app using Kubernetes ensures that the application is ready for scaling, with better control, stability, and consistency from local development to production.

Frequently Asked Questions :

Why Deploy Frontend App Using Kubernetes?
Deploying a frontend app using Kubernetes allows developers to achieve scalability, high availability, and automated rollouts. Kubernetes simplifies managing deployments, making it ideal for React or any modern frontend framework in containerized environments.

What is Kubernetes and why is it important?

Kubernetes is a free to use software platform that automates the deployment, scaling, and orchestrating of containerized applications. It is important because it relieves the user from managing the complex details of how containerized applications are orchestrated to run reliably, scalably, and with high availability across diverse environments.

How does Kubernetes manage containerized applications?

Kubernetes manages containerized applications with pods through a monitoring subsystem that observes the state of various resources to ensure containers are executing as intended; Kubernetes manages resources with scaling, load balancing, and scheduling over clusters of machines.

What are Pods in Kubernetes?

Pods are the smallest controllable units in the Kubernetes management framework. It usually consists of one or more containers that operate under the same specifications regarding the network and storage. Pods are used to deploy tightly coupled application components together.

What is the role of the Kubernetes control plane?

Kubernetes control plane is in control of an entire cluster. It manages each component’s orchestrator, which prepares the tasks for containers scheduled on nodes, controls the overall cluster health, and check if the wished state on the system is the actual state, if not the system has to be adjusted to attain the user-defined state.

What is the difference between Kubernetes Deployments and ReplicaSets?

Deployments are primarily concerned with high-level management of Pods, such as creating, scaling, or updating them. On the other hand, a ReplicaSet guarantees running a certain number of Pods identically. A Deployment will manage the ReplicaSets on your behalf.

How do you scale applications in Kubernetes?

Scaling can be done by increasing or decreasing the number of replicas within a specific Deployment or ReplicaSet. Scaling up or down the number of running Pods can be accomplished via kubectl scale. Alternatively, auto-scaling can be set up with the Horizontal Pod Autoscaler.

What are Services in Kubernetes and how do they work?

In Kubernetes, a Service functions like stability provider for the ip addresses of Pods which provides Pods with network level stability. It removes the need to know exact IPs of Pods and simply deals with like DNS names that will be converted into IP later. The traffic towards individual Pods is done via load balancing.

How do Kubernetes ConfigMaps and Secrets differ?

As stated ConfigMaps manage data that is non-sensitive while Secrets manage sensitive data like authentication tokens. Both serve the purpose of decoupling the application configuration from the application itself, however Secrets offer stronger protection because the data is encoded and controlled more strictly.

What is the purpose of namespaces in Kubernetes?

In Kubernetes, namespaces are used to divide a physical cluster into distinct virtual clusters. They assist in managing resources, controlling access, and organizing workloads for diverse teams or environments within a singular physical cluster.

What are Helm charts and how do they simplify Kubernetes deployments?

Helm charts are packages containing the necessary configuration files to assist in deploying multi-faceted applications. They offer ready-to-use, versioned blueprints that can be modified for application deployment in Kubernetes, thus ensuring uniformity and ease in the process.

AWS PartyRock: Showcasing the Creativity of Artificial Intelligence

Develop a Scalable OTT Platform on AWS: Secure & Reliable 24/7.

AWS PartyRock: Showcasing the Creativity of Artificial Intelligence