如何在单个 Docker 容器中部署 React 微前端（MFE）

Question

我有许多用 Reactjs 编写的微前端（MFE）应用程序。 最后我的 web 应用程序消耗了所有这些 MFE。

docker-compose.yml

version: '3.8'
services:
  mfe1:
    build:
      context: ../packages/mfe1
      dockerfile: Dockerfile
    image: mfe1:1.1
    container_name: mfe1_container
    ports:
      - 4001:80

  mfe2:
    build:
      context: ../packages/mfe2
      dockerfile: Dockerfile
    image: mfe2:1.1
    container_name: mfe2_container
    ports:
      - 4002:80

 
  web-app:
    build:
      context: ../packages/webapp
      dockerfile: Dockerfile
    image: webapp:1.1
    container_name: webapp_container
    ports:
      - 4000:80
    depends_on:
      - mfe1
      - mfe2

这将为每个 MFE 创建不同的容器。

有没有办法可以在单个容器中运行所有 MFE？这可能吗？

是否也可以创建单个docker镜像？

DockerFile（对于 MFE1），对于其他 MFE 几乎相同）

# stage-1

FROM node:18.17-bookworm-slim as mf1-build
WORKDIR /app
COPY package*.json ./
ENV NODE_OPTIONS="--max-old-space-size=1536"
RUN npm install --no-package-lock
COPY . ./
RUN npm run docker:build
RUN npm prune --production
EXPOSE 4001


# stage-2

FROM node:18.17-bookworm-slim
WORKDIR /app
COPY --from=mfe1-build /app/dist ./dist
COPY --from=mfe1-build /app/node_modules ./node_modules


## nginx stage

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=mfe1-build /app/dist /usr/share/nginx/html

Answer 1

您可能想使用自定义入口点脚本来实现您的目标？

https://www.warp.dev/terminus/dockerfile-run-sh