Fabric Apps プロジェクトの構造

Fabric Apps プロジェクトでは一貫したフォルダー レイアウトが使用されるため、データ モデル、バックエンド構成、フロントエンド コードをすばやく見つけることができます。 この記事では、プロジェクトの作成後に使用する可能性が最も高いファイルとフォルダーについて説明します。

フォルダー レイアウト

新しい Fabric Apps プロジェクトを作成すると、テンプレートによって次の構造が生成されます。

your-project/
├── rayfin/
│   ├── data/
│   │   ├── schema.ts
│   │   └── *.ts
│   ├── .env
│   ├── rayfin.yml
│   └── tsconfig.json
├── src/
├── package.json
├── tsconfig.json
└── README.md

主要な構成ファイル

rayfin/rayfin.yml

rayfin/rayfin.yml ファイルは、Fabric Apps バックエンドのメイン構成ファイルです。 ローカル開発中に実行されるサービスを制御し、動的構成値の環境変数補間をサポートします。

完全な例:

id: my-app
name: my-app
version: 1.0.0
services:
  auth:
    enabled: true
    expiryInMinutes: 60
    refreshToken:
      lifetimeInDays: 30
    customClaims:
      tenant: "default"
    scopes:
      - read:data
      - write:data
    allowedRedirectUris:
      - http://localhost:5173
      - http://localhost:5173/auth/callback
    password:
      enabled: true
    fabric:
      enabled: false
    passwordless:
      magicLink:
        enabled: false
        expiryMinutes: 15
      smsOtp:
        enabled: false
    email:
      enabled: false
      provider: smtp
      senderName: Rayfin Platform
      verificationTokenExpirationHours: 24
      passwordResetTokenExpirationMinutes: 30
      smtp:
        host: maildev
        port: 1025
        senderEmail: noreply@rayfin.local
        username: ""
        password: ""
        useSsl: false
        useStartTls: false
        webPort: 1080
  data:
    enabled: true
    dialect: mssql
  storage:
    enabled: false
  staticHosting:
    enabled: true
    root: .
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html

構成には、次のキー フィールドが含まれます。

最上位レベルのフィールド

フィールド タイプ 必須 説明
id string はい Docker Compose のプロジェクト名および Fabric アイテム識別子として使用されるプロジェクトスラッグです。
name string はい 人間が判読できるプロジェクトの表示名。
version string はい プロジェクトのバージョン（semver）。
services object はい サービス構成ブロック。

services.data

フィールド タイプ デフォルト 説明
enabled boolean false データ サービスを有効にします。

services.auth

フィールド タイプ デフォルト 説明
enabled boolean false 認証サービスを有効にします。
expiryInMinutes number — JWT トークンの有効期限 (分単位)。
customClaims Record<string, string> — 発行された JWT に追加されたカスタム要求。
scopes string[] — OAuth スコープ (たとえば、 ["read:data", "write:data"])。
refreshToken.lifetimeInDays number — 更新トークンの有効期間 (日数)。
allowedRedirectUris string[] ["http://localhost:5173"] 認証コールバックに許可されたリダイレクト URI。

services.auth.password

フィールド タイプ デフォルト 説明
enabled boolean true ローカル開発で電子メールとパスワードの認証を有効にする

services.auth.fabric

フィールド タイプ デフォルト 説明
enabled boolean false ブローカー認証Fabric有効にします (Microsoft Entra ID SSO)。

services.staticHosting

フィールド タイプ デフォルト 説明
enabled boolean false 静的コンテンツ ホスティングを有効にします。
root string — フロントエンド プロジェクトのルート ディレクトリ (プロジェクト ルートに対する相対ディレクトリ)。
folder string "dist" ビルドされた静的アセットを含むディレクトリ ( rootに対する相対)。
buildCommand string — パッケージ化する前に実行するシェル コマンド (たとえば、 npm run build)。
indexDocument string — ルート パスに対して提供される既定のドキュメント (たとえば、 index.html)。

ヒント

すべての文字列値は、 ${VAR} 構文と ${VAR:-default} 構文を使用した環境変数補間をサポートします。 変数は、 rayfin/.env とシェル環境から解決されます。

rayfin/.env

rayfin/.env ファイルは、補間によってrayfin.ymlする値を指定するために使用されるオプションの環境ファイルです。 リポジトリにシークレットをコミットしないでください。 代わりに、ドキュメント用のrayfin/.env.example ファイルを作成し、.env ファイルに.gitignoreを追加します。

rayfin/tsconfig.json

rayfin/tsconfig.json ファイルは、エンティティ定義をコンパイルするために Fabric Apps CLI によって使用されるプロジェクト参照 TypeScript 構成です。 ルートの tsconfig.json を拡張し、composite: true や Node.js モジュールの解決など、Fabric Apps に必要な設定を上書きします。 このファイルを直接編集する必要はありません。

データ モデル ファイル

rayfin/data/*.ts

rayfin/data/ フォルダー内のファイルによってエンティティが定義されます。 エンティティは、 @entity() に加えて、 @uuid() や @text()などのフィールド デコレーターで修飾された TypeScript クラスです。 各エンティティ ファイルは、アプリケーション内のデータ モデルを表すクラスをエクスポートします。

rayfin/data/schema.ts

rayfin/data/schema.ts ファイルは、エンティティ名をクラスにマップします。 Rayfin SDK クライアントは、このマップを使用して、 client.data.<Entity>を介してエンティティにタイプ セーフなアクセスを提供します。 新しいエンティティを追加するときは、このスキーマ ファイルに登録する必要があります。

生成された成果物

rayfin/.temp/

rayfin/.temp/ フォルダーには、開発サーバーの実行時に作成されるバックエンド成果物が生成されます。 バックエンドが古いスキーマまたは構成を使用しているように見える場合は、開発スタックを停止して再起動して、これらのファイルを再生成します。

Important

.temp/ フォルダーをリポジトリにコミットしないでください。 .gitignore ファイルに追加します。

フロントエンド構造

src/ フォルダーには、フロントエンド アプリケーション コードが含まれています。 正確な構造は、React や Vue など、プロジェクトの作成時に選択したテンプレートによって異なります。

Fabric Apps テンプレートでは、フロントエンド構成に次の Vite 環境変数が使用されます。

  • VITE_RAYFIN_API_URL – Fabric Apps バックエンドのフロントエンドを指すベース URL。 既定値をオーバーライドするには、 npm run dev を実行する前に、この環境変数を設定します。
  • VITE_RAYFIN_PUBLISHABLE_KEY – クライアント認証に使用される公開可能なキー。
  • VITE_FABRIC_ITEM_ID – rayfin up によって設定された Fabric 項目 ID。 デプロイ時に .env.fabric-<workspacename> (および .env.fabric) に書き込まれます。 ブローカー認証Fabricに使用されます。
  • VITE_FABRIC_WORKSPACE_ID – rayfin up によって設定された Fabric ワークスペース ID。 デプロイ時に VITE_FABRIC_ITEM_ID と共に記述されます。

関連するコンテンツ

  • Last updated on