Vue Js Nginx Docker подключается к серверной части

#spring-boot #docker #vue.js #nginx #kubernetes

#весенняя загрузка #docker #vue.js #nginx #kubernetes

Вопрос:

Я разработал интерфейс vue js, и я мог бы взаимодействовать с серверной частью с помощью вызова axios, и когда я вызываю, мне нужно указать порт серверной службы и конечную точку. как я могу использовать nginx и docker, а затем, после того как я использую nginx и docker, как приложение взаимодействует с серверной частью? в конечном счете мне нужно развернуть интерфейсные и серверные службы в кластере kubernetes.

Я прочитал много руководств об этом, и у меня нет четкой концепции, а также необходимо реализовать решение. Я никогда раньше не пользовался nginx

Серверная часть : http://localhost:8084

Вот мой призыв к аксиосу

 import axios from 'axios'



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



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

Ответ №1:

при использовании подхода Docker (и, следовательно, Kubernetes) вам необходимо отделить контейнер от вашего интерфейса, а контейнер — от вашего сервера.

В Kubernetes вы можете использовать вход. Это обратный прокси, поэтому вам не нужен Nginx. https://kubernetes.io/docs/concepts/services-networking/ingress /

Чтобы настроить URL-адрес вашей серверной части в вашем Vue.js приложение, я советую вам использовать не постоянную переменную, как вы это делаете, а систему конфигурации фреймворка:https://cli.vuejs.org/guide/mode-and-env.html#modes.

Вам необходимо предоставить доступ к вашему интерфейсу и серверной части с помощью вашего Ingress, потому что ваши вызовы Axios отправляются от клиента к серверной части. Таким образом, вы могли бы :

И теперь ваш интерфейс только выполнял вызовы www.mydomain.com/api .

Переведено с www.DeepL.com/Translator (бесплатная версия)