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()

taleodor · Accepted Answer · 2020-09-10 10:33:12Z

2

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

edited Sep 10, 2020 at 10:33

answered Sep 7, 2020 at 14:04

taleodor

2,1021 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HashanR Over a year ago

Appreciate your answer and do you have an idea if I use axios then how can I call to backend. in your project I didnt see axios call.

taleodor Over a year ago

Updated my answer with a sample axios call - basically you always use relative paths, i.e. axios.get('/api/v1/myApiPath').

HashanR Over a year ago

I have another question, I'm working on microservices project and there are few backend spring boot microservices needed to be communicated with vue js front end. what is the best way as you think to connect those to front end ? directly connect to front end or create one backend and connect all other microservices to that backend then main backend connected to frontend but if I go with that approach I've to do repetitive task since I have to code same controller on main backend like other microservices. I need to know best practice and devops approach.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related