I can't fetch from server container
to frontend container
even though I am able to get curl
response from inside frontend container
.
I have a docker-compose set up with a frontend and server container.
I want to fetch server response from frontend, but i get the error GET http://server:5000/api/panels net::ERR_NAME_NOT_RESOLVED
. I get the correct response if i execute the following command from inside the frontend container curl http://server:5000/api/panels
Dockerfile server
FROM node:11
ADD . /code
WORKDIR /code
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD [ "node", "server" ]
Dockerfile frontend
FROM node:11
ADD . /frontend
WORKDIR /frontend
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm","start"]
docker-compose.yml
version: '3'
services:
server:
build: .
frontend:
depends_on:
- server
build: ./frontend
ports:
- "3030:3000"
api-call
this.callApi()
.then((res: ISolarPanels) => {
this.setState({ solarPanels: res })
})
.catch((err) => console.warn('server is offline?', err))
private callApi = async () => {
const response = await fetch(process.env.REACT_APP_URL+'/api/panels')
const body = await response.json()\
if (response.status !== 200) {
throw Error(body.message)
}
return body
}
package.json (i use dev
script for local development and start
for docker
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/d3": "^5.0.1",
"d3": "^5.7.0",
"prettier": "^1.13.5",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts-ts": "2.16.0",
"tslint-eslint-rules": "^5.3.1"
},
"scripts": {
"lint": "node_modules/.bin/tslint -c tslint.json 'src/**/{*.ts,*.tsx}'",
"dev": "REACT_APP_URL=http://localhost:3000 react-scripts-ts start",
"start": "REACT_APP_URL=http://server:5000 react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"proxy": "http://localhost:5000/",
"devDependencies": {
"@types/node": "^10.3.3",
"@types/react": "^16.3.17",
"@types/react-dom": "^16.0.6",
"typescript": "^2.9.2"
}
}
For a quick fix, you can allow CORS
on your server. here
And in your web application you can use:
0.0.0.0:5000/api
for pointing to server.
Also, you would need to bind your port in server
service in docker-compose.yml file.
server:
build: .
ports:
- "5000:5000"