0Pricing
React Academy · 课时

MFE 的独立部署与 CI 流水线

设置独立的 CI/CD 流水线，使每个微前端无需协调即可部署。

MFE 的独立部署与 CI 流水线 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

目标：独立部署

每个微前端都应该能够独立部署，无需与其他团队协调。这要求使用独立的代码仓库（或 Nx/Turborepo）、独立的 CI 管道以及独立的托管环境。

代码仓库策略

有两种方式：多仓库（每个 MFE 一个代码仓库，真正独立）和单仓库（所有 MFE 位于一个代码仓库中，共享工具并使用基于变更范围的 CI）。单仓库通常更容易开始使用。

远程入口 URL 策略

每个 MFE 都会在可预测的 URL 上暴露一个 remoteEntry.js。您可以部署到带版本号的路径，或使用清单文件进行动态发现。

// Versioned URL strategy:
https://cdn.example.com/products/1.2.3/remoteEntry.js

// Latest URL strategy (simpler, no host update needed):
https://cdn.example.com/products/latest/remoteEntry.js

// Dynamic manifest:
https://cdn.example.com/manifest.json
// { products: 'https://cdn.example.com/products/1.2.3/remoteEntry.js' }

远程应用的 GitHub Actions 管道

微前端的典型 CI 管道包括：测试、构建、上传到 CDN，以及（可选）通知主应用更新其清单。

# .github/workflows/deploy.yml
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET }}
          aws-region: us-east-1
      - run: aws s3 sync dist/ s3://cdn-bucket/products/ --delete

特定环境的远程 URL

在主应用的 webpack 配置或清单中使用环境变量，以分别指向预发布环境和生产环境中的远程应用。

// Host webpack.config.js
const PRODUCTS_URL = process.env.PRODUCTS_REMOTE_URL ?? 'https://cdn.example.com/products/latest/remoteEntry.js';

new ModuleFederationPlugin({
  remotes: { products: `products@${PRODUCTS_URL}` },
});

单仓库中的 Nx Affected

在 Nx 单仓库中，nx affected 只构建和部署发生变更的 MFE，而不是全部 MFE，从而节省 CI 时间。

# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/main

契约测试

当远程应用更改暴露模块的 API 时，使用方就会出错。契约测试（Pact）会在部署前验证生产者和消费者是否同意该接口。

金丝雀部署

先将新版本的远程应用部署给一小部分用户。监控错误率后再推广给所有用户，从而缩小破坏性变更的影响范围。

回滚策略

在 CDN 上保留之前版本远程应用的 remoteEntry.js。只需更新清单，使其指回旧版本，即可完成回滚。

// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });

远程入口的 CDN 缓存

为 remoteEntry.js 设置较短的 TTL（或不缓存），以便主应用始终获取最新版本。对于带版本号的分块文件，请使用较长的 TTL。

# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js     → Cache-Control: max-age=31536000, immutable

部署后的冒烟测试

每次部署后运行最小化的 Playwright 冒烟测试，以验证远程应用能够在外壳环境中正确加载和渲染。

快速检查

与将远程 URL 硬编码在主应用 webpack 配置中相比，使用版本化清单文件的关键优势是什么？

回顾

每个 MFE 都有自己的 CI 管道：测试 → 构建 → 上传到 CDN。使用基于版本或清单的远程 URL，以支持回滚。为 remoteEntry.js 设置较短的缓存 TTL，以便立即获取更新。在 Nx 单仓库中，使用 nx affected 只部署发生变更的 MFE。

常见问题解答

「MFE 的独立部署与 CI 流水线」课时是免费的吗？

是的 — 「MFE 的独立部署与 CI 流水线」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「MFE 的独立部署与 CI 流水线」这节课中我会学到什么？

设置独立的 CI/CD 流水线，使每个微前端无需协调即可部署。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「MFE 的独立部署与 CI 流水线」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 微前端概念与权衡
  2. 使用 Webpack 5 的 Module Federation
  3. MFE 之间的共享状态与路由
  4. MFE 的独立部署与 CI 流水线
← 返回 React Academy