次の方法で共有

DevServer と Microsoft Fabric

DevServer は、Fabric ワークロードの開発中に実行するローカル Web サーバーです。 localhost でフロントエンド (SPA) を提供し、開発時に Fabric が製品マニフェストと項目マニフェストを取得するために呼び出す HTTP エンドポイントの小さなセットを提供します。 DevGateway と組み合わせると、Fabric は iFrame にワークロード UI を読み込み、テナントに何も発行せずにマニフェスト データを読み取ることができます。

DevServer の機能

  • ワークロード フロントエンドを localhost ( http://localhost:60006 など) 上の HTTP 経由でホストして、Fabric が iFrame に読み込むことができるようにします。
  • マニフェストによって参照される静的アセット (アイコン、ローカライズされた文字列、画像) を提供します。
  • 開発中にマニフェストを読み取るために Fabric が使用するローカル JSON エンドポイントを公開します。
  • ほとんどのセットアップでホット リロードを使用して、編集/更新サイクルを迅速に有効にします。

Important

DevServer は DevGateway と連携します。 DevGateway はローカル ワークロード インスタンスを Fabric に登録するため、開発時にサービスが DevServer エンドポイントと通信することを認識します。

Fabric が DevServer を呼び出す場所

開発モードを有効にし、DevGateway と DevServer の両方を起動する場合:

  • Fabric は、ワークロード マニフェストによって定義されたフロントエンド エンドポイントを介してフロントエンドに移動します ( ワークロード マニフェストを参照)。 開発中、これは通常、DevServer によって公開される localhost URL を指します。
  • Fabric は DevServer に対して製品向けのメタデータのクエリを実行し、ワークロードのナビゲーション、タイル、その他の UX をレンダリングできるようにします。 これにより、パッケージを再構築してアップロードすることなく、 Product.json マニフェストと項目マニフェストを反復処理できます。

DevServer が提供するローカル エンドポイント

正確なルートはテンプレートによって異なる場合がありますが、サンプル リポジトリでは、予測可能なエンドポイントの小さなセットが公開されています。

  • GET / — Web アプリを返します (UI Fabric は iFrame に読み込まれます)。
  • GET /manifests — フロントエンドによって使用される Product マニフェストと Item マニフェストを集計する JSON ペイロードを返します。 これにより、発行時に Fabric が想定する構造が反映されます ( 製品マニフェスト と 項目マニフェストを参照)。
  • GET /assets/... - マニフェストによって参照されるアイコン、画像、ローカライズされた文字列を提供します。

注

  • CORS とヘッダーは、アプリを埋め込んでホストと通信できるように、サンプル DevServer で事前構成されています。
  • 上記のルート名は、現在のサンプルに従います。プロジェクトがマニフェスト エンドポイントに別のパスを使用している場合は、テンプレートの README を参照してください。

一般的な開発フロー

  1. サンプル リポジトリから DevServer を起動し、localhost でフロントエンドをホストします。
  2. DevGateway を起動して、ローカル ワークロードを Fabric に登録します。
  3. Fabric ワークスペースを開き、ワークロード エントリ ポイントを起動します。Fabric は iFrame にアプリを読み込み、DevServer エンドポイントを呼び出してマニフェスト データを読み取ります。
  4. UI またはマニフェスト ファイルを編集して更新する。変更は再パッケージ化せずに直ちに有効になります。

各プロセスを開始する方法については、 概要チュートリアル と セットアップ ガイドを参照してください。

発行されたマニフェストとの関係

運用環境では、ワークロードのマニフェストがパッケージ化され、ワークロードの NuGet パッケージの一部としてアップロードされます ( マニフェストの概要を参照)。 開発中、DevServer のローカル エンドポイントは、パッケージ化されたファイルの軽量なスタンドインとして機能するため、次の処理をすばやく繰り返すことができます。

  • スキーマとルールは、発行されたマニフェストの場合と同じです。
  • DevServer はローカル開発にのみ影響します。発行のしくみは変わりません。

トラブルシューティングのヒント

  • iFrame に空白のページが表示されている場合は、DevServer が実行されており、マニフェスト内のフロントエンド エンドポイントが正しい localhost URL をポイントすることを確認します。
  • アイコンまたは文字列がない場合は、 assets パスを確認し、DevServer が /assetsの下でこれらのファイルを提供していることを確認します。
  • Fabric でマニフェストが見つからない場合は、テンプレートに /manifests ルートが存在し、有効な JSON が返されていることを確認します。

こちらも参照ください

  • Last updated on