Monorepo微前端项目部署至Kubernetes集群的配置问询

一、容器化适配Monorepo架构 #

由于是Monorepo多子包结构，需针对每个前端子应用单独构建镜像，以下是通用的子应用Dockerfile示例（以container为例）：

# 阶段1：构建前端产物
FROM node:16 as build-step
WORKDIR /usr/src/app

# 复制Monorepo根依赖及当前子包依赖
COPY package*.json ./
COPY packages/container/package*.json ./packages/container/
# 若其他子包为当前包依赖，需同步复制其package文件
COPY packages/helloReact/package*.json ./packages/helloReact/
COPY packages/helloVue/package*.json ./packages/helloVue/

# 安装所有依赖（适配Monorepo workspace）
RUN npm install

# 复制当前子包源码
COPY packages/container/ ./packages/container/

# 构建当前子包
RUN npm run build --workspace=container

# 阶段2：部署到Nginx
FROM nginx:alpine
COPY --from=build-step /usr/src/app/packages/container/dist /usr/share/nginx/html
EXPOSE 80
STOPSIGNAL SIGTERM
CMD ["nginx", "-g", "daemon off;"]

同理为helloReact、helloVue编写对应Dockerfile，仅需修改workspace名称和路径即可。

二、Webpack核心配置调整（解决publicPath与远程应用地址问题） #

1. 动态设置publicPath #

摒弃硬编码路径，采用两种灵活方案：

• 相对路径方案：将所有子应用的publicPath设为'/'，后续通过Kubernetes Ingress的路径前缀区分不同子应用。
• 环境变量注入方案：修改webpack配置，支持构建时传入动态路径：

  // webpack.prod.js
  output: {
    filename: '[name].[contenthash].js',
    publicPath: process.env.PUBLIC_PATH || '/'
  }
  

  构建镜像时传入对应前缀：

  docker build --build-arg PUBLIC_PATH="/container/" -t container-image:v1 .
  

2. 远程应用地址动态化 #

避免硬编码域名，采用构建时注入或运行时替换：

• 构建时注入：修改container的webpack远程应用配置：

  // webpack.prod.js
  module.exports = {
    plugins: [
      new ModuleFederationPlugin({
        name: 'container',
        remotes: {
          helloReact: `helloReact@${process.env.REACT_SERVICE_URL || 'http://localhost:8081'}/remoteEntry.js`,
          helloVue: `helloVue@${process.env.VUE_SERVICE_URL || 'http://localhost:8082'}/remoteEntry.js`
        }
      })
    ]
  }
  

  构建时传入Kubernetes内部Service地址：

  docker build --build-arg REACT_SERVICE_URL="http://helloreact-service.default.svc.cluster.local" --build-arg VUE_SERVICE_URL="http://hellovue-service.default.svc.cluster.local" -t container-image:v1 .
  

• 运行时替换：若需更灵活的配置，可在Nginx配置中添加占位符，启动时用环境变量替换：
  编写nginx.conf：

  server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
  
    location / {
      sub_filter 'REACT_SERVICE_PLACEHOLDER' $REACT_SERVICE_URL;
      sub_filter 'VUE_SERVICE_PLACEHOLDER' $VUE_SERVICE_URL;
      sub_filter_once off;
      try_files $uri $uri/ /index.html;
    }
  }
  

  在Dockerfile中复制该配置：

  COPY nginx.conf /etc/nginx/conf.d/default.conf
  

  后续在Kubernetes Deployment中传入环境变量即可。

三、Kubernetes部署配置 #

每个子应用对应一套Deployment、Service，通过Ingress统一对外入口：

1. Deployment示例（container） #

apiVersion: apps/v1
kind: Deployment
metadata:
  name: container-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: container
  template:
    metadata:
      labels:
        app: container
    spec:
      containers:
        - name: container
          image: container-image:v1
          ports:
            - containerPort: 80
          env:
            - name: REACT_SERVICE_URL
              value: "http://helloreact-service.default.svc.cluster.local"
            - name: VUE_SERVICE_URL
              value: "http://hellovue-service.default.svc.cluster.local"

2. Service示例（container） #

apiVersion: v1
kind: Service
metadata:
  name: container-service
spec:
  selector:
    app: container
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  type: ClusterIP

3. Ingress统一入口配置 #

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: microfrontend-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  rules:
    - host: your-domain.com
      http:
        paths:
          - path: /container(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: container-service
                port:
                  number: 80
          - path: /helloReact(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: helloreact-service
                port:
                  number: 80
          - path: /helloVue(/|$)(.*)
            pathType: Prefix
            backend:
              service:
                name: hellovue-service
                port:
                  number: 80

注：rewrite-target会将/container/path重写为/path，适配publicPath为/的配置。

四、验证步骤 #

1. 构建所有子应用镜像并推送到容器仓库
2. 应用Kubernetes配置：kubectl apply -f deployment.yaml -f service.yaml -f ingress.yaml
3. 访问your-domain.com/container，检查微前端组件是否正常加载

内容的提问来源于stack exchange，提问作者Bill