Deploying a React app to Kubernetes can be daunting but easier. With Docker and Minikube, you can create a local Kubernetes cluster that you can use to test and deploy your app. Once you're happy with your app, you can deploy it to a production Kubernetes cluster on EKS.
This tutorial walks you through deploying a React app to Kubernetes with Docker and Minikube on EKS. We'll create a React app and then build a Docker image. Next, we'll create a Kubernetes cluster using Minikube, then deploy the app to the cluster. Finally, you'll test the app and ensure it works correctly.
By the end of this tutorial, you'll have a basic understanding of deploying React apps to Kubernetes with Docker and Minikube on EKS. So let's get started!
Prerequisites
Before you can deploy your React app to Kubernetes, you need to install the following prerequisites:
- Install Docker
Docker is a containerization platform that allows you to package your application and its dependencies into a single image. This makes it easy to deploy your application to any Docker environment.
To install Docker, follow the instructions on the Docker website: https://docs.docker.com/get-started/.
- Install Minikube
Minikube is a local Kubernetes cluster that you can run on your computer. This is a great way to learn about Kubernetes and test your applications before deploying them to a production cluster.
To install Minikube, follow the instructions on the Minikube website: https://minikube.sigs.k8s.io/docs/start/.
- Install Kubectl
Kubectl is a command-line tool that you use to interact with Kubernetes clusters.
To install Kubectl, follow the instructions on the Kubectl website: https://kubernetes.io/docs/reference/generated/kubectl/kubectl-commands.
1. Create a React App
Once you have installed the prerequisites, you can create a React app.
To create a React app, you can use this command.
npm create-react-app quotes
This will create a new folder called quotes with your React app. You can then start the app by running the following command:
cd quotes
npm start
This will start the app in development mode. You can access the app in a browser by opening the following URL:
http://localhost:3000
The app is similar to this:
2. Build a Docker Image for the React App
Once you have created your React app, you need to build a Docker image. This will allow you to deploy the app to Kubernetes.
To build a Docker image for your React app, create a Dockerfile. The Dockerfile is a text file specifying the steps Docker needs to take to build your image.
A simple Dockerfile for a React app might look like this:
# Use an official Node runtime as a parent image
FROM node:16-alpine
# Set the working directory to /app
WORKDIR /app
# Copy package.json and package-lock.json to the container
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code to the container
COPY . .
# Build the production version of the application
RUN npm run build
# Expose port 80 to the outside world
EXPOSE 80
# Run the command to start the server
CMD ["npm", "run", "dev"]
This Dockerfile tells Docker to use the node:16-alpine image as the base image. It then copies the package.json file and the contents of the current directory into the container. It then runs the npm install command to install the dependencies. Finally, it runs the npm run build command to build the production version of the app.
Then add a .dockerignore File that tells docker what to ignore in the build process.
In the .dockerignore add the necessary files/folders to exclude in the build process.
npm-debug.log
.dockerignore
**/.git
**/.DS_Store
**/node_modules
Now, you can build the image by running the following command:
Syntax:
docker build -t <your-image-name> < Dockerfile filepath>
For this tutorial, use this command
docker build -t quotes .
This will build the image and tag it as quotes.
Start a docker container by running the below command
Syntax
docker run -p 80:80 <image name>
Command
docker run -p 80:80 quotes
The command above starts a Docker container with your image and maps your machine port 80 to the container port 80 where your Docker container is running.
To be able to see your React project live, you need to expose your ports by running the below command.
npm run dev --host
The output is similar to this:
Then, open your preferred browser and navigate to http://127.0.0.1:5173/, and you should see your React app.
3. Create a Kubernetes Cluster
Now that you have a Docker image for your React app, you need to create a Kubernetes cluster.
If you are using Minikube, you can start a cluster by running the following command:
minikube start
This will start a single-node Kubernetes cluster on your computer.
4. Create a Deployment
You can deploy your React app once you have created a Kubernetes cluster.
To deploy the app, you need to create a Deployment and a Service.
A Deployment is a Kubernetes object that represents a set of Pods. A Pod is a group of one or more containers that are scheduled together on the same node.
Deploy the application to Minikube using the kubectl command:
kubectl create deployment quotes --image=quotes
The output is similar to this:
service/quotes exposed deployment.apps/quotes
This Deployment will create a single Pod that runs the quotes
Next is to view the deployment:
kubectl get deployments
The output is similar to this:
NAME READY UP-TO-DATE AVAILABLE AGE
quotes 1/1 1 1 13h
5. Create a Service
A Service is a Kubernetes object that exposes a Pod or a set of Pods to the outside world.
By default, the Pod is only accessible by its internal IP address within the Kubernetes cluster.
You need to expose the pods within the cluster to the outside world to be accessible.
To do this, you need to create a service to expose the ports the application is listening to.
The --type=LoadBalancer flag indicates that you want to expose your Service outside of the cluster.
a. Create a yaml file with the following info
apiVersion: v1
kind: Service
metadata:
name: quotes
spec:
selector:
app: quotes
ports:
- protocol: TCP
port: 80
targetPort: 3000
type: LoadBalancer
Then run the below command
kubectl apply -f service.yaml
The output is similar to this:
service/quotes created
You can confirm a service was created by running
kubectl get services
The output is similar to this:
NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
quotes LoadBalancer 10.100.209.187 <pending> 80:30512/TCP 43h
b. Access Your Application:
Use the previous step's external IP or DNS name to access your React application deployed on EKS, or run the command below.
minikube service quotes
The above command serves your app on a browser.
|-----------|--------|-------------|---------------------------|
| NAMESPACE | NAME | TARGET PORT | URL |
|-----------|--------|-------------|---------------------------|
| default | quotes | 80 | http://192.168.49.2:30512 |
|-----------|--------|-------------|---------------------------|
🏃 Starting tunnel for service quotes.
|-----------|--------|-------------|------------------------|
| NAMESPACE | NAME | TARGET PORT | URL |
|-----------|--------|-------------|------------------------|
| default | quotes | | http://127.0.0.1:51769 |
|-----------|--------|-------------|------------------------|
🎉 Opening service default/quotes in default browser...
❗ Because you are using a Docker driver on darwin, the terminal needs to be open to run it.