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

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, i.e. /api and proxy that.
Then if you are using axios, you would call all back-end endpoints on relative path, i.e.
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