Deploying A React App In Kubernetes (Minikube)

In this tutorial, we will see how you can deploy a simple react app in Kubernetes and access it. Consider it as a glimpse of how applications work in real-time.

Let us start with downloading the react app we will be using in the tutorial, I will use.

npx create-next-app — example with-typescript with-typescript-app

Note: In order for this to work, you need to have docker and Kubernetes and some familiarity with the whole subject.

Now, we need to create a Dockerfile that uses our project and builds an image of the same.

Follow these steps:

1. Make a directory structure as follows.

2. Create a Dockerfile with the following content.

Note, that exposing the port is quite important since that’s where the application will run.

3. Now, that we have made the Dockerfile, we need to transfer it to the Kubernetes environment. In my case it is running on minkube which has a node running on docker, therefore I need to transfer this Dockerfile and the project to the node manually or put the Dockerfile in Dockerhub so that docker can pull the image. We will manually put it in the node.

4. Run docker ps and see the container id, after that run

docker cp test-project/ container_name:/home/

placing all the files inside the container for usage.

5. Finally, we need to build an image from the corresponding Dockerfile inside the node, so that it can be used in the Kubernetes YAML files. You have to simply run docker build -t typescript-app .

It will start building an image right after this and you can view it by docker images

We are done with the initial steps! You can concentrate on creating a pod or deployment, whatever you like.

Creating a pod using the image we just created

pod.yml

After creating this file, run kubectl apply -f pod.yml to run the pod inside the node. But you still can’t access the app yet, to do that, you need to create a service. As to why I am doing this, you will find the answer here.

service.yml

Finally, create the service using kubectl apply -f service.yml

You can view the pods and service running using kubectl get pods & kubectl get svc

You are done, you can access your app on http://nodeIP:30008 where 30008 happens to be our node port.

Feel free to post your doubts in the comment section along with your suggestions!

Happy Learning! : )