如果您的组合应用程序正好由这两个组件组成，那么您应该将

• React应用程序根目录中的Dockerfile，位于package.json文件旁边
• Flask应用程序根目录中的Dockerfile，位于其Pipfile/setup.cfg/requirements.txt文件旁边
• docker-compose.yml，启动容器和数据库

其他文件系统布局当然也是可能的，但是这种布局在Compose中最自然。有了这些确切的文件名和路径，您通常不必直接提到文件名。
合成文件可能如下所示：

version: '3.8'
services:
  frontend:
    build: ./react
    ports: ['3000:3000']
  backend:
    build: ./flask
    ports: ['5000:5000']
    environment:
      PGHOST: database
      PGUSER: postgres
      PGPASSWORD: passw0rd
    depends_on: [database]
  database:
    image: postgres:15
    ports: ['5432:5432']
    environment:
      POSTGRES_PASSWORD: passw0rd
    volumes:
      - dbdata:/var/lib/postgresql/data
volumes:
  dbdata:

在开发过程中使用它
对于前端，运行docker-compose up -d backend启动后端和数据库。然后使用您通常使用的IDE在主机系统上使用Node。前端总是需要通过其发布的端口调用后端，因此无论您是在容器中运行还是进行开发，其行为都是相同的。
对于后端，运行docker-compose up -d database以启动 * 仅 * 数据库容器。设置PostgreSQL环境变量指向该数据库; export PGHOST=localhost PGUSER=postgres PGPASSWORD=passw0rd，或者如果未设置环境变量，则将这些值设置为配置中的默认值。然后使用一个普通的Python虚拟环境，或者像Poetry或Pipenv这样的普通工具。
我不建议尝试将你的主机代码注入到容器中，并尝试让Docker模拟本地环境。IDE对此的支持是混合的，如果您的IDE不特别支持容器中的工具，那么您将失去功能。我还经常看到关于在隔离的Docker环境中不工作的实时重新加载的SO问题，以及卷挂载没有在容器内提供正确的文件系统布局。另一方面，我通常发现一个结构良好的项目很容易打包到镜像中，并且对于部署，您通常不希望将源代码与Docker镜像分开部署。

这真的取决于你想做什么。
在生产环境中，你可以让你的后台服务静态JS文件。
如果您需要某种类型的负载平衡，这不是很有效，但对于基本环境，它确实使您的生产构建更加简单。
在这种情况下，我将在项目的顶层有一个dockerfile。
如果您需要两个图像，例如对于使用热重载的开发或更高级的生产环境，您确实需要创建两个dockerfiles，一个用于运行python基本映像的server，另一个用于运行node或nginx基本映像的frontend。
因此，为了更简单的使用，创建一个docker-compose文件来运行这两个映像。

对于一个整洁和可扩展的方法，我建议组织你的Docker文件和文件夹，每个服务都有自己的专用文件夹。因此，在您的情况下，您可以为React应用程序（客户端）和Flask应用程序（服务器）提供单独的文件夹。每个文件夹都应该包含自己的Dockerfile和任何其他必要的文件。
在项目的主级别，您将拥有一个docker-compose.yml文件，用于处理多个容器的部署和配置。您还可以在其中放置一个.env文件来存储特定于环境的设置。要使用Docker Compose启动并运行项目，只需导航到项目的根目录并运行docker-compose up。此命令将构建并启动docker-compose.yml文件中定义的容器。
遵循此结构将为您在开发过程中使用Docker奠定坚实的基础。它使事情保持有序、可扩展，并使协作更容易。

.
├── .env
├── docker-compose.yml 
├── client
│   ├── public
│   │   ├── index.html
│   │   └── ...
│   └── src
│       ├── components
│       │   ├── App.js
│       │   └── ...
│       ├── styles
│       │   ├── main.css
│       │   └── ...
│       ├── index.js
│       └── ...
└── server
    ├── app.py
    ├── static
    │   └── ...
    └── templates
        └── ...