Dockerize vue js front end and spring boot backend and deploy on kubernetes cluster

Question

I have developed spring boot backend and vue js front end I could successfully deploy the spring boot app and create cluster ip service for spring boot app but I have never work with NPM project on docker and kubernetes . I also have problem in Axios when I locally testing backend and frontend I give (localhost:backendport/endpoint) for axios and how can I adapt it to kubernetes . should I give cluster ip service name instead of localhost:port/endpoint -> clusteripservice/endpoint if so how can I externalize the configurations and how can I deploy both app.

here is Axios call

import axios from 'axios'


const API_URL = 'http://localhost:8084'
//const API_URL = '/'


class UserDataService {


    retrieveAllUsers() {

        return axios.get(`${API_URL}/user/getall`);
    }


}

export default new UserDataService()  

Answer 1

Idea is to use nginx as your app container and proxy pass to proxy to back-end. So you need to define location for your api, ie /api and proxy that.

Then if you are using axios, you would call all back-end endpoints on relative path, ie

axios.get('/api/v1/myApiPath')

So you do not need to worry about hostname in calls to back-end.

Also, for development you similarly use vue.js development settings to also proxy back-end via npm.

See my toy project here for details how it's done: Deployment piece - https://github.com/taleodor/mafia-deployment UI piece - https://github.com/taleodor/mafia-vue

Specifically nginx settings with proxy configuration - https://github.com/taleodor/mafia-vue/blob/master/nginx/default.conf (note that it's using websockets which you may remove if you're not using them). Specifically vue development server configuration -https://github.com/taleodor/mafia-vue/blob/master/vue.config.js .

Write up on CI / CD workings (unrelated to your question but maybe useful) - https://itnext.io/building-kubernetes-cicd-pipeline-with-github-actions-argocd-and-reliza-hub-e7120b9be870