<p>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.</p>
<p>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</p>
<p>Backend : <code>http://localhost:8084</code></p>
<p>Here is my axios call</p>
<pre><code>import axios from 'axios'



const API_URL = 'http://localhost:8084'



    class NotificationDataService {
    
        
        retrieveAllNotifications() {
            
            return axios.get(`${API_URL}/notification/getall`);
        }
    
    
    
    
    }
    
    export default new NotificationDataService()  
</code></pre>

HashanR
<p>with Docker (and thus Kubernetes) approach you have to separate the container from your Frontend and the container from your Backend.</p>
<p>In Kubernetes you can use an Ingress. It is a reverse proxy, so you don't need Nginx. <a href="https://kubernetes.io/docs/concepts/services-networking/ingress/" rel="nofollow noreferrer">https://kubernetes.io/docs/concepts/services-networking/ingress/</a></p>
<p>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: <a href="https://cli.vuejs.org/guide/mode-and-env.html#modes" rel="nofollow noreferrer">https://cli.vuejs.org/guide/mode-and-env.html#modes</a>.</p>
<p>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 :</p>
<ul>
<li><p><a href="http://www.mydomain.com/" rel="nofollow noreferrer">www.mydomain.com/</a> for your Frontend</p>
</li>
<li><p><a href="http://www.mydomain.com/api" rel="nofollow noreferrer">www.mydomain.com/api</a> for your backend</p>
</li>
</ul>
<p>And now your frontend has only made calls to <code>www.mydomain.com/api</code>.</p>
<p>Translated with <a href="http://www.DeepL.com/Translator" rel="nofollow noreferrer">www.DeepL.com/Translator</a> (free version)</p>
