Hostowanie zawartości statycznej dla aplikacji Fabric

Fabric Apps obejmuje usługę hostowania zawartości statycznej, która tworzy, pakuje i udostępnia aplikację frontendu wraz z interfejsami API backendu. Po włączeniu hostingu statycznego interfejs CLI wdraża zbudowane zasoby do usługi Fabric i udostępnia publiczny adres URL, pod którym użytkownicy mogą uzyskać dostęp do aplikacji.

Wymagania wstępne

  • Projekt Fabric Apps z aplikacją frontonu (na przykład React, Vue lub vanilla TypeScript).
  • Polecenie kompilacji, które generuje statyczne dane wyjściowe (na przykład npm run build).

Jak działa hosting statyczny

Podczas wdrażania przy włączonym hostingu statycznym interfejs wiersza polecenia wykonuje następujące kroki:

  1. Uruchamia skonfigurowane polecenie kompilacji (na przykład npm run build).
  2. Sprawdza, czy folder wyjściowy istnieje i zawiera pliki.
  3. Pakuje wszystkie pliki do skompresowanego archiwum ZIP (maksymalnie 100 MB).
  4. Przekazuje archiwum do hosta usługi Fabric Apps.
  5. Zwraca publiczny adres URL hostingu, pod którym aplikacja jest dostępna.

Konfigurowanie hostingu statycznego

Dodaj sekcję staticHosting pod services w pliku rayfin/rayfin.yml:

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

Opcje konfiguracji

Option Required Wartość domyślna Opis
enabled Yes — Ustaw na true, aby włączyć hosting statyczny.
folder Yes — Folder wyjściowy zawierający wygenerowane pliki statyczne, względem root.
root No katalog główny projektu Katalog główny projektu interfejsu użytkownika, względem katalogu głównego projektu.
buildCommand No — Polecenie powłoki do uruchomienia przed pakowaniem (na przykład npm run build).
indexDocument No — Domyślny dokument służąy do obsługi żądań katalogu (na przykład index.html).

Przykład z oddzielnym katalogiem frontonu

Jeśli kod frontonu znajduje się w podkatalogu:

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

Ta konfiguracja określa ścieżkę wyjściową jako <project-root>/frontend/dist.

Wdrażanie zawartości statycznej

Pełne wdrożenie

Po uruchomieniu npx rayfin up zasoby statyczne są wdrażane automatycznie w ramach wdrożenia całego stosu:

npx rayfin up

CLI kompiluje frontend, pakuje pliki wyjściowe i przesyła je wraz z konfiguracją backendu. Po wdrożeniu CLI wyświetla adres URL hostingu i zapisuje go w pliku .env.fabric-* jako VITE_RAYFIN_HOSTING_URL.

Autonomiczne wdrożenie statyczne

Użyj polecenia podrzędnego staticapp deploy , aby ponownie wdrożyć tylko zawartość statyczną bez ponownego uruchamiania pełnego wdrożenia:

npx rayfin up staticapp deploy

To polecenie jest przydatne w przypadku zmiany tylko kodu frontonu i szybszego cyklu iteracji.

Pomiń krok kompilacji

Jeśli fronton został już skompilowany i chcesz wdrożyć istniejące dane wyjściowe bez ponownego kompilowania:

npx rayfin up staticapp deploy --skip-build

Włącz szczegółowe logowanie

Pokaż szczegółowe dane wyjściowe podczas wdrażania:

npx rayfin up staticapp deploy --verbose

Konfiguracja wywołania zwrotnego uwierzytelniania

Gdy włączone są zarówno hosting statyczny, jak i uwierzytelnianie, Rayfin CLI automatycznie rejestruje URI wywołania zwrotnego do uwierzytelniania na podstawie adresu URL hostingu.

Jeśli na przykład adres URL hostingu to https://example.webapp.com, interfejs wiersza polecenia dodaje ten identyfikator URI wywołania zwrotnego:

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

Nie musisz ręcznie konfigurować URI wywołania zwrotnego uwierzytelniania — CLI aktualizuje konfigurację i przesyła ją podczas wdrażania.

Limity rozmiaru wdrożenia

  • Skompresowane archiwum ZIP nie może przekraczać 100 MB.
  • Interfejs wiersza polecenia używa maksymalnej kompresji w celu zminimalizowania rozmiaru przekazywania.
  • Jeśli dane wyjściowe kompilacji przekraczają limit, zoptymalizuj zasoby przez:
    • Wykluczanie map źródłowych z kompilacji produkcyjnych.
    • Kompresowanie lub usuwanie dużych obrazów i wideo.
    • Przenoszenie plików binarnych do magazynu aplikacji Fabric zamiast dołączania ich do pakietu.

Kompletny przykład

Pełna rayfin.yml konfiguracja z włączonymi usługami hostingu statycznego, uwierzytelniania i danych:

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

Testowanie lokalne

Przed wdrożeniem sprawdź, czy kompilacja statyczna działa lokalnie:

  1. Skompiluj fronton:

    npm run build

  2. Sprawdź, czy folder wyjściowy zawiera oczekiwane pliki:

    ls dist

  3. Obsługa skompilowanych plików za pomocą lokalnego serwera statycznego:

    npx serve dist

  4. Otwórz adres URL wydrukowany przez serwer i sprawdź, czy aplikacja ładuje się poprawnie.

Rozwiązywanie problemów dotyczących wdrożenia

Nie znaleziono folderu statycznego

Jeśli interfejs wiersza polecenia zgłasza, że folder statyczny nie istnieje:

  • Sprawdź, czy ścieżka folder w pliku rayfin.yml jest poprawna i względna względem root (lub względem katalogu głównego projektu, jeśli root nie jest ustawione).
  • Upewnij się, że polecenie kompilacji przebiegło pomyślnie i wygenerowało dane wyjściowe w oczekiwanym katalogu.

Pusty folder statyczny

Pusty folder wyjściowy zwykle oznacza, że polecenie kompilacji nie powiodło się lub nie wygenerowało danych wyjściowych. Uruchom polecenie kompilacji ręcznie, aby sprawdzić, czy występują błędy:

npm run build

Wdrożenie przekracza limit rozmiaru

Jeśli plik ZIP przekracza 100 MB:

  • Przejrzyj dane wyjściowe kompilacji pod kątem niepotrzebnych plików (mapy źródłowe, zasoby programistyczne).
  • Skonfiguruj pakiet do wykluczania map źródłowych w kompilacjach produkcyjnych.
  • Przenieś duże pliki binarne do magazynu Fabric Apps.

Nie skonfigurowano zdalnego punktu końcowego

Polecenie npx rayfin up staticapp deploy wymaga istniejącego wdrożenia zdalnego. Najpierw uruchom npx rayfin up, aby skonfigurować zdalny punkt końcowy, a następnie użyj staticapp deploy do kolejnych aktualizacji.

Treści powiązane

  • Last updated on