How To Run Vue.js With NodeJS API on Minikube
Learn how to deploy and run it on Kubernetes on your local machine
Most of the companies are adopting some kind of container orchestration and running all their modern apps on Kubernetes. It’s always convenient to run the apps on Minikube which is a single-node Kubernetes cluster that can be installed on your local machine. In this post, we can deploy and run Vue with nodeJS backend API on Minikube on our local machine.
- Example Project
- Run it On Docker
- Publishing the Docker Image
- Create a Deployment and Service Objects
- How to access deployment from the browser
Minikube is a tool that runs a single-node Kubernetes cluster in a virtual machine on your personal computer. We are going to deploy and run the Vue app with NodeJS API on MInikube in this article. First, we create this project and run it normally, then we will run the same on the Docker and, finally, we create a deployment and service objects to deploy and run it on Kubernetes locally.
We are going to need some pre-requisites to complete this project or run it on your local machine.
This is a simple project which demonstrates developing and running Vue application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.
Since we are focusing on running the whole project on the Minikube we are not going to develop this project in this post. If you are not familiar with the whole process of developing a Vue app with the NodeJS backend you can go through the below post.
Here is the GitHub link of this project. You can clone it and run on it your machine.
// clone the project
git clone https://github.com/bbachi/vuejs-nodejs-minikube.git// strat the api
npm run dev// start the react app
npm run serve
Run it On Docker
We use the multi-stage builds for efficient docker images. Building efficient Docker images are very important for faster downloads and lesser surface attacks. In this multi-stage build, building a Vue app and put those static assets in the build folder is the first step. The second step involves taking those static build files and serve those with node server.
Let’s build an image with the Dockerfile. Here are the things we need for building an image.
- Start from the base image
- There are two package.json files: one is for nodejs server and another is for VueUI. We need to copy these into the Docker file system and install all the dependencies.
- We need this step first to build images faster in case there is a change in the source later. We don’t want to repeat installing dependencies every time we change any source files.
- Copy all the source files.
- Vue uses CLI Service to build the app. So, install CLI and install all the dependencies.
npm run buildto build the Vue App and all the assets will be created under
dista folder within a my-app folder.
- Start from the base image
- Take the build from stage 1 and copy all the files into ./my-app/dist folder.
- Copy the nodejs package.json
- Install all the dependencies
- Finally, copy the server.js
- Have this command
node server.jswith the CMD. This automatically runs when we run the image.
Let’s build the image with the following command.
// build the image
docker build -t vue-node-image .// check the images
Once the Docker image is built. You can run the image with the following command.
// run the image
docker run -d -it -p 3080:3080 --name vue-node-ui vue-node-image// check the container
Once you run the container you can the application on the port 3080.
Publishing the Docker Image
Let’s publish the Docker image to Docker Hub with this command
docker push <repo name> . Before that, you need to create a Docker Hub account if you dot have one. Here is the link for it.
Let’s create a repository and it’s bbachin1 in my case. We need to login, tag the image, and push it finally.
docker login// tag the image
docker tag vue-node-image bbachin1/vue-node-image// push the image
docker push bbachin1/vue-node-image
Create a Deployment and Service Objects
A pod is a group of one or more containers that share the storage and network and has the specification on how to run the container. You can check the pod documentation here.
Let’s create a pod with the below file. Before that, You need to start the Minikube on your local machine with this command
minikube start and create a pod with this
kubectl create -f pod.yml
It takes some time to pull the image from the Docker Hub if you are doing the first time or depending on the image size. Now you can see the pod is in the running status and exec into it to explore the file structure, etc.
// get the pod
kubectl get po// exec into running pod
kubectl exec webapp -it -- /bin/sh
Creating just one pod is not enough and what if you want to scale out the application and want to run 10 replicas at the same time. What if you want to change the number of replicas depending on the demand. That’s where the deployment comes into the picture. We specify the desired state in the deployment object such as how many replicas you want to run etc.
Kubernetes makes sure that it always meets the desired state. It creates replica sets which inturn creates pods in the background. Let’s create a Deployment for our project with this command
kubectl create -f deployment.yml
We have 5 replicas in the specification and the deployment creates 5 pods and 1 replica set.
Service is an abstract way to expose an application running on a set of Pods as a network service. Let’s create a service with type NodePort so that we can access the Vue app from the browser. Here is the service object YAML
Create a service with this command
kubectl create -f service.yml and you can list the service with this
kubectl get svc
You can create one file called manifest.yml to place all the Kubernetes objects in one place and create all of the objects with one command
kubectl create -f manifest.yml
How to access deployment from the browser
We have created deployment and services and now we need to access this deployment from the browser.
We need to get the public IP address of the Kubernetes with this command
Let’s access a Vue app with this IP address 192.168.64.2 (where Kubernetes master is running)and port 32616 (where the service port is mapped)with the below URLs. Make sure that you use Http instead of Https.
// access the application herehttp://192.168.64.2:32616/
Accessing the application in the browser
- Minikube is a tool that runs a single-node Kubernetes cluster in a virtual machine on your personal computer.
- We need to install nodejs, Docker for desktop and Minikube as prerequisites
- We can build the project with docker
docker build -t vue-node-image .and run the container with this command
docker run -d --name vue-node-image -p 3080:3080 vue-node-ui
- We need a container orchestration engine for auto-scaling of applications
- A pod is a group of one or more containers that share the storage and network and has the specification on how to run the container.
- We need to push the repository to the Docker Hub and pull the image from it with ImagePolicy Always.
- A Deployment is a declarative approach to specify the number of instances of the application and makes it easier to scale up and down based on the need.
- Service is an abstract way to expose an application running on a set of Pods as a network service.
- You can access the local deployment with the public IP address of Kubernetes and the port of the service. We should use Nodeport in the service object.
- You can place all the Kubernetes objects in one file called manifest.yml
It’s always convenient to use Minikube and own docker images for the local testing. We don’t even deploy in some kind of environment to test our workflow.