How do I display the Kubernetes Pod Name in a Vue.js app

10/31/2018

I have a vue.js frontend connecting to an Express node.js backend. Both frontend and backend are running in separate Docker containers on Kubernetes. I have created a route on the backend to display the Kubernetes Pod name when I call the URL via Postman:

app.get('/api/probe1', (req, res) => {
    res.send("Hello from: " + process.env.HOSTNAME)
})

The above shows the name of the Pod on which the BACKEND container is running.

I now want to create a page in my vue.js app which will display the name of the Pod on which the FRONTEND container is running edit: (as per comment below vue.js not really running on the pod but rather nginx serving static html/js is running on the pod).

When I use process.env.HOSTNAME in the vue.js app I get "undefined" when I console.log it. edit: (I can now see why this isn't going to work)

<template>
<div>{{displayPodName}}
  <p>Hello from the Pod</p>
</div>
</template>
<script>
export default {  
        data(){
            return{
                displayPodName:""
        }
    },
    mounted(){
        this.displayPodName=process.env.HOSTNAME
        console.log(process.env.HOSTNAME)
     }
}
</script>

I'm clearly tackling this from the wrong angle. How can I display the name of the Pod edit: on which the Frontend is running in my Vue.js app somewhere from which a particular nginx server is serving the html/js to my browser for any given session please?

-- Johann
kubernetes
nginx
vue.js

0 Answers