React を使用したマイクロフロントエンド: 包括的なガイド-jsチュートリアル-php.cn

React を使用したマイクロフロントエンド: 包括的なガイド

Patricia Arquette

リリース： 2025-01-06 22:50:43

オリジナル

759 人が閲覧しました

Micro-Frontends with React: A Comprehensive Guide

Web アプリケーションが複雑になるにつれて、スケーラブルで保守可能なアーキテクチャの必要性が最も重要になります。マイクロフロントエンドは、モノリシックフロントエンドアプリケーションをより小さく管理しやすい部分に分割することでソリューションを提供します。この投稿では、マイクロフロントエンドの概念、React を使用してマイクロフロントエンドを実装する方法、開発プロセスにマイクロフロントエンドがもたらす利点について説明します。

マイクロフロントエンドとは何ですか?

マイクロフロントエンドは、マイクロサービスアーキテクチャをフロントエンドまで拡張します。単一のモノリシックアプリケーションの代わりに、マイクロフロントエンドを使用すると、アプリケーションの個々の機能やセクションを個別に開発およびデプロイできます。各チームはアプリケーションの特定の部分を所有できるため、拡張性と保守性が向上します。

マイクロフロントエンドの主な特徴:

独立して展開可能: 各マイクロフロントエンドは独立して開発、テスト、展開できます。
テクノロジーに依存しない: チームは、異なるマイクロフロントエンドに対して異なるテクノロジーを選択できるため、柔軟性が得られます。
チームの自律性: チームは独立して作業できるため、依存関係やボトルネックが軽減されます。

マイクロフロントエンドを使用する理由

スケーラビリティ: アプリケーションの成長に合わせて、マイクロフロントエンドを使用すると、複数のチームにわたって開発を拡張できます。
開発の高速化: 独立した展開により、リリースサイクルが短縮され、市場投入までの時間が短縮されます。
保守性の向上: コードベースが小さいほど、管理、テスト、リファクタリングが容易になります。

React を使用したマイクロフロントエンドの実装

マイクロフロントエンドアーキテクチャを選択してください マイクロフロントエンドを実装するには、いくつかのアプローチがあります。ここでは 2 つの一般的な方法を紹介します:

iframe ベース: 各マイクロフロントエンドは iframe にロードされます。このアプローチは強力な分離を提供しますが、コミュニケーションとスタイルに問題が生じる可能性があります。

JavaScript バンドル: 各マイクロフロントエンドは、単一のアプリケーションにロードされる個別の JavaScript バンドルです。このアプローチにより、より適切な統合と共有状態管理が可能になります。

マイクロフロントエンドアプリケーションのセットアップ JavaScript バンドルのアプローチを使用して簡単な例を作成してみましょう。異なるアプリケーション間でコードを共有できる強力な機能である Webpack モジュールフェデレーションを使用します。

ステップ 1: 2 つの React アプリケーションを作成する
2 つの別個の React アプリケーションを作成します。1 つはホスト用、もう 1 つはマイクロフロントエンド用です。

npx create-react-app host-app
npx create-react-app micro-frontend

ログイン後にコピー

ステップ 2: Webpack モジュールフェデレーションを構成する
マイクロフロントエンドアプリケーションで、必要な依存関係をインストールします。

npx create-react-app host-app
npx create-react-app micro-frontend

ログイン後にコピー

次に、webpack.config.js を変更して、マイクロフロントエンドコンポーネントを公開します。

npm install --save-dev webpack webpack-cli webpack-dev-server @module-federation/webpack

ログイン後にコピー

ホストアプリで、マイクロフロントエンドを使用するように設定します。

// micro-frontend/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "micro_frontend",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button", // Expose the Button component
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

ログイン後にコピー

ステップ 3: マイクロフロントエンドをロードする
ホストアプリで、マイクロフロントエンドコンポーネントを動的にロードできるようになりました:

// host-app/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        micro_frontend: "micro_frontend@http://localhost:3001/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

ログイン後にコピー

アプリケーションを実行する 必ず両方のアプリケーションを異なるポートで実行してください。たとえば、マイクロフロントエンドをポート 3001 で実行し、ホストアプリをポート 3000 で実行できます。

// host-app/src/App.js
import React, { useEffect, useState } from "react";

const App = () => {
  const [Button, setButton] = useState(null);

  useEffect(() => {
    const loadButton = async () => {
      const { Button } = await import("micro_frontend/Button");
      setButton(() => Button);
    };
    loadButton();
  }, []);

  return (
    <div>
      <h1>Host Application</h1>
      {Button ? <Button label="Click Me!" /> : <p>Loading...</p>}
    </div>
  );
};

export default App;

ログイン後にコピー

ここで http://localhost:3000 に移動すると、ホストアプリケーションがマイクロフロントエンドからボタンをロードしているのが表示されます。

マイクロフロントエンドは、複雑なフロントエンドアプリケーションを、独立して展開可能な小さな部分に分割することで管理する強力な方法を提供します。 React や Webpack Module Federation などのツールを活用することで、チームの自主性を高め、開発をスピードアップするスケーラブルなアーキテクチャを作成できます。マイクロフロントエンドの導入を検討する際は、そのメリットとそれによって生じる複雑さを比較検討し、プロジェクトのニーズに最も適したアプローチを選択してください。

以上がReact を使用したマイクロフロントエンド: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。