Statisk indholdshosting til Fabric Apps

Fabric Apps inkluderer en statisk indholdshosting-tjeneste, der bygger, pakker og leverer din frontend-applikation sammen med dine backend-API'er. Når statisk hosting er aktiveret, deployerer CLI'en dine byggede assets til Fabric og giver en offentlig URL, hvor brugere kan få adgang til din applikation.

Forudsætninger

  • Et Fabric Apps-projekt med en frontend-applikation (for eksempel React, Vue eller vanilla TypeScript).
  • En build-kommando, der producerer statisk output (for eksempel npm run build).

Hvordan statisk hosting fungerer

Når du deployerer med statisk hosting aktiveret, udfører CLI disse trin:

  1. Kører din konfigurerede build-kommando (for eksempel, npm run build).
  2. Validerer, at output-mappen eksisterer og indeholder filer.
  3. Pakker alle filer ind i et komprimeret ZIP-arkiv (maksimalt 100 MB).
  4. Uploader arkivet til Fabric Apps-hosten.
  5. Returnerer en offentlig hosting-URL, hvor din applikation er tilgængelig.

Konfigurér statisk hosting

Tilføj et staticHosting afsnit nedenfor services i din rayfin/rayfin.yml fil:

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

Konfigurationsindstillinger

Mulighed Påkrævet Standardindstilling Beskrivelse
enabled Ja – Sæt til true for at aktivere statisk hosting.
folder Ja – Output-mappe med byggede statiske filer, relativt til root.
root Nej Project rod Rodmappen for frontend-projektet, i forhold til projektets rod.
buildCommand Nej – Shell-kommandoen skal køre før pakning (for eksempel, npm run build).
indexDocument Nej – Standarddokument til levering af katalogforespørgsler (for eksempel, index.html).

Eksempel med en separat frontend-mappe

Hvis din frontend-kode ligger i en undermappe:

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

Denne konfiguration løser udgangsstien til .<project-root>/frontend/dist

Udrul statisk indhold

Fuld udrulning

Når du kører npx rayfin up, deployes statisk indhold automatisk som en del af full stack-implementeringen:

npx rayfin up

CLI'en bygger din frontend, pakker outputtet og uploader det sammen med din backend-konfiguration. Efter udrulning udskriver CLI'en hosting-URL'en og skriver den til din .env.fabric-* fil som VITE_RAYFIN_HOSTING_URL.

Selvstændig statisk udrulning

Brug underkommandoen staticapp deploy til kun at genudrulle dit statiske indhold uden at køre hele udrulningen igen:

npx rayfin up staticapp deploy

Denne kommando er nyttig, når du kun har ændret frontend-koden og ønsker en hurtigere iterationscyklus.

Spring byg-trinnet over

Hvis du allerede har bygget dit frontend og vil deploye det eksisterende output uden at genopbygge:

npx rayfin up staticapp deploy --skip-build

Aktivér detaljeret logføring

Vis detaljeret output under udrulning:

npx rayfin up staticapp deploy --verbose

Konfiguration af autentificering af callback

Når både statisk hosting og autentificering er aktiveret, registrerer Rayfin CLI automatisk en autentificerings-callback-URI baseret på din hosting-URL.

For eksempel, hvis din hosting-URL er https://example.webapp.com, tilføjer CLI denne callback-URI:

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

Du behøver ikke konfigurere autentificerings-callback-URI'en manuelt – CLI'en opdaterer konfigurationen og udleverer den under udrulningen.

Begrænsninger for udsendelsesstørrelse

  • Det komprimerede ZIP-arkiv må ikke overstige 100 MB.
  • CLI'en bruger maksimal komprimering for at minimere uploadstørrelsen.
  • Hvis dit buildoutput overstiger grænsen, optimer dine assets ved at:
    • Udelukker kildekort fra produktionsbuilds.
    • Komprimering eller fjernelse af store billeder og videoer.
    • At flytte binære filer til Fabric Apps lagring i stedet for at samle dem.

Komplet eksempel

En fuld rayfin.yml konfiguration med statisk hosting, autentificering og datatjenester aktiveret:

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

Test lokalt

Før du deployerer, skal du sikre dig, at din statiske build fungerer lokalt:

  1. Byg din frontend:

    npm run build

  2. Tjek at outputmappen indeholder de forventede filer:

    ls dist

  3. Server de byggede filer med en lokal statisk server:

    npx serve dist

  4. Åbn URL'en, som serveren har udskrivet, og verificér, at din applikation indlæses korrekt.

Fejlfinding af udrulningsproblemer

Statisk mappe ikke fundet

Hvis CLI rapporterer, at den statiske mappe ikke eksisterer:

  • Kontroller at stien folder ind rayfin.yml er korrekt og relativ til root (eller projektets rod, hvis root den ikke er sat).
  • Sørg for, at din build-kommando kørte succesfuldt og producerede output i den forventede mappe.

Tom statisk mappe

En tom outputmappe betyder normalt, at build-kommandoen fejlede eller ikke producerede output. Kør build-kommandoen manuelt for at tjekke for fejl:

npm run build

Udrulning overstiger størrelsesgrænsen

Hvis zip-filen overstiger 100 MB:

  • Gennemgå dit build-output for unødvendige filer (kildekort, udviklingsassets).
  • Konfigurer din bundler til at udelukke kildekort i produktionsbuilds.
  • Flyt store binære filer til Fabric Apps-lager.

Der er ikke konfigureret noget fjernendepunkt

Kommandoen npx rayfin up staticapp deploy kræver en eksisterende fjernudrulning. Kør npx rayfin up først for at konfigurere det eksterne endpoint, og brug staticapp deploy det derefter til efterfølgende opdateringer.

Relateret indhold

  • Last updated on