Estoy creando un sitio web simple con inicio de sesión, y mi vue-frontend necesita recuperar datos de usuario de mi nodejs-backend que se conecta a una base de datos sql. Decidí usar docker-compose para esto y, según tengo entendido, docker-compose configura una red automáticamente para los servicios que se mencionan en mi docker-compose.yml.

Lo que no parece funcionar es la forma en que dirijo el backend en mi código. Sospecho que podría deberse a la forma en que uso axios para enviar una solicitud a mi backend.

Inspeccioné la red docker predeterminada y pude hacer ping desde mi frontend a mi backend usando los nombres dns que encontré en la configuración de la red. Pero usar los mismos nombres dentro de mi código no funcionó.

Lo que sí funciona es asignar un puerto de host a mi puerto api expuesto y usar http://localhost:5000 como dirección, pero esto anula el propósito de una red docker.

mi 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

los archivos Vue-fontend en cuestión:

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>

autenticaciónServicio.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.

el resultado esperado sería mi backend haciendo una búsqueda de sql.

El resultado actual es que, en lugar de conectarme a mi backend, mi interfaz me da un estado 404 y nunca se llega a mi backend