TL;DR: シングルスパを使用してマイクロ フロントエンドを構築すると、大きなアプリを小さな独立した部分に分割することが容易になり、異なるチームが他の部分に影響を与えることなく作業できるようになります。このブログでは、Angular および React マイクロ フロントエンドを作成し、ルート構成に接続し、デプロイする方法を説明します。

マイクロ フロントエンドは、特に複数のチームがユーザー インターフェイスの異なる部分に取り組む場合に、フロントエンド アプリをスケーリングするための一般的なアーキテクチャ スタイルとなっています。モノリシックなフロントエンドをより小さな独立したモジュールに分割することで、チームはアプリの各部分を個別にデプロイ、更新、スケールすることができます。この記事では、single-spa.

を使用してさまざまなフレームワークのマイクロ フロントエンドを作成および接続する方法について説明します。

シングルスパのご紹介

Single-spa は、マイクロ フロントエンド アーキテクチャ向けに設計された JavaScript ベースのフレームワークです。 Angular、React、Vue などのフレームワークを使用してマイクロ フロントエンドを構築し、それらを単一のアプリとして提供できます。接続されているアプリの登録を維持し、ルートを使用してユーザーを別のアプリにリダイレクトします。

単一 SPA フレームワークを使用すると、アプリのさまざまな部分にさまざまな言語を選択できること、マイクロ フロントエンドの独立した開発と展開、スケーラビリティなど、多くの利点があります。それでは、シングルスパの作成から始めましょう。

シングルスパの作成

前提条件

シングルスパを実装するには、Node.js と npm がインストールされていることが重要です。これらをインストールするには、Node.js Web サイトにアクセスし、オペレーティング システムの最新バージョンをダウンロードします。インストーラーを実行してインストールを完了します。

次に、コマンド プロンプトで次のコマンドを実行して、node.js と npm のインストールを確認します。

npm - version
node - version

ステップ 1: プロジェクトのセットアップ

この例では、Angular と React を使用して 2 つの単純なマイクロ フロントエンドが作成されます。 root-config は 2 つのマイクロ フロントエンドを提供します。

アプリを作成する

次のコマンドを実行することで、単純な Angular マイクロ フロントエンド アプリを作成できます。

ng new angular-spa-frontend

プロジェクトが作成されたら、次のコマンドを実行してシングルスパ ライブラリをインストールします。

ng add single-spa-angular

ライブラリが適切にインストールされると、main.single-spa.ts という名前のファイルが Angular プロジェクトに作成されます。このファイルには、single-spa に関連するすべての設定が含まれています。

設定コードを参照してください。

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

単一スパとして機能するには、APP_BASE_HREF 値を指定する必要があります。

さらに、シングルスパ ライブラリを追加すると、package.json には 2 つの追加スクリプトが含まれます。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

angular.json ファイルは、次の構成を使用して変更されます。

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

“main”: “src/main.ts” は、“main”: “src/main.single-spa.ts” に置き換えられます。新しいビルド構成は JavaScript モジュールとして追加されます。

構成が完了して検証されたら、次のコマンドを使用して Angular アプリを提供できます。

npm run serve:single-spa:angular-spa-frontend

マイクロ フロントエンド アプリの作成に成功したので、root-config.

を実装する方法を見てみましょう。

ルート構成

次のコマンドを実行してroot-configを作成します。

npx create-single-spa

このコマンドを入力すると、root-config を作成するための一連の設定が表示されます。

前の構成を選択した後、複数のフロントエンドに対応するルート構成が作成されます。

作成したマイクロ フロントエンドを root-config に接続するには、root-config.ts および index.ejs ファイルを変更する必要があります。

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

前のコード ブロックで述べたように、作成したマイクロ フロントエンドは root-config.ts ファイルにインポートする必要があります。

name: "@org/angular-spa-frontend",

次のスクリプトを index.ejs ファイルに追加する必要があります。

マイクロ フロントエンド ( @org/angular-spa-frontend ) と、マイクロフロントエンドはホストされているため、インポート マップに追加する必要があります。 次に、次のコマンドを実行してアプリを実行します。

npm 実行開始

npm run start

ステップ 2: 実稼働環境へのデプロイメント

これらのマイクロ フロントエンドを運用環境にデプロイする場合は、各マイクロ フロントエンド アプリを独立したスタンドアロン アプリとしてデプロイすることをお勧めします。ルート構成は、

registerApplication

. に設定されたアプリのルートに応じて、各アプリを動的にロードすると考えられます。 ステップ 3: マイクロ フロントエンドを追加する

さらにマイクロ フロントエンドを追加するには、前述の手順を繰り返します。 React マイクロ フロントエンドを同じ root-config に統合する方法を見てみましょう。

次のコマンドを使用して、新しい React マイクロ フロントエンドを作成します。

npx create-single-spa --module-type 反応

npx create-single-spa --module-type react

npm install single-spa-react

npm install single-spa-react

「反応」から React をインポートします。 「react-dom」から ReactDOM をインポートします。 「single-spa-react」から singleSpaReact をインポートします。 「./App」からアプリをインポートします。 const ライフサイクル = singleSpaReact({ 反応して、 反応DOM、 rootコンポーネント: アプリ、 errorBoundary(err, 情報, props) { return

; }、 }); エクスポート const { ブートストラップ、マウント、アンマウント } = ライフサイクル;

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

npm 開始

npm start

root-config

と統合するには、root-config. のファイルに次の変更を実装します。
import { registerApplication, start } from "single-spa"; registerApplication({ 名前: "@org/angular-spa-frontend", アプリ: () => System.import("@org/angular-spa-frontend") .then((モジュール) => ({ ブートストラップ: module.bootstrap, マウント: module.mount、 アンマウント: module.unmount、 })) .catch((エラー) => { console.error("Angular マイクロフロントエンドのロードに失敗しました:", error); Promise.reject(error) を返します。 })、 activeWhen: ["/"], }); registerApplication({ 名前: "@org/react-spa-frontend", アプリ: () => System.import("@org/react-spa-frontend") .then((モジュール) => ({ ブートストラップ: module.bootstrap, マウント: module.mount、 アンマウント: module.unmount、 })) .catch((エラー) => { console.error("React マイクロフロントエンドのロードに失敗しました:", error); Promise.reject(error) を返します。 })、 activeWhen: ["/react"], }); 始める（{ URLRerouteOnly: true、 });

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

index.ejs

ファイルを React アプリのメイン バンドル パスで更新する必要もあります。

この GitHub デモで、このシングルスパ アプリケーションの完全なコード例を確認してください。

結論

シングルスパを使用してマイクロ フロントエンドを構築すると、大きなアプリを小さな独立した部分に分割することが容易になります。こうすることで、さまざまなチームが他のチームに影響を与えることなく自分の部分に取り組むことができ、Angular や React などの好みのフレームワークを使用できます。このガイドの手順に従って、単一スパ プロジェクトをセットアップし、複数のマイクロ フロントエンドを接続して、ユーザーにスムーズなエクスペリエンスを提供することができます。シングルスパにより、時間の経過とともにアプリを拡張し、必要に応じて新しい機能を追加することが簡単になります。

関連ブログ

RxJS で非同期 JavaScript をマスターする

• Axios と Fetch API?適切な HTTP クライアントの選択
• TypeScript ユーティリティの種類: 完全ガイド
• 安全な JWT ストレージ: ベスト プラクティス