CODEWITHSUNDEEP
spring-bootdockervue.jsnginxkubernetes
HashanR
HashanR

Reputation: 304

Vue Js Nginx Docker connect to Backend

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

Upvotes: 0

Views: 523

Answers (1)

Flavien PERIER
Flavien PERIER

Reputation: 48

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 :

And now your frontend has only made calls to www.mydomain.com/api.

Translated with www.DeepL.com/Translator (free version)

Upvotes: 1

Related Questions