次の方法で共有

詳細なセットアップ ガイド

概要ガイドに従ってコード (Codespaces またはローカル) にアクセスできたら、次の手順に従います。

ヒント

手順を手動で実行しない場合は、GitHub Copilot に依頼して作業を支援してください。 Starter-Kit リポジトリは AI 対応であり、Copilot は対話形式でセットアップ プロセスを案内できます。 「このリポジトリの使用を開始して HelloWorld サンプルを実行する」というプロンプトを試してください。

手順 1: セットアップ スクリプトを実行する

セットアップ スクリプトは、ほとんどの構成 (アプリの登録、既定値など) を自動化します。

# From the repo root
pwsh ./scripts/Setup/Setup.ps1 -WorkloadName "Org.MyWorkload"

セットアップ スクリプトに関する注意事項:

  • WorkloadName は、Organization.WorkloadName というパターンに従う必要があります。 開発には、 Org.[YourWorkloadName]を使用します。
  • 既存の Microsoft Entra アプリを再利用する場合は、リポジトリの手動セットアップ ガイドの説明に従って SPA リダイレクト URI が構成されていることを確認します。
  • macOS/Linux では、 pwsh を使用してスクリプトを実行します。
  • PowerShell ファイルを起動するかどうかを確認するメッセージが表示されたら、PowerShell 実行ポリシーが [無制限] に設定され、ファイルのブロックが解除されていることを確認します。
  • スクリプトが提供するガイダンスに従って、すべてをセットアップします

セットアップ スクリプトは複数回実行できます。 値が既に存在する場合は、上書きするかどうかを確認するメッセージが表示されます。 すべてを上書きする場合は、Force パラメーターを使用します。

注

セットアップ エラーが発生した場合は、以下のトラブルシューティング セクションの PowerShell セットアップ エラー を参照してください。

ヒント

自動セットアップ スクリプトで問題が発生した場合は、 手動セットアップ ガイド に従って、ステップ バイ ステップの手動構成を行うことができます。

手順 2: 開発環境を開始する

開発サーバー (フロントエンド + API) を実行し、DevGateway 経由でローカル インスタンスを Fabric に登録します。

# Terminal 1: start local dev server
pwsh ./scripts/Run/StartDevServer.ps1

# Terminal 2: start DevGateway to register your local instance with Fabric
pwsh ./scripts/Run/StartDevGateway.ps1

手順 3: Fabric で開発者向け機能を有効にする

Fabric ポータルに移動し、必要な設定を構成します。

3.1 管理ポータルでテナント設定を構成する:

管理ポータルの設定に移動し、次のテナント設定を有効にします。

  • 容量管理者と共同作成者は、追加のワークロードを追加および削除できます
  • ワークスペース管理者はパートナー ワークロードを開発できます
  • ユーザーは、Microsoft によって検証されていない追加のワークロードを表示して操作できます

テナント設定のスクリーンショット。

3.2 ファブリック開発者モードを有効にする:

Fabric 開発者向け設定に移動し、Fabric 開発者モードを有効にします。

Fabric 開発者モードのスクリーンショット。

これで、Fabric で最初の Hello World 項目を作成する準備ができました。

手順 4: HelloWorld 項目をテストする

ワークロード ハブからワークロードにアクセスするか (ワークロード名を探します)、直接移動できます。 次に、Hello World 項目を作成します。

Steps:

  1. ファブリック ワークロード ハブを開く: ワークロードを見つけます (例: Org.MyWorkload)。

    • ダイレクト ナビゲーション: https://app.fabric.microsoft.com/workloadhub/detail/<WORKLOAD_NAME>?experience=fabric-developer
    • <WORKLOAD_NAME>を実際のワークロード名に置き換えます (例: Org.MyWorkload)

  2. 新しい項目を作成する: Hello World 項目の種類を選択し、開発ワークスペースを選択します。

  3. 機能の確認: エディターが開きます。アイテムが期待どおりに動作し、ワークスペース内のネイティブ成果物のように表示されたことを確認します。

おめでとうございます! 開発環境から最初の項目を作成しました。

手順 5: コーディングを開始する

これですべての設定が完了し、独自のカスタム項目の作成を開始できます。 カスタム Fabric 項目を作成する方法については、包括的なガイドに従ってください。

📖 カスタム ファブリックアイテムの作成ガイド - このガイドでは、項目を作成するための 2 つの方法を提供します。

  • AI-Assisted アプローチ: 対話型ガイダンスに GitHub Copilot を使用する (新しい開発者に推奨)
  • 手動スクリプト化アプローチ: 迅速なセットアップに自動 PowerShell スクリプトを使用する (経験豊富な開発者に推奨)

クイック スタート オプション:

  • 既存の HelloWorld エディターを更新します。 Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx
  • または、スクリプトを使用して新しい項目をスキャフォールディングします。 ./scripts/Setup/CreateNewItem.ps1

コーディングを楽しんでね! 🚀

ベスト プラクティス

  • リポジトリをフォークする: Starter-Kit リポジトリをフォークし、フォークをプロジェクトのベースとして使用します。
  • 同期を保つ: フォークをアップストリームと同期させ、改善点を取り上げてください。
  • プロジェクト構造の一貫性を維持する: Starter-Kit のプロジェクト構造と組織パターンを保持して、将来の更新プログラムとの互換性を確保し、コードの明確さを維持します。
  • 定期的な Starter-Kit 統合: バグ修正、新機能、セキュリティ更新プログラムの恩恵を受けるために、Starter-Kit からのコード変更をプロジェクトに定期的に統合します。 アップストリームの変更を定期的 (毎月または四半期) に確認してマージするプロセスを設定します。
  • マニフェストを早期に検証する: ワークロード マニフェストを早期に検証し、最小限の特権のアクセス許可に従います。
  • 開発コンテナーを使用する: 一貫性のある破棄可能な環境には、開発コンテナーまたは Codespaces を使用します。
  • 指定されたスクリプトを使用する: 指定されたスクリプト (Setup、StartDevServer、StartDevGateway) を使用して、セットアップと毎日のワークフローを自動化します。

一般的な問題のトラブルシューティング

PowerShell セットアップ エラー

セットアップ スクリプトの実行中にエラーが発生した場合は、スクリプトを実行する環境に最新の PowerShell がインストールされ、構成されていることを確認してください。

PowerShell セットアップ エラーのスクリーンショット。

スクリプト実行ポリシー エラー

遭遇した場合: cannot be loaded because the execution policy is unrestricted:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

ポート 5173 が使用中

DevServer がポート 5173 で起動できない場合は、プロセスを見つけて終了します。

# Find process using port
Get-Process -Id (Get-NetTCPConnection -LocalPort 5173).OwningProcess

# Terminate process
Stop-Process -Id <ProcessId> -Force

依存関係エラー

不足している依存関係に関するエラーが発生した場合:

# From Workload folder
cd Workload
npm install

DevGateway 認証の問題

DevGateway の起動時に認証が失敗した場合:

  1. Microsoft Entra でアプリ登録リダイレクト URI を確認する
  2. テナント設定で必要な開発者向け機能が許可されていることを確認する
  3. DevGateway で正しいテナントにサインインしていることを確認する

包括的なトラブルシューティング情報については、 Starter-Kit リポジトリ README を参照してください。

重要な注意事項

新しい Chrome ローカル ネットワーク アクセス制限

Google では、DevServer でのローカル開発を中断する新しいローカル ネットワーク アクセス (LNA) 制限が Chrome に導入されました。 これらの制限により、Web サイトは明示的なユーザーアクセス許可なしでローカル ネットワーク リソースにアクセスできなくなります。

ローカル開発に必要なアクション: ワークロードをローカルで開発し続けるには、Chrome の構成を変更する必要があります。

  1. Chrome で chrome://flags/#local-network-access-check に移動する
  2. フラグを "無効" に設定する
  3. Chrome を再起動する

これが必要な理由: 新しい制限により、Fabric で実行されているワークロードと、開発ワークフローに不可欠なローカル DevGateway サーバー間の通信がブロックされます。

その他のリソース:

Important

このフラグを無効にしないと、DevGateway でのローカル開発は Chrome では機能しません。 この構成変更は、開発環境でのみ必要です。

次のステップ

  • Last updated on