Vue Js Nginx Docker connect to Backend - spring-boot

Question

I've developed vue js front end and I could communicate backend using axios call and when I call I need to specify backend service port and endpoint. how can I use nginx and docker and then after I use nginx and docker how app communicate with backend ? ultimately I need to deploy front end and backend services on kubernetes cluster.
I've read many tutorial about this and I don't have clear idea in concept and also need to implement the solution. I have never use nginx before
Backend : http://localhost:8084
Here is my axios call
import axios from 'axios'
const API_URL = 'http://localhost:8084'
class NotificationDataService {
retrieveAllNotifications() {
return axios.get(`${API_URL}/notification/getall`);
}
}
export default new NotificationDataService()

Answer 1

with Docker (and thus Kubernetes) approach you have to separate the container from your Frontend and the container from your Backend.
In Kubernetes you can use an Ingress. It is a reverse proxy, so you don't need Nginx. https://kubernetes.io/docs/concepts/services-networking/ingress/
To configure the URL of your Backend in your Vue.js application, I advise you not to use a constant variable as you do, but the configuration system of the Framework: https://cli.vuejs.org/guide/mode-and-env.html#modes.
You need to expose your frontend and backend with your Ingress, because your Axios calls are sent from the client to the backend. So you could have :
www.mydomain.com/ for your Frontend
www.mydomain.com/api for your backend
And now your frontend has only made calls to www.mydomain.com/api.
Translated with www.DeepL.com/Translator (free version)