My frontend (REACTJS) doesn't connect with backend(FLASK PYTHON) in docker-CodePudding

I'm trying to dockerize my app. It have an API architecture without using nginx. I'm using this dockerfile for the flask app

FROM python:3.9.0

WORKDIR /ProyectoTitulo

ENV FLASK_APP = app.py

ENV FLASK_ENV = development

COPY ./requirements.txt .

RUN pip install -r requirements.txt

COPY . .

RUN python -m nltk.downloader all

CMD ["python", "app.py"]

This one is my react app dockerfile.

FROM node:16-alpine

WORKDIR /app

COPY ./package.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Finally this is my docker-compose.yml file

services:
  api:
    build:
      context: .
      dockerfile: Dockerfile
    image: python-docker
  client:
    build:
      context: .
      dockerfile: Dockerfile
    image: react-front
    ports:
      - "3000:3000"

I use build and compose up but when I try to send a HTTP request to and endpoint it says ERR CONNECTION. I need to add something to these files? something to the composer?

CodePudding user response：

Well, I think you need to expose the API port, too.

services:
  api:
    build:
      context: .
      dockerfile: Dockerfile
    image: python-docker
    ports:
      - "5000:5000" # EXPOSE API
  client:
    build:
      context: .
      dockerfile: Dockerfile
    image: react-front
    ports:
      - "3000:3000"

CodePudding user response：

One thing is as @bluepuma77 mentioned you need to publish your BE port when that is done and you can locally connect to it you are ready to check the second step.

As I already answered in the SO question similar to your's I will quote my answer here since it will probably be useful to you aswell.

I am no expert on MERN (we mainly run Angular & .Net), but I have to warn you of one thing. We had an issue when setting this up in the beginning as well worked locally in containers but not on our deployment servers because we forgot the basic thing about web applications.

Applications run in your browser, whereas if you deploy an application stack somewhere else, the REST of the services (APIs, DB and such) do not. So referencing your IP/DNS/localhost inside your application won't work, because there is nothing there. A container that contains a WEB application is there to only serve your browser (client) files and then the JS and the logic are executed inside your browser, not the container.

I suspect this might be affecting your ability to connect to the backend.

To solve this you have two options.

Create an HTTP proxy as an additional service and your FE calls that proxy (set up a domain and routing), for instance, Nginx, Traefik, ... and that proxy then can reference your backend with the service name, since it does live in the same environment than API.

Expose the HTTP port directly from the container and then your FE can call remoteServerIP:exposedPort and you will connect directly to the container's interface. (NOTE: I do not recommend this way for real use, only for testing direct connectivity without any proxy)