Request from Frontend Container to Backend container - docker

I have seen several possibilities how to communicate between docker containers. I tried the most of them except proxying which i cant translate to my scenario.
I have a vue-frontend, java-backend- container.
In the frontend i use axios to make http request.
I want to make a http request axios.get(http:localhost:7080/ping), which gives me status 200 but I dont get an response and some CORS problem.(Which is very strange, because the cors header are present if i use postman for the request)
If i use axios.get(http:container_name:7080/ping) I get some other error
net::ERR_NAME_NOT_RESOLVED.
Other solutions (using nginx) using reverse proxy. Do I need something like this or do I have some other misconfiguration?
My docker-compose looks like this:
services:
backend:
container_name: backend
build: ./backend
volumes:
- xxx
ports:
- 7048:7048
- 7080:7080
- 7009:9009
frontend:
container_name: frontend
build:
context: ../frontend
dockerfile: ./Dockerfile
volumes:
- ../xxx
ports:
- 8080:8080
#- 8001:8001
depends_on:
- backend
environment:
- NODE_ENV=development
# - CHOKIDAR_USEPOLLING=true

Related

Docker cURL one container from another

Theres a good chance I'm being dumb here, but I have the following endpoint which works in the browser and returns a result:
http://localhost:8000/api/ebay/getSellers
This is on my app Docker container, and I want to use cURL on my api container to retrieve the result.
My dockerfile looks like so:
services:
server:
build:
context: .
dockerfile: dockerfiles/prod/nginx.dockerfile
ports:
- "8000:80"
volumes:
- ./src:/var/www/html
- ./nginx/prod/nginx.conf:/etc/nginx/conf.d/default.conf:ro
container_name: toolkit-server
image: my/toolkit-server:latest
depends_on:
- app
- api
app:
build:
context: .
dockerfile: dockerfiles/prod/php.dockerfile
volumes:
- ./src:/var/www/html:delegated
container_name: toolkit-app
image: my/toolkit-app:latest
api:
build:
context: .
dockerfile: dockerfiles/prod/api.dockerfile
ports:
- "8100:80"
volumes:
- ./api:/var/www/html/
container_name: toolkit-api
image: my/toolkit-api:latest
I've tried using cURL like so:
http://localhost:8000/api/ebay/getSellers
http://app:8000/api/ebay/getSellers
http://toolkit-app:8000/api/ebay/getSellers
But the respose I get is always:
Failed to connect to toolkit-app port 8000: Connection refused
Is there a way to do this?
Edit:
Sorry to clarify, my curl is within the api container and I want to query the app container
The api container is mapping the services port 80 to the external port 8100.
Try to request http://localhost:8100/
That's because you're querying the wrong port.
In your compose file, you have this configuration for your app container :
ports:
- "8000:80"
This block means that you're mapping the port 80 from the container to the port 8000 on your host. It is always port_on_host:port_on_container
So if you want to access the app container from the api container, you need to curl with this url :
curl http://app:80/api/ebay/getSellers

How to properly call another docker container via axios?

So I'm currently building a docker setup with a REST API and a separate frontend. My backend consists of Symfony 5.2.6 as REST API and my frontend is a simple Vue application.
When I try to call my API from the vue application via localhost or 127.0.0.1, I get a "Connection refused" error. When I try to call the API via the external IP of my server, I run into CORS issues. This is my first setup like this, so I'm kind of at a loss.
This is my docker setup:
version: "3.8"
services:
# VUE-JS Instance
client:
build: client
restart: always
logging:
driver: none
volumes:
- ./client:/app
- /app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
- NODE_ENV=development
ports:
- 8080:8080
# SERVER
php:
build: php-fpm
restart: always
ports:
- "9002:9000"
volumes:
- ./server:/var/www/:cached
- ./logs/symfony:/var/www/var/logs:cached
# WEBSERVER
nginx:
build: nginx
restart: always
ports:
- "80:80"
volumes_from:
- php
volumes:
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf
- ./logs/nginx/:/var/log/nginx:cached
So what is the correct way to establish the connection between those two containers?
The client app runs on port 8080 but nginx on 80 is a different URL and it should be a CORS error.
To avoid it, in the PHP app, you have to add response header:
Access-Control-Allow-Origin: http://localhost:8080 or
Access-Control-Allow-Origin: *.
Another solution is to configure all in one domain on this same port.

Making an HTTP request within the same Docker network

I have a few services running in different docker containers, as per my docker-compose:
version: '3'
services:
rest:
build:
context: './service/'
image: persian_rest:latest
container_name: persian_rest
ports:
- 8080:8080
networks:
- persian_net
volumes:
- persian_volume:/data
scheduler:
build:
context: './scheduler/'
image: persian_scheduler:latest
container_name: persian_scheduler
networks:
- persian_net
ui:
build:
context: './ui/'
image: persian_ui:latest
container_name: persian_ui
ports:
- 5000:5000
networks:
- persian_net
database:
image: 'mongo:latest'
container_name: 'persian_database'
networks:
- persian_net
environment:
- MONGO_INITDB_ROOT_USERNAME=persian_admin
- MONGO_INITDB_ROOT_PASSWORD=123456
ports:
- 27017:27017
volumes:
- persian_volume:/data
volumes:
persian_volume:
networks:
persian_net:
driver: bridge
I have my UI persian_ui service making HTTP request to the REST service persian_rest. I thought that since they were in the same network, I would just make a request to http://persian_rest:8080/api
However, when I do make that request, it fails to find that resource:
Does anyone know why my containers joined by the same network are not able to perform requests?
Currently you are looking at a webpage at localhost:5000. You requested the webpage from the server localhost:5000 and it complied and sent you a webpage which is now sitting on your computer.
If you now want to access an API on the same server as the webpage, you can make another request to localhost but this time port 8080. localhost:8080/api.
The webpage in the browser is on the client-side, and the names you've given your containers are for reference inside the server. From outside the server, currently the reference is localhost.

Fail to resolve docker compose service name from front end

Hi I'm new to using docker for development. I'm trying to communicate from frontend (react) to the backend (express.js) here.
I have enabled cors as well, I'm getting an error saying net::ERR_NAME_NOT_RESOLVED when trying to fetch from the back end using the url http://backend:4001,
but it's working when I use the docker internal IPAddress, like: http://172.18.0.3:4001.
Following is my docker-compose.yml file.
Please advise on getting this working, thanks.
version: "3"
services:
backend:
build: ./api
volumes:
- ./api:/usr/src/api
ports:
- 6002:4001
depends_on:
- database
database:
image: mongo:4.0.15-xenial
ports:
- 27018:27017
frontend:
build: ./app
volumes:
- ./app:/usr/src/app
ports:
- 6001:3000
links:
- backend
depends_on:
- backend
It will not work, because your browser(internet client) is not part of docker stack network, you have to configure you frontend service to connect to http://localhost:6002 instead of http://backend:4001

Request from one docker container to another fails

I've been trying to connect two docker containers. My flask backend and my react frontend, when I use localhost in the request the request goes through, but when i use the docker container name ie http://backend-service:5000/endpoint , the name can't be resolved. The documentation states that the containers connect to the same networking automatically and that accessing services from one should be as simple as that. I've tried adding links to the docker compose file as well with no luck.
Here is my docker-compose file:
version: '3'
services:
backend-service:
build: ./api
expose:
- 5000
ports:
- "5000:5000"
volumes:
- ./api:/usr/src/app
environment:
- FLASK_ENV=development
- FLASK_APP=app.py
- FLASK_DEBUG=1
client-service:
build: ./clientside
expose:
- 3000
ports:
- "3000:3000"
volumes:
- ./clientside/src:/usr/src/app/src
- ./clientside/public:/usr/src/app/public
links:
- "backend-service:backend"

Resources