Flask和React Docker容器无法通过Docker-Compose进行通信

问题描述

我有两个容器-一个包含一个React应用程序，另一个包含一个烧瓶应用程序.

I have two containers - one containing a react app, another a flask app.

我可以使用下面的docker-compose文件及其各自的Dockerfile进行构建，并且能够通过浏览器在指定的端口上访问每个文件.但是，我的React应用程序对Flask的API调用没有被检索到(它们在没有Docker的情况下也可以工作).

I can build both using the below docker-compose file and their respective Dockerfiles, and am able to access each via the browser on the ports specified. However, my React app's API calls to Flask are not being retrieved (they work without Docker in the picture).

任何建议都将不胜感激！

Any suggestions are greatly appreciated!

Docker-compose

version: '3.7'

services:
    middleware:
        build: ./middleware
        command: python main.py run -h 0.0.0.0
        volumes:
          - ./middleware/:/usr/src/app/
        ports:
          - 5000:5000
        env_file:
          - ./middleware/.flaskenv
    frontend:
        build:
          context: ./frontend/app
          dockerfile: Dockerfile
        volumes:
          - './frontend/app:/usr/src/app'
          - 'usr/src/app/node_modules'
        ports:
          - '3001:3000'
        environment:
          - NODE_ENV=development
        links:
          - middleware

flask应用程序的Dockerfile

# pull official base image
FROM python:3.8.0-alpine

# set work directory
WORKDIR /usr/src/app

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install -r requirements.txt

# copy project
COPY . /usr/src/app/

Dockerfile React应用

# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
ADD package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent

# start app
CMD ["npm", "start"]

我的React应用程序中的 package.json 中也包含以下内容，这使我可以对flask应用程序进行API调用(同样，在没有Docker的情况下也可以正常工作)

I also have the below in my React app in package.json which enables me to make API calls to the flask app (again, this works fine without Docker)

  "proxy": "http://127.0.0.1:5000",

最后，项目结构(如果有用)

Finally, project structure (in case useful)

website
|
|--middleware (Flask app)
  - Dockerfile
  - api
|--frontend (React app)
  -Dockerfile
  -app
|
|-docker-compose.yml

推荐答案

LinPy和leopal在评论中指出， package.json 中的 127.0.0.1 更改为引用正确的烧瓶容器.

As LinPy and leopal in the comments pointed out 127.0.0.1 in package.json needed to be changed to reference the correct flask container.

"proxy": "http://middleware:5000",

这篇关于Flask和React Docker容器无法通过Docker-Compose进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！