シングルスパを使用してマイクロフロントエンドを構築する: ガイド-jsチュートリアル-php.cn

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

マイクロフロントエンドは、特に複数のチームがユーザーインターフェイスの異なる部分に取り組む場合に、フロントエンドアプリをスケーリングするための一般的なアーキテクチャスタイルとなっています。モノリシックなフロントエンドをより小さな独立したモジュールに分割することで、チームはアプリの各部分を個別にデプロイ、更新、スケールすることができます。この記事では、シングルスパを使用してさまざまなフレームワークのマイクロフロントエンドを作成および接続する方法について説明します。

シングルスパのご紹介

Build Micro Frontends with single-spa: A Guide

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

Build Micro Frontends with single-spa: A Guide

単一 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: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

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

ログイン後にコピー

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

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

npm - version
node - version

ログイン後にコピー

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

ng new angular-spa-frontend

ログイン後にコピー

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

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

ng add single-spa-angular

ログイン後にコピー

マイクロフロントエンドアプリの作成に成功したので、root-config を実装する方法を見てみましょう。

ルート構成

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

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: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

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

ログイン後にコピー

このコマンドを入力すると、root-config を作成するための一連の設定が表示されます。 Build Micro Frontends with single-spa: A Guide

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

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

"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"
 }

ログイン後にコピー

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

"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/"
     },

}

ログイン後にコピー

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

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

ログイン後にコピー

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

これらの手順が正しく行われたと仮定すると、次の画像のような最終的な単一スパがビューに表示されるはずです。

npx create-single-spa

ログイン後にコピー

Build Micro Frontends with single-spa: A Guide ステップ 2: 実稼働環境へのデプロイメント

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

registerApplication

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

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

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

npm - version
node - version

ログイン後にコピー

次に、作成したプロジェクト内に移動し、single-spa-react をインストールします。

ng new angular-spa-frontend

ログイン後にコピー

エントリファイルを変更してライフサイクルメソッドをエクスポートし、アプリをシングルスパと互換性のあるものにします。

ng add single-spa-angular

ログイン後にコピー

設定が完了したら、次のコマンドを使用して React マイクロフロントエンドを提供できます。

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: '<app-root />',
 Router,
 NavigationStart,
 NgZone,
});

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

ログイン後にコピー

作成したマイクロフロントエンドを既存の root-config と統合するには、root-config のファイルに次の変更を実装します。

"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"
 }

ログイン後にコピー

React アプリのメインバンドルパスを使用して index.ejs ファイルを更新する必要もあります。

"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/"
     },

}

ログイン後にコピー

GitHub リファレンス

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

結論

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