Deploying a React Application to Kubernetes: A Step-by-Step Guide
In this tutorial, we’ll walk you through the process of deploying a React application to a Kubernetes cluster using Docker, minikube, and kubectl. By the end of this guide, you’ll have a solid understanding of how to containerize your React application, deploy it to a local Kubernetes cluster, and scale it as needed.
Prerequisites
Before we dive in, make sure you have the following tools installed on your machine:
- Node.js (v14.0.0 or higher) and npm (v5.6 or higher)
- Docker
- kubectl
- minikube
- A Docker Hub account
Creating a React Application
First, let’s create a new React application using Create React App. Run the following command to create a new project:
bash
npx create-react-app react-docker
Navigate into the project directory and start the application:
bash
cd react-docker
npm start
Open your web browser and navigate to http://localhost:3000 to see the application in action.
Dockerizing the React Application
Next, let’s create a Docker image of our React application. Create a new file called Dockerfile in the root of your project directory:
dockerfile
FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
This Dockerfile uses the official Nginx image and copies the contents of the build directory into the container.
Create a new file called .dockerignore to exclude unnecessary files from the Docker image:
node_modules
.dockerignore
Dockerfile
Build the Docker image by running the following command:
bash
docker build -t react-docker .
Pushing the Docker Image to Docker Hub
Login to your Docker Hub account and push the Docker image to your repository:
bash
docker login
docker tag react-docker:latest <your-docker-username>/react-docker:latest
docker push <your-docker-username>/react-docker:latest
Starting a Local Kubernetes Cluster
Start a local Kubernetes cluster using minikube:
bash
minikube start
Deploying the React Application to Kubernetes
Create a new file called deployment.yaml to define the deployment:
yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: react-docker
spec:
replicas: 2
selector:
matchLabels:
app: react-docker
template:
metadata:
labels:
app: react-docker
spec:
containers:
- name: react-docker
image: <your-docker-username>/react-docker:latest
ports:
- containerPort: 80
Apply the deployment configuration:
bash
kubectl apply -f deployment.yaml
Exposing the React Application
Create a new file called service.yaml to define the service:
yaml
apiVersion: v1
kind: Service
metadata:
name: react-docker
spec:
type: LoadBalancer
ports:
- port: 80
targetPort: 80
selector:
app: react-docker
Apply the service configuration:
bash
kubectl apply -f service.yaml
Accessing the React Application
Get the IP address of the minikube node:
bash
minikube ip
Access the React application by navigating to http://<minikube-ip>:31000 in your web browser.
Scaling the React Application
Scale the React application by updating the number of replicas:
bash
kubectl scale deployment react-docker --replicas=10
Verify that the application has been scaled:
bash
kubectl get pods
That’s it! You’ve successfully deployed a React application to a Kubernetes cluster using Docker, minikube, and kubectl.