Rayfin CLI を使用してFabric アプリを作成する

このチュートリアルでは、Rayfin CLI を使用してプロジェクトを作成し、ローカルで実行し、Fabricにデプロイする方法について説明します。 新しいアプリと、後でスキーマまたはフロントエンドを更新する場合にも、同じ CLI ワークフローを使用します。

このチュートリアルでは、次の操作を行います。

  • テンプレートから Fabric Apps プロジェクトを作成します。
  • アプリをローカルで起動します。
  • CLI からFabricにサインインします。
  • Fabric ワークスペースにアプリをデプロイします。
  • デプロイの状態を確認します。

前提条件

  • Fabricへのアクセス。
  • 共同作成者、メンバー、または管理者のアクセス許可を持つFabric ワークスペース。
  • お客様のテナントで有効化されている Fabric Apps ワークロード
  • Node.js と npm がインストールされています。

AIプロンプト付きのアプリを作成する

以下のプロンプトを使って、GitHub Copilotまたは他のコーディングエージェントを使って、Fabricアプリを作成、探索、実行、カスタマイズ、デプロイしてください:

Set up a new Fabric App project called "rayfin-app-ws".

1. Run: npm create @microsoft/rayfin@latest
2. Open the scaffolded project directory.
3. Explore the project structure and understand the Rayfin app framework.
4. Run: npm run dev
5. Make changes to the app based on my instructions.
6. When ready, deploy with: npx rayfin up

エージェントはコマンドを対話的に実行し、必要なプロジェクトやワークスペースの設定を要求します。 展開前に生成されたファイルとコマンド出力を確認しましょう。 Fabric Appsのワークロードがまだ有効になっていない場合は、Fabric管理者にOneLake catalog>Govern>Configurations>WorkloadsでFabric Apps (preview)を有効にするよう依頼してください。

CLIから新しいアプリを作成する

テンプレートから新しいアプリをスキャフォールディングするには、 npm createを使用します。

npm create @microsoft/rayfin@latest -- my-app --workspace <workspacename>

このコマンドは、アプリ テンプレート、 rayfin 構成、フロントエンド ソース コードを含む新しいプロジェクト フォルダーを作成します。

プロジェクト ディレクトリに移動します。

cd my-app

ヒント

既に空のプロジェクト フォルダーまたは既存のソース コードがある場合は、npx rayfin initではなくnpm createを使用します。

npx rayfin init .

生成されたプロジェクトをレビューしてください

スキャフォールディング後、プロジェクトには、開発を開始するために必要なファイルが含まれます。

  • rayfin/rayfin.yml には、App Services とデプロイ設定が格納されます。
  • rayfin/.env には、CLI で使用される環境値が格納されます。
  • rayfin/data/ には、データ モデル ファイルが含まれています。
  • フロントエンド アプリは、選択したテンプレートによって作成されたルート プロジェクト構造に存在します。

ファイルごとの詳細な内訳については、「 プロジェクト構造の理解」を参照してください。

アプリをローカルで実行する

ローカル開発環境を開始します。

npx rayfin dev

このコマンドは、スキャフォールディングされたアプリのフロントエンド開発サーバーを起動し、バックエンドをFabricにデプロイします。 アプリが正しく起動することを確認するには、ターミナルに表示されているローカル URL を開きます。

アプリをFabricにデプロイしてください

アプリケーションにさらに多くの機能を組み込みます。 変更をテストした後、もう一度Fabricにデプロイします。

npx rayfin up

変更を加えずにデプロイをプレビューするには、次を実行します。

npx rayfin up --dry-run

デプロイメントを確認する

現在のデプロイ状態を確認します。

npx rayfin up status

マシンが読み取り可能な応答の場合は、JSON 出力を使用します。

npx rayfin up status --json

デプロイが正常に完了すると、CLI によって、デプロイされたアイテムのホストされているアプリの URL とFabric ポータルのリンクが出力されます。

データベースまたは静的コンテンツのみを展開してください

データ モデルのみを変更した場合は、完全な再デプロイなしでデータベースの変更を適用します。

npx rayfin up db apply

フロントエンド コードのみを変更した場合は、静的資産を再デプロイします。

npx rayfin up staticapp deploy

関数の追加

関数はFabricアプリ内のサーバー上で動作するTypeScript関数です。 ブラウザ上で動作してはならないロジック、例えば秘密の扱い、特権データへのアクセス、サインインしたユーザーの代わりに下流サービスを呼び出すなど、機能を使うこと。

npx rayfin functions init

GitHub Copilotは必要なファイルやコンポーネントの生成と更新が可能です。 また、エージェントにアプリの実行、ローカルでのデバッグ、デプロイを依頼することもできます。 例えば、次のプロンプトを使って、関数を使ってAIプルリクエストレビューアシスタントを作成できます。

Build an app that lets me view all pull requests for the repository
<repoURL>, chat with my Azure AI Foundry agent <agentName> to review
pull requests, and post review comments. Use functions with delegated
authentication to connect to Azure AI Foundry and Azure DevOps.

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

サインインに失敗するか、デプロイで 401 または 403 が返される

npx rayfin loginをもう一度実行してから、npx rayfin up再試行してください。

CLI で何が行われるかを調べる必要がある

変更をデプロイする前に、 npx rayfin up --dry-runを実行します。

アプリはデプロイされますが、スキーマのみを変更します

スキーマの変更を個別にプッシュするには、 npx rayfin up db applyを使用します。 列の型の変更や列の削除などの破壊的変更を実行すると、このコマンドは失敗します。 変更を強制するには、 --force フラグを使用します。 このアクションは重大な変更になる可能性があります。

次のステップ

  • 最終更新: