Have you ever wondered how applications transition from basic code to containers and then onto Kubernetes? In this blog, we will delve into how that process truly works!
Tech stack and Tools
- React for building the front end
- Docker for containerization
- Kubernetes for orchestration
- kubectl for Kubernetes command-line management
- Minikube for local Kubernetes cluster setup
Setting Up the React App
- Creating React App
npx create-react-app client
- Starting the React App
cd client
npm start
Containerizing with Docker
- Navigate to the client directory where your React app resides.
cd client
- Create a file named Dockerfile and open it for editing.
touch Dockerfile
vim Dockerfile
- Dockerfile Content to Create a Docker Image
# Use an official Node runtime as a base image
FROM node:14-alpine
# Set the working directory in the container
WORKDIR /usr/src/app
# Copy package.json and package-lock.json to
# the working directory
COPY package*.json ./
# Install app dependencies
RUN npm install
# Copy the app's source code to the working directory
COPY . .
# Expose the port that the app will run on
EXPOSE 3000
# Define the command to run your app
CMD ["npm", "start"]
- Building the Docker Image
docker build -t k8s-react .
- Testing the Docker Image Locally
docker run -p 3000:3000 k8s-react
Push Docker Image to Docker Hub
- To push the Docker image to Docker Hub, tag it with your Docker Hub username and repository name, and then push it
docker tag k8s-react:latest saitadikonda99/my-react-app:latest
docker push saitadikonda99/my-react-app:latest
Deploying to Kubernetes
To install kubectl refer the following document : Document Link
To install minikube refer the following document : Document Link
Starting Minikube
- Start Minikube using the following command
minikube start
Creating YAML files
- Create a file named deploy.yaml and open it for editing. You can follow these commands
touch deploy.yaml
vim deploy.yaml
- Deployment Configuration for React Application in Kubernetes
apiVersion: apps/v1
kind: Deployment
metadata:
name: react-app
spec:
replicas: 2
selector:
matchLabels:
app: react-app
template:
metadata:
labels:
app: react-app
spec:
containers:
- name: react-app
image: saitadikonda99/my-react-app:latest
imagePullPolicy: Always
ports:
- containerPort: 80
Expose the deployment using a Kubernetes service. Create a service YAML file. follow the below commands
touch service.yaml
vim service.yaml
apiVersion: v1
kind: Service
metadata:
name: react-app
spec:
type: NodePort
selector:
app: react-app
ports:
- port: 80
protocol: TCP
targetPort: 80
nodePort: 31000
Apply the YAML file to deploy the React app to Kubernetes
kubectl apply -f deploy.yaml
kubectl apply -f service.yaml
To check pods and nodes in a Kubernetes cluster and to see a locally deployed service using Minikube, follow these steps
- To list all the pods in the default namespace, you can use the command
kubectl get pods
- To view information about nodes in the cluster, you can use
kubectl get nodes
Accessing Minikube Dashboard
- To access the Minikube dashboard and check pods, run the following command
minikube dashboard
Viewing Locally Deployed Services
- View the Deployment
kubectl get deployments
- The output is similar to:
NAME READY UP-TO-DATE AVAILABLE AGE
react-app 2/2 2 2 5m25s
By default, the Pod is only accessible by its internal IP address within the Kubernetes cluster
Expose the Pod to the public internet using the kubectl expose command
kubectl expose deployment react-app --type=NodePort --port=3000
minikube service react-app
- This opens up a browser window that serves your app and shows the app's response.
Top comments (2)
awesome article keep it up 👍
Thank you ☺️