In this tutorial, we will containerize a React.js application and then deploy it to Kubernetes using the Kubernetes Deployment YAML file. We will also create a Kubernetes Service YAML file and expose the application pods using an external IP address. You will input the external IP address in your browser to view the Kubernetes application.
This tutorial will teach you how to create Kubernetes Deployments and Services using YAML files. You will also learn how to deploy any containerized application to Kubernetes.
Kubernetes Deployments and Services Background
Kubernetes Deployments and Services are Kubernetes Objects that are created in a Kubernetes Cluster when you are deploying a containerized application. The most common way of writing Kubernetes Deployments and Services files is in YAML format. They contain all the configurations for the containerized application. Kubernetes executes these files and uses them to deploy the application to the Kubernetes cluster with the desired state.
A Kubernetes Deployment configures the pods and the resources for the containerized application. A pod is the smallest Kubernetes deployable unit that holds a containerized application inside the Kubernetes cluster. It also specifies the Docker image that will create the containerized application.
A Kubernetes Service describes how you want to expose the Kubernetes Deployment running in pods. You can decide whether you will access the application only from inside the Kubernetes Cluster or outside the cluster. Kubernetes assigns the pods an internal or external IP address. It depends on the type of Kubernetes Service described in the Service.yaml file.
Prerequisites
This tutorial requires you to have working knowledge with the following:
- Know how to create and run Docker containers. We will use Docker to containerize the React.js application.
The React.js application will be simple. We will use it to demonstrate the core concepts in this tutorial. If you are new to Docker, read this article to get started. In this tutorial, we will not cover Docker in detail.
- You also need to know how to use Kubectl command line interface tool for Kubernetes. We will use the Kubectl tool to execute the YAML files and deploy the Kubernetes Objects to the Kubernetes Cluster.
NOTE: There are different Kubernetes Clusters that a developer can create in the cloud providers such as Google Kubernetes Engine, Azure Kubernetes Service and Amazon Elastic Kubernetes Service. However, there are charges for using these Kubernetes clusters. In this tutorial, we will focus on the free local Kubernetes cluster known as Minikube.
For you to implement this tutorial quickly, ensure you have the following installed on your machine:
- Docker Engine: For building the Docker Image and containers for the React.js application in this tutorial.
- Kubectl: Command line tool interface for Kubernetes.
- Minikube: For creating and running a Kubernetes cluster in your local machine. It will use your machine’s computing resources (RAM, ROM, and CPU ) when creating a Kubernetes cluster.
Before we create the YAML files for the Kubernetes Deployment and Service, let’s first create a simple React.js application. We will then containerize it with Docker.
Creating a Simple React.js application
In your terminal, you will create a simple React.js application using the following command:
npx create-react-app simple-app
The command will create a folder named `simple-app`. This command will generate all the files required to run a React.js application. To run the application, move into the `simple-app` folder and run the following `npm` command:
npm start
You can input the URL in your browser to view the React.js application as shown below:
The React.js application is running. Let’s Containerize it with Docker.
Containerizing the Application with Docker
To containerize the application with Docker, we will build a Docker image using a Dockerfile. In the `simple-app` folder, create a Dockerfile and the following Docker commands/instructions:
FROM node:18-alpine WORKDIR /react-app COPY package.json . COPY package-lock.json . RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "start"]
Docker will use the instructions written inside the Dockerfile to build a Docker image. You will run this Docker command:
docker build -t victorelvis/simple-app .
Starting a Docker Container
To start a Docker container for the React.js application, we will run the Docker image using this `docker` command:
Pushing the Docker Image to Docker Hub
Before you push the victorelvis/simple-app Docker image to Docker Hub, ensure you create a Docker Hub account. You will then create a Docker Hub repository. After completing the process, run the following commands in your terminal:
docker login
docker push victorelvis/simple-app
Pushing your Docker image to Docker Hub is an important step. We will specify the Docker Hub repository for our Docker image in the Kubernetes YAML file. Kubernetes will pull the Docker image from this repository and create a containerized application in the Kubernetes Cluster.
The next step is to start the Minikube Kubernetes Cluster. We will create the Kubernetes Deployments and Services inside this Kubernetes cluster.
Starting the Minikube Kubernetes Cluster
To start the Minikube Kubernetes Cluster, run these commands one after the other:
minikube config set driver docker
minikube start
The command will create and start a Minikube cluster on your local machine shown in the image below:
We now need to check if Kubectl is working using this command:
Writing the YAML file for the Kubernetes Deployment
In the `simple-app` folder, create a `deployment.yaml` file and add the following YAML code:
apiVersion: apps/v1
kind: Deployment
metadata:
name: simple-app-deployment
spec:
replicas: 2
selector:
matchLabels:
app: simple-app
template:
metadata:
labels:
app: simple-app
spec:
containers:
- name: simple-app
image: victorelvis/simple-app
resources:
limits:
memory: "256Mi"
cpu: "500m"
ports:
- containerPort: 3000
The YAML file will create a Kubernetes Deployment named `simple-app-deployment`:
- It will create 2 replicas or pods in the Kubernetes cluster. The application will run on both of the pods.
- It will pull `victorelvis/simple-app` image from the Docker Hub repository.
- It will create a containerized application named `simple-app` in the Kubernetes Cluster.
- It also configures the resource limits for the running pods. The container will run on port `3000`.
To create this Kubernetes Deployment, run this `kubectl` command:
kubectl apply -f deployment.yaml
Writing the YAML file for the Kubernetes Service
In the `simple-app` folder, create a `service.yaml` file and add the following YAML code:
apiVersion: v1
kind: Service
metadata:
name: simple-app-service
spec:
type: LoadBalancer
selector:
app: simple-app
ports:
- port: 4000
targetPort: 4000
protocol: TCP
The YAML file will create a Kubernetes Service named `simple-app-service`:
- It will act as a `LoadBalancer` for the running pods.
- Kubernetes will assign the application pods an external IP address. We will use the external IP address to access the React.js Kubernetes application.
Getting the Kubernetes Deployment and Service
To get the Kubernetes Deployment, run this command:
kubectl get deployment
To get the Kubernetes Service, run this command:
kubectl get service
Accessing the React.js Kubernetes application
To access the React.js Kubernetes application, run this command in your terminal:
minikube service simple-app-service
Minikube will start a tunnel. It will assign a unique external IP address to the pods shown below:
Type the unique external IP address in your browser to access the application:
Our React.js Kubernetes application is running inside the Minikube Kubernetes Cluster. We can now access the Kubernetes Deployment using the `simple-app-service` Kubernetes Service.
Conclusion
You have learned how to create Kubernetes Deployments and Services using YAML files. Kubernetes YAML files are important configuration files in Kubernetes. The YAML files help you to describe all the Kubernetes objects and application resources you want to be created inside a Kubernetes Cluster. You can then apply a single Kubectl command and deploy your application.
No matter how complex your application is, you will be required to create YAML files for the Kubernetes Deployments and Services. In this tutorial, we have created YAML files for deploying a simple React.js application to Minikube. You can easily modify these files and use them to deploy any application. If you want to deploy your application to cloud providers such as Amazon Elastic you can read this article. I hope this tutorial guides you to get started with Kubernetes Deployments and Services.
