Vue container unable to access URL from app but accessible from container's bash

Question

I have 3 different containers which are as below 1. UI Container having Vue SPA 2. Backend Container having Spring Boot application 3. MYSql DB container

below is my docker-compose file

version: '3'

services:
  mysqldb:
    image: mysql:latest
    container_name: mysqldb
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: simple-bug
    ports:
      - "3306:3306"
  simple-bug-back:
    build: ./..
    container_name: simple-bug-back
    ports:
      - "8082:8082"
    restart: on-failure
    depends_on:
      - mysqldb
    environment:
      SPRING_PROFILES_ACTIVE: dev
      SPRING_DATASOURCE_URL: jdbc:mysql://mysqldb/simple-bug
  simple-bug-ui:
    build: ./../ui
    ports:
      - "8080:8080"
    depends_on:
      - simple-bug-back

Now I am trying to access

http://simple-bug-back:8082

in vue application but it is giving net::ERR_NAME_NOT_RESOLVED but if i try the same inside container i.e.

docker exec -it docker_simple-bug-ui_1 sh

and execute curl command inside that for above URL I am getting the response

Can anyone help me what am I missing

kevs · Accepted Answer · 2020-06-11 15:22:08Z

1

The reason is because your host doesn't know the container by this domain, this domain is valid only into network cretated for to containers by docker-compose, if you want use this domain you should add it into your /etc/hosts file like this (because you have exposed the port 8082):

127.0.0.1 simple-bug-back

answered Jun 11, 2020 at 15:22

kevs

462 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hemant Kumar Bothra Over a year ago

Agreed, but is it possible via any other mean to get this done cuz if I think to get this deployed without exposing my backend to outer network i.e. not using port config in simple-bug-db then

tony19 · Accepted Answer · 2022-07-15 04:29:44Z

0

To resolve the above issue, I used Nginx as my server (https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html) and used it's reverse proxy. I levarage the .env file to route all my request to particular uri for all my backend call (in my case /back/) and below is my nginx.conf file

upstream spring_back_8082 {
  server simple-bug-back:8082;
}

server {
  ..
  ..

 
  location / {
      try_files $uri $uri/ =404;
  }
  
  location /back/ {
      proxy_pass http://spring_back_8082/;
  }
}

Now to call backend my url is /back/...

edited Jul 15, 2022 at 4:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 14, 2020 at 5:15

Hemant Kumar Bothra

451 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Vue container unable to access URL from app but accessible from container's bash

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related