docker - 单个 Docker 容器中的 Flask 和 React App

Question

美好的一天，

我知道这是不好的做法，我应该每个容器有一个应用程序，但是有没有办法让两个服务在同一个容器中同时运行，我将如何为它编写 Dockerfile？

我当前用于 Flask(后端)应用程序的 Dockerfile:

FROM python:3.6.9-slim-buster

WORKDIR /app/flask_backend

ENV PYTHONPATH "${PYTHONPATH}:/app"

COPY ./flask_backend ./

COPY requirements.txt .
RUN pip install -r requirements.txt

CMD python3 app/webapp/app.py

我的 react (前端)Dockerfile:

FROM node:12.18.0-alpine as build

WORKDIR /app/react_frontend

ENV PATH /app/node_modules/.bin:$PATH
ENV NODE_OPTIONS="--max-old-space-size=8192"

COPY ./react_frontend/package.json ./
COPY ./react_frontend/package-lock.json ./

RUN npm ci
RUN npm install react-scripts@3.4.1 -g
RUN npm install serve -g

COPY ./react_frontend ./

CMD ["serve", "-s", "build", "-l", "3000"]

我尝试在同一个 Docker 容器中启动这两个应用程序是合并两个 Dockerfile，但生成的容器没有来自第一个 Dockerfile 的数据，我不确定如何继续。

我合并的 Dockerfile:

FROM python:3.6.9-slim-buster

WORKDIR /app/flask_backend

ENV PYTHONPATH "${PYTHONPATH}:/app"

COPY ./flask_backend ./

COPY requirements.txt .
RUN pip install -r requirements.txt

CMD python3 app/webapp/app.py

FROM node:12.18.0-alpine as build

WORKDIR /app/react_frontend

ENV PATH /app/node_modules/.bin:$PATH
ENV NODE_OPTIONS="--max-old-space-size=8192"

COPY ./react_frontend/package.json ./
COPY ./react_frontend/package-lock.json ./

RUN npm ci
RUN npm install react-scripts@3.4.1 -g
RUN npm install serve -g

COPY ./react_frontend ./

CMD ["serve", "-s", "build", "-l", "3000"]

我是使用Docker的初学者，因此我预见到使用这种方法会出现几个问题，例如两个应用程序之间的通信(后端使用端口5000)。任何指导将不胜感激!

Answer 1

React 应用程序本身通常没有服务器(仅用于开发的 Docker 设置除外)。相反，您运行 Webpack 之类的工具将其编译为静态文件，然后您可以将其提供给浏览器，然后浏览器运行它们。

在您的主机系统上，您将运行类似

yarn build

产生 dist目录;然后你把它复制到你的 Flask static directory .

如果您完全提前完成此操作，那么您可以在 Python 虚拟环境之外运行您的应用程序，这将是更容易的开发和测试设置，并且您显示的 Dockerfile 不会改变。

如果您想完全在 Docker 中构建它(例如，利用更 Docker 原生的自动构建系统)，请使用 multi-stage build在这里匹配得很好。您可以使用第一阶段来构建前端应用程序，然后 COPY即进入第二阶段的最终申请。这看起来大致如下:

FROM node:12.18.0-alpine as build
WORKDIR /app/react_frontend
COPY ./react_frontend/package.json ./
COPY ./react_frontend/package-lock.json ./
RUN npm ci
COPY ./react_frontend ./
RUN npm run build

FROM python:3.6.9-slim-buster
WORKDIR /app/flask_backend
ENV PYTHONPATH "${PYTHONPATH}:/app"

COPY requirements.txt .
RUN pip install -r requirements.txt

COPY ./flask_backend ./
COPY --from=build /app/react_frontend/dist/ ./static/

CMD python3 app/webapp/app.py

此方法与使用绑定(bind)挂载覆盖 Docker 镜像内容的设置不兼容。非 Docker 主机 Node 和 Python 设置将是一个更容易的开发环境，并且对于这种特定设置，与 Docker 设置不太可能有很大不同。