How to integrate vuejs into minikube with a RESTful backend? - docker

Question

I want to integrate my vuejs app into a minikube cluster.
I used the Dockerfile from the VueJs tutorial for the production with the Nginx webserver and with the first option localhost:8080 here. I changed the ports in the yml files accordingly meaning for the localhost to 8080 and for the nginx version as seen below to 80
Then in my config/index.js
dev: {
[...]
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
[...]
},
I have set the default 8080 port. For my minikube deployment and service I added
apiVersion: apps/v1 # for versions before 1.9.0 use apps/v1beta2
kind: Deployment
metadata:
name: vuejs
spec:
selector:
matchLabels:
app: vuejs
tier: frontend
replicas: 1
template:
metadata:
labels:
app: vuejs
tier: frontend
spec:
imagePullSecrets:
- name: regcred
containers:
- name: vuejs
image: <secret registry>
ports:
- containerPort: 80
strategy:
type: RollingUpdate
rollingUpdate:
maxSurge: 1
maxUnavailable: 1
---
apiVersion: v1
kind: Service
metadata:
name: vuejs
labels:
app: vuejs
tier: frontend
spec:
type: LoadBalancer
ports:
- port: 80
targetPort: 80
# Replace with the IP of your minikube java / master java
# externalIPs:
# - 192.168.99.105
selector:
app: vuejs
tier: frontend
How do I connect to the vuejs/nginx webserver. Moreover since I set the DNS name of the backend to java how do I set the java REST API address in vuejs?
I set the address to 'http://java:8080/' without any response. The Java REST backend is integrated into minikube with this yml.
The curios issue is that after starting the vuejs deployment I can access the vuejs app at 127.0.0.1:8080. When I understood correctly I thought that the kubernetes cluster opens up its own network and is only accessible via external IP
Looking at my kubectl get all I would say that vuejs should be reachable 192.168.99.105:8080 - when using the dockerimage without the nginx.
NAME READY STATUS RESTARTS AGE
pod/java-fbf949cbc-rqstq 0/1 Error 4 2d
pod/maria-7b67c8ddf-xp8xx 1/1 Running 2 2d
pod/private-reg 1/1 Running 5 5d
pod/vuejs-5f4c657d74-885j9 1/1 Running 1 18h
NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE
service/java LoadBalancer 10.101.207.98 192.168.99.100 8080:31011/TCP 2d
service/kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 5d
service/maria ClusterIP 10.99.177.228 <none> 3306/TCP 2d
service/vuejs NodePort 10.104.108.44 192.168.99.105 8080:30001/TCP 17h
NAME DESIRED CURRENT UP-TO-DATE AVAILABLE AGE
deployment.apps/java 1 1 1 0 2d
deployment.apps/maria 1 1 1 1 2d
deployment.apps/vuejs 1 1 1 1 18h
NAME DESIRED CURRENT READY AGE
replicaset.apps/java-fbf949cbc 1 1 0 2d
replicaset.apps/maria-7b67c8ddf 1 1 1 2d
replicaset.apps/vuejs-5f4c657d74 1 1 1 18h

Answer 1

You can use minikube service command to get the url exposed to your own host. For your deployment, try:
minikube service vuejs --url
It would show an IP with the NodePort added to it. Copy and paste the result of that command to your browser.
Update: How it works
Minikube starts a virtual machine inside your host (your laptop) with a single-node Kubernetes cluster, assigning a local IP that you can get with minikube ip command. That’s the IP of the Kubernetes node.
When you expose a "NodePort" service inside Kubernetes, it allocates a static port from range 30000-32767 (default) so you can access that service with <NodeIP>:<NodePort>

Answer 2

There are two ways to expose resources from a Kubernetes cluster:
Use an Ingress. For more information, you can visit this link.
Expose a Service. You can do it in two ways:
type: LoadBalancer. However, it works only with cloud providers.
type: NodePort. And it is the easiest way in your case, you need to change spec.type from LoadBalancer to NodePort in your YAML description for the Service. After that, to access service inside the Kubernetes cluster, you need to use the IP address of your Node and the port from the field nodePort. For example, 192.168.12.34:30001