React Academy · レッスン

MFEの独立デプロイとCI Pipeline

個々のmicro-frontendを連携なしでデプロイできるよう、独立したCI/CD pipelinesを構築します。

「MFEの独立デプロイとCI Pipeline」はCoddyKit上の無料React Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

目標：独立したデプロイ

各マイクロフロントエンドは、他チームとの調整なしに独立してデプロイできる必要があります。そのためには、別々のリポジトリ（またはNx/Turborepo）、別々のCIパイプライン、別々のホスティングが必要です。

リポジトリ戦略

アプローチは2つあります。Polyrepo（MFEごとに1つのリポジトリを持ち、真に独立しています）とMonorepo（すべてのMFEを1つのリポジトリに置き、変更影響範囲に基づくCIでツールを共有します）です。最初はMonorepoのほうが簡単なことが多いです。

リモートエントリ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}` },
});

MonorepoのNx Affected

NxのMonorepoでは、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）によって、デプロイ前にプロデューサーとコンシューマーがインターフェースに合意していることを確認できます。

カナリアデプロイ

新しいリモートのバージョンを、まず少数のユーザーにデプロイします。全ユーザーに展開する前にエラー率を監視することで、破壊的変更の影響範囲を抑えられます。

ロールバック戦略

以前のリモートバージョンのremoteEntry.jsをCDNに保持します。マニフェストを旧バージョンに戻すだけでロールバックできます。

// 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スモークテストを実行し、シェルのコンテキストでリモートが正しく読み込まれ、レンダリングされることを確認します。

クイックチェック

ホストのwebpack設定にリモートURLをハードコードする代わりに、バージョン付きマニフェストファイルを使用する主な利点は何ですか？

まとめ

各MFEには、テスト → ビルド → CDNへのアップロードを行う独自のCIパイプラインがあります。ロールバックできるように、バージョン付きまたはマニフェストベースのリモートURLを使用します。すぐに反映できるよう、remoteEntry.jsには短いキャッシュTTLを設定します。NxのMonorepoでは、変更されたMFEだけをデプロイするためにnx affectedを使用します。

よくある質問

「MFEの独立デプロイとCI Pipeline」レッスンは無料ですか？

はい。「MFEの独立デプロイとCI Pipeline」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「MFEの独立デプロイとCI Pipeline」で何を学びますか？

個々のmicro-frontendを連携なしでデプロイできるよう、独立したCI/CD pipelinesを構築します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「MFEの独立デプロイとCI Pipeline」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る