HTTP requests between docker containers - reactjs

Question

I have created two very simple containers to understand/test HTTP requests between containers, but for some reason, I just can't get my containers communicating. I keep getting GET http://backend:5000/ net::ERR_NAME_NOT_RESOLVED
My first container, a simple react app with no functionality, just gets container name from process.env.REACT_APP_URL, and makes a get request by fetch(http://${url}:5000/).
import { useState } from "react";
const MyComponent = () => {
const [message, setmessage] = useState("Hello");
async function buttonClick() {
let url = process.env.REACT_APP_URL;
try {
let response = await fetch(`http://${url}:5000/`);
console.log("This is response", response);
setmessage(response.data);
} catch (error) {
console.log("error occured:", error);
}
}
return (
<>
<p>{message}</p>
<button onClick={buttonClick}>Click Me!</button>
</>
);
};
export default MyComponent;
My second container, again incredibly simple Flask app, with Hello World served in the homepage route, and nothing else.
from flask import Flask, jsonify
app = Flask(__name__)
#app.route("/")
def hello_world():
return jsonify("Hello World"), 200
if __name__ == '__main__':
app.run(host="0.0.0.0")
And their corresponding docker files,
FROM node:17.4.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
# add app
COPY . ./
# start app
CMD ["npm", "start"]
FROM python:3.6.5-alpine
RUN apk update && apk upgrade && apk add gcc musl-dev libc-dev libc6-compat linux-headers build-base git libffi-dev openssl-dev
COPY . .
RUN pip install -r requirements.txt
CMD ["python", "./myfile.py"]
Finally, I am using docker-compose to orchestrate these containers:
version: "3"
services:
backend:
build:
context: ./server
container_name: backend
expose:
- 5000
ports:
- 5000:5000
frontend:
build:
context: ./web
container_name: frontend
expose:
- 3000
ports:
- 3000:3000
environment:
- REACT_APP_URL=backend
depends_on:
- "backend"
links:
- "backend:backend"
My file system is as follows:
/sample-app
|_ server
|_ web
|_ docker-compose.yml
I have been trying to understand what I am doing wrong and I just can't find it. I appreciate any help. 🙏 🙏

Answer 1

Your frontend communicates with the backend with the exposed port on the host machine (not a container-container communication that needs to happen if the backend container wanted to connect with a DB container). Therefore, the hostname should be localhost not backend.
Try with the following change
frontend:
...
...
environment:
- REACT_APP_URL=localhost
...
...
You need to convert the response to JSON as well.
let response = await fetch(`http://${url}:5000/`);
response = await response.json();
console.log("This is response", response);
setmessage(response.data);