Vue Js Nginx Docker connect to Backend

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

Flavien PERIER · Accepted Answer · 2020-09-09 10:22:20Z

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)

Collectives™ on Stack Overflow

Vue Js Nginx Docker connect to Backend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related