Как обращаться к внутреннему хосту с помощью axios, когда фронтенд и внутренний сервер находятся в виртуальной сети докеров

Question

Я создаю простой веб-сайт с входом в систему, и моему vue-интерфейсу необходимо получить пользовательские данные из моего nodejs-backend, который подключается к базе данных sql. Я решил использовать для этого docker-compose, и, как я понимаю, docker-compose автоматически настраивает сеть для сервисов, упомянутых в моем docker-compose.yml.

То, что не работает, это то, как я обращаюсь к бэкенду в своем коде. Я подозреваю, что это может быть из-за того, как я использую axios для отправки запроса на мой бэкэнд.

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

Что работает, так это сопоставление хост-порта с моим незащищенным портом API и использование http://localhost:5000 в качестве адреса, но это противоречит цели Docker-сети.

мой docker-compose.yml:

version: '3.3'

services:
    vue-frontend:
        image: flowmotion/vue-js-frontend
        ports:
            - 8070:80
        depends_on:
            - db-user-api

    db-user-api:
        image: flowmotion/user-db-api
        environment:
            - PORT=5000
        ports:
            - 5000:5000 #only needed if docker network connection can't be established 

файлы Vue-Fontend, о которых идет речь:

Login.vue

methods: {
    async login() {
      try {
        const response = await authenticationService.login({
          email: this.email,
          password: this.password
        });
        this.$store.dispatch("setToken", response.data.token);
        this.$store.dispatch("setUser", response.data.user);
        this.$router.push({ path: "/" });
      } catch (error) {
        this.showError = true;
        this.error = error.response.data.error;
      }
    }
  }
};
</script>

authenticationService.js

import api from "@/services/api";

export default {
  login(credentials) {
    return api().post("login", credentials);
  }
};

api.js

import axios from 'axios';
import config from '../config/config';
export default () => {
    return axios.create({
        baseURL: config.userBackendServer
    });
};

config.js ()

module.exports = {
    userBackendServer: 'http://cl-dashboard_db-user-api_1:5000' //this doesn't seem to work
};

//using 'http://localhost:5000' works if ports are mapped to host machine.

ожидаемым результатом будет то, что мой бэкэнд выполнит поиск sql.

Актуальный результат: вместо подключения к моему бэкэнду мой веб-интерфейс дает мне статус 404, а мой бэкэнд никогда не достигается

Answer 1

вы правы, предполагая, что контейнеры в сети докеров могут общаться друг с другом, не открывая никаких портов для внешнего мира.

точка is- ваше приложение vue не находится ни в одном контейнере - оно обслуживаетсяиз контейнера в виде файла js-скрипта в ваш браузер , который отправляет запросы на ваш серверный бэкэнд.так как ваш браузер никоим образом не находится внутри сети докеров - вы должны использовать сопоставление внешних портов (localhost:5000 в вашем случае), чтобы добраться до бэкэнда.

, дайте мне знать, если у вас есть еще вопросы по этому поводу.