Fabric Apps の静的コンテンツ ホスティング

Fabric Apps には、バックエンド API と共にフロントエンド アプリケーションをビルド、パッケージ化、提供する静的コンテンツ ホスティング サービスが含まれています。 静的ホスティングが有効になっている場合、CLI はビルドされた資産をFabricにデプロイし、ユーザーがアプリケーションにアクセスできるパブリック URL を提供します。

前提条件

  • フロントエンド アプリケーション (React、Vue、バニラ TypeScript など) を含む Fabric Apps プロジェクト。
  • 静的出力を生成するビルド コマンド (たとえば、 npm run build)。

静的ホスティングのしくみ

静的ホスティングを有効にしてデプロイする場合、CLI は次の手順を実行します。

  1. 構成したビルド コマンド (たとえば、 npm run build) を実行します。
  2. 出力フォルダーが存在し、ファイルが含まれていることを検証します。
  3. すべてのファイルを圧縮 ZIP アーカイブ (最大 100 MB) にパッケージ化します。
  4. Fabric Apps ホストにアーカイブをアップロードします。
  5. アプリケーションにアクセスできるパブリック ホスティング URL を返します。

静的ホスティングを構成する

staticHosting ファイルの services の下に rayfin/rayfin.yml セクションを追加します。

services:
  staticHosting:
    enabled: true
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html

構成オプション

Option 必須 デフォルト 説明
enabled はい — 静的ホスティングを有効にするには、 true に設定します。
folder はい — ビルドされた静的ファイルを含む出力フォルダー。 rootを基準にしています。
root いいえ プロジェクトルート フロントエンド プロジェクトのルート ディレクトリ(プロジェクト ルートに対する相対ディレクトリ)。
buildCommand いいえ — パッケージ化する前に実行するシェル コマンド (たとえば、 npm run build)。
indexDocument いいえ — ディレクトリ要求に対応する既定のドキュメント (たとえば、 index.html)。

別のフロントエンド ディレクトリを使用した例

フロントエンド コードがサブディレクトリに存在する場合:

services:
  staticHosting:
    enabled: true
    root: frontend
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html

この構成により、出力パスが <project-root>/frontend/distに解決されます。

静的コンテンツをデプロイする

フル デプロイ

npx rayfin upを実行すると、静的コンテンツは完全なスタック展開の一部として自動的にデプロイされます。

npx rayfin up

CLI によってフロントエンドがビルドされ、出力がパッケージされ、バックエンド構成と共にアップロードされます。 デプロイ後、CLI はホスティング URL を出力し、 .env.fabric-* ファイルに VITE_RAYFIN_HOSTING_URLとして書き込みます。

スタンドアロンの静的デプロイ

完全なデプロイを再実行せずに静的コンテンツのみを再デプロイするには、 staticapp deploy サブコマンドを使用します。

npx rayfin up staticapp deploy

このコマンドは、フロントエンド コードのみを変更し、より高速な反復サイクルが必要な場合に便利です。

ビルド 手順をスキップする

フロントエンドを既にビルドしていて、再構築せずに既存の出力をデプロイする場合:

npx rayfin up staticapp deploy --skip-build

詳細なログを有効にする

デプロイ中に詳細な出力を表示します。

npx rayfin up staticapp deploy --verbose

認証コールバックの構成

静的ホスティングと認証の両方が有効になっている場合、Rayfin CLI は、ホスティング URL に基づいて認証コールバック URI を自動的に登録します。

たとえば、ホスティング URL が https://example.webapp.comされている場合、CLI は次のコールバック URI を追加します。

services:
  auth:
    allowedRedirectUris:
      - http://localhost:5173
      - http://localhost:5173/auth/callback
      - https://example.webapp.com/auth/callback

認証コールバック URI を手動で構成する必要はありません。CLI によって構成が更新され、デプロイ中にプッシュされます。

展開サイズの制限

  • 圧縮された ZIP アーカイブは 100 MB を超えてはなりません。
  • CLI では、最大圧縮を使用してアップロード サイズを最小限に抑えます。
  • ビルド出力が制限を超えた場合は、次の方法で資産を最適化します。
    • 運用ビルドからのソース マップの除外。
    • 大きな画像やビデオを圧縮または削除する。
    • バイナリ ファイルをバンドルするのではなく、Fabric Apps ストレージに移動する。

完全なコード例

静的ホスティング、認証、およびデータ サービスを有効にした完全な rayfin.yml 構成:

id: my-app
name: my-app
version: 1.0.0
services:
  auth:
    enabled: true
    allowedRedirectUris:
      - http://localhost:5173
      - http://localhost:5173/auth/callback
    fabric:
      enabled: true
  data:
    enabled: true
    dialect: mssql
  staticHosting:
    enabled: true
    folder: dist
    buildCommand: npm run build
    indexDocument: index.html

ローカルでテストする

デプロイする前に、静的ビルドがローカルで動作することを確認します。

  1. フロントエンドを構築する:

    npm run build

  2. 出力フォルダーに想定されるファイルが含まれていることを確認します。

    ls dist

  3. ローカル静的サーバーを使用してビルドされたファイルを提供します。

    npx serve dist

  4. サーバーによって出力された URL を開き、アプリケーションが正しく読み込まれることを確認します。

デプロイに関する問題のトラブルシューティング

静的フォルダーが見つかりません

静的フォルダーが存在しないことを CLI が報告する場合:

  • folderのrayfin.yml パスが正しく、rootに対する相対パス (または、rootが設定されていない場合はプロジェクト ルート) であることを確認します。
  • ビルド コマンドが正常に実行され、予想されるディレクトリに出力が生成されたことを確認します。

空の静的フォルダー

通常、空の出力フォルダーは、ビルド コマンドが失敗したか、出力が生成されなかったことを意味します。 ビルド コマンドを手動で実行してエラーを確認します。

npm run build

デプロイがサイズ制限を超えています

ZIP が 100 MB を超える場合:

  • 不要なファイル (ソース マップ、開発資産) のビルド出力を確認します。
  • 実稼働ビルドでソース マップを除外するように bundler を構成します。
  • 大きなバイナリ ファイルを Fabric Apps ストレージに移動します。

リモート エンドポイントが構成されていない

npx rayfin up staticapp deploy コマンドには、既存のリモート展開が必要です。 最初 npx rayfin up 実行してリモート エンドポイントを構成し、その後の更新に staticapp deploy を使用します。

関連するコンテンツ

  • Last updated on