How to integrate vuejs into minikube with a RESTful backend?

10/10/2018

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
-- A.Dumas
docker
kubernetes
minikube
vue.js

2 Answers

10/10/2018

There are two ways to expose resources from a Kubernetes cluster:

  1. Use an Ingress. For more information, you can visit this link.

  2. 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

-- Artem Golenyaev
Source: StackOverflow

10/10/2018

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>

-- Fabián Romero
Source: StackOverflow