单个Docker容器中的Flask和React App [英] Flask and React App in single Docker Container
问题描述
美好的一天，
我知道这是不好的做法，每个容器应该有一个应用程序，但是有办法让我拥有两个服务在同一容器中同时运行，我该如何为它编写Dockerfile？
我当前在Flask（后端）应用中使用的Dockerfile：
从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节点：12.18.0-alpine作为build
WORKDIR / app / react_frontend
ENV路径/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
运行npm install react-scripts@3.4.1 -g
运行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_b确认
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路径/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）。
React应用程序通常本身没有服务器 >（不包括仅用于开发的Docker设置）。而是运行Webpack之类的工具将其编译为静态文件，然后将其提供给浏览器，然后由浏览器运行。
在主机系统上，将运行类似的
纱线构建
产生一个 dist 目录；然后将其复制到Flask 静态目录。 / p>
如果您完全提前进行此操作，则可以在Python虚拟环境中运行应用程序，这将使开发和测试设置更加容易，并且
如果您想完全在Docker中构建它（例如，利用更多的Docker本地自动构建系统）， 多阶段构建在这里很匹配。您可以使用第一阶段来构建前端应用程序，然后在第二阶段中将 COPY 生成最终应用程序。大致看起来像这样：
FROM节点：12.18.0-alpine作为构建
WORKDIR / app / react_frontend
COPY ./react_frontend/package.json ./
COPY ./react_frontend/package-lock.json ./
RUN npm ci
COPY ./react_frontend ./
RUN npm run从Python：3.6.9-slim-buster
WORKDIR / app / flask_backend
ENV PYTHONPATH $ {PYTHONPATH}：//应用
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
此方法与设置不兼容使用绑定安装覆盖Docker映像内容。非Docker主机的Node和Python设置将是一个更容易的开发环境，并且对于此特定设置而言，它与Docker设置可能没有实质性区别。
Good day SO,
I know this is bad practice and that I am supposed to have one App per container, but is there a way for me to have two services running concurrently in the same container, and how would I go about writing the Dockerfile for it?
My current Dockerfile for the Flask (Backend) App:
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
My React (Frontend) 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"]
My attempt to launch both apps within the same Docker Container was to merge the two Dockerfiles, but the resulting container does not have the data from the first Dockerfile, and I am unsure how to proceed.
My merged 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"]
I am a beginner in using Docker, and hence I forsee that there will be several problems, such as communications between the two apps (Backend uses port 5000), using this method. Any guidiance will be greatly appreciated!
A React application doesn't usually have a server per se (development-only Docker setups aside). Instead, you run a tool like Webpack to compile it down to static files, which you can then serve to the browser, which then runs them.
On your host system you'd run something like
yarn build
which produces a dist directory; then you'd copy this into your Flask static directory.
If you do this entirely ahead-of-time, then you can run your application out of a Python virtual environment, which will be a much easier development and test setup, and the Dockerfile you show won't change.
If you want to build this entirely in Docker (for example to take advantage of a more Docker-native automated build system) a multi-stage build matches well here. You can use a first stage to build the front-end application, and then COPY that into the final application in the second stage. That looks roughly like:
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
This approach is not compatible with setups that overwrite Docker image contents using bind mounts. A non-Docker host Node and Python setup will be a much easier development environment, and for this particular setup isn't likely to be substantially different from the Docker setup.
这篇关于单个Docker容器中的Flask和React App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
