Statisk innholdshosting for Fabric-apper

Fabric Apps inkluderer en statisk innholdshostingtjeneste som bygger, pakker og betjener frontend-applikasjonen din sammen med backend-API-ene dine. Når statisk hosting er aktivert, distribuerer CLI-en dine bygde ressurser til Fabric og gir en hosting-URL. Du kan kreve at brukere logger inn og har tillatelse til å se Fabric-appen, eller du kan gi anonym tilgang til de hostede ressursene.

Forutsetninger

  • Et Fabric Apps-prosjekt med en frontend-applikasjon (for eksempel React, Vue eller vanilla TypeScript).
  • En byggekommando som produserer statisk utdata (for eksempel npm run build).

Hvordan statisk hosting fungerer

Når du deployerer med statisk hosting aktivert, utfører CLI-en disse stegene:

  1. Kjører din konfigurerte build-kommando (for eksempel, npm run build).
  2. Validerer at utdatamappen eksisterer og inneholder filer.
  3. Pakker alle filer inn i et komprimert ZIP-arkiv (maksimalt 100 MB).
  4. Laster opp arkivet til Fabric Apps-verten.
  5. Bruker den konfigurerte tilgangsinnstillingen og returnerer en hosting-URL.

Konfigurer statisk hosting

Legg til en staticHosting seksjon under services i filen din rayfin/rayfin.yml :

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

Alternativer for konfigurasjon

Alternativ Påkrevd Forhåndsinnstilt Beskrivelse
enabled Ja — Sett til for true å aktivere statisk hosting.
folder Ja — Utdatamappe som inneholder lagrede statiske filer, relativt til root.
root Nei Project root Rotmappen til frontend-prosjektet, relativt til prosjektroten.
buildCommand Nei — Shell-kommandoen skal kjøres før pakking (for eksempel, npm run build).
indexDocument Nei — Standarddokument for katalogforespørsler (for eksempel index.html).
assetAccess Nei protected for ikke-interaktive distribusjoner Kontrollerer tilgangen til hostede ressurser. Bruk protected for å kreve innlogging og tillatelse for å se Fabric-appen, eller bruk public for å tillate anonym tilgang.

Konfigurer tilgang til hostede ressurser

Sett assetAccess til en av disse verdiene:

  • protected- Krever at brukere logger inn og har tillatelse til å se Fabric-appen før de kan hente hostede ressurser.
  • public - Lar hvem som helst med hosting-URL-en hente hostede ressurser uten å logge inn.

Beskyttet hosting kontrollerer tilgangen til de statiske filene som Fabric Apps serverer. Det erstatter ikke autentisering og autorisasjon i applikasjonen eller API-ene dine.

Den første interaktive npx rayfin up distribusjonen ber deg velge en tilgangsinnstilling hvis assetAccess den ikke er konfigurert. Ikke-interaktive distribusjoner bruker protected og lagrer den innstillingen til rayfin.yml.

For å endre tilgangsinnstillingen etter utrulling, oppdater assetAccess, og kjør deretter en full utrulling:

npx rayfin up

Kommandoen oppdaterer npx rayfin up staticapp deploy kun innholdet. Den pålegger ikke en ny assetAccess verdi.

Eksempel med en separat frontend-mappe

Hvis frontend-koden din ligger i en undermappe:

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

Denne konfigurasjonen løser utgangsbanen til <project-root>/frontend/dist.

Distribuer statisk innhold

Full distribusjon

Når du kjører npx rayfin up, distribueres statisk innhold automatisk som en del av fullstack-distribusjonen:

npx rayfin up

CLI-en bygger frontend-en din, pakker outputen og laster den opp sammen med backend-konfigurasjonen din. Etter utrulling skriver CLI-en ut hosting-URL-en og skriver den til filen din .env.fabric-* som VITE_RAYFIN_HOSTING_URL.

Frittstående statisk utrulling

Bruk underkommandoen staticapp deploy for å redeploye kun ditt statiske innhold uten å kjøre hele deployen på nytt:

npx rayfin up staticapp deploy

Denne kommandoen er nyttig når du bare endret frontend-koden og ønsker en raskere iterasjonssyklus.

Hopp over byggesteget

Hvis du allerede har bygget frontenden din og vil distribuere eksisterende output uten å bygge opp igjen:

npx rayfin up staticapp deploy --skip-build

Aktiver detaljert logging

Vis detaljerte resultater under utplassering:

npx rayfin up staticapp deploy --verbose

Konfigurasjon av autentiseringscallback

Når både statisk hosting og autentisering er aktivert, registrerer Rayfin CLI automatisk en autentiserings-callback-URI basert på din hosting-URL.

For eksempel, hvis hosting-URL-en din er https://example.webapp.com, legger CLI-en til denne callback-URI:

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

Du trenger ikke å konfigurere autentiserings-callback-URI-en manuelt—CLI-en oppdaterer konfigurasjonen og sender den under distribusjon.

Begrensninger for utrullingsstørrelse

  • Det komprimerte ZIP-arkivet må ikke overstige 100 MB.
  • CLI-en bruker maksimal komprimering for å minimere opplastingsstørrelsen.
  • Hvis byggeresultatet ditt overstiger grensen, optimaliser ressursene dine ved å:
    • Å ekskludere kildekart fra produksjonsbygg.
    • Komprimering eller fjerning av store bilder og videoer.
    • Flytte binære filer til Fabric Apps-lagring i stedet for å pakke dem sammen.

Fullstendig eksempel

En full rayfin.yml konfigurasjon med statisk hosting, autentisering og datatjenester aktivert:

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
    assetAccess: protected

Test lokalt

Før du deployerer, sjekk at din statiske build fungerer lokalt:

  1. Bygg din frontend:

    npm run build

  2. Sjekk at utdatamappen inneholder de forventede filene:

    ls dist

  3. Server de lagrede filene med en lokal statisk server:

    npx serve dist

  4. Åpne URL-en som serveren skriver ut og sjekk at applikasjonen din lastes riktig.

Feilsøking av utrullingsproblemer

Statisk mappe ikke funnet

Hvis CLI rapporterer at den statiske mappen ikke eksisterer:

  • Sjekk at stien folder inn rayfin.yml er korrekt og relativ til root (eller prosjektroten hvis root ikke er satt).
  • Sørg for at build-kommandoen din kjørte vellykket og produserte output i forventet katalog.

Tom statisk mappe

En tom utdatamappe betyr vanligvis at byggekommandoen feilet eller ikke produserte utdata. Kjør build-kommandoen manuelt for å sjekke for feil:

npm run build

Utplassering overstiger størrelsesgrensen

Hvis postnummeret overstiger 100 MB:

  • Gå gjennom byggeutdataene dine for unødvendige filer (kildekart, utviklingsressurser).
  • Konfigurer bundleren din til å ekskludere kildekart i produksjonsbygg.
  • Flytt store binære filer til Fabric Apps-lagring.

Ingen ekstern endepunkt er konfigurert

Kommandoen npx rayfin up staticapp deploy krever en eksisterende fjernutplassering. Kjør npx rayfin up først for å konfigurere det eksterne endepunktet, og bruk staticapp deploy deretter for påfølgende oppdateringer.

Relatert innhold

  • Sist oppdatert