Statische inhoud hosten voor Fabric-apps

Fabric Apps bevat een service voor het hosten van statische inhoud die uw front-endtoepassing samen met uw back-end-API's bouwt, verpakt en verwerkt. Wanneer statisch hosten is ingeschakeld, deployt de CLI je gebouwde assets naar Fabric en levert een hosting-URL. Je kunt van gebruikers eisen dat ze inloggen en toestemming hebben om de Fabric-app te bekijken, of je kunt anonieme toegang geven tot de gehoste assets.

Prerequisites

Een Fabric Apps-project met een front-endtoepassing (bijvoorbeeld React, Vue of vanille TypeScript).
Een buildopdracht die statische uitvoer produceert (bijvoorbeeld npm run build).

Hoe statische hosting werkt

Wanneer u implementeert met statische hosting ingeschakeld, voert de CLI de volgende stappen uit:

Hiermee wordt de geconfigureerde buildopdracht uitgevoerd (bijvoorbeeld npm run build).
Valideert of de uitvoermap bestaat en bestanden bevat.
Alle bestanden worden verpakt in een gecomprimeerd ZIP-archief (maximaal 100 MB).
Uploadt het archief naar de Fabric Apps-host.
Past de geconfigureerde toegangsinstelling toe en geeft een hosting-URL terug.

Statische webhosting configureren

Voeg een staticHosting sectie toe onder services in uw rayfin/rayfin.yml bestand:

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

Configuratieopties

Option	Required	Verstek	Beschrijving
`enabled`	Ja	—	Stel in op `true` om statische hosting in te schakelen.
`folder`	Ja	—	Uitvoermap met ingebouwde statische bestanden ten opzichte van `root`.
`root`	No	hoofdmap van Project	Rootmap van het frontendproject, relatief aan de rootmap van het project.
`buildCommand`	No	—	Shell-opdracht die moet worden uitgevoerd voordat ze worden verpakt (bijvoorbeeld `npm run build`).
`indexDocument`	No	—	Standaarddocument voor adreslijstaanvragen (bijvoorbeeld `index.html`).
`assetAccess`	No	`protected` voor niet-interactieve implementaties	Beheert de toegang tot gehoste assets. Gebruik `protected` om inloggen en toestemming te vereisen om de Fabric-app te bekijken, of gebruik `public` om anonieme toegang toe te staan.

Configureer toegang tot gehoste assets

Stel assetAccess in op een van deze waarden:

protected- Vereist dat gebruikers inloggen en toestemming hebben om de Fabric-app te bekijken voordat ze gehoste assets kunnen ophalen.
public - Stelt iedereen met de hosting-URL in staat om gehoste assets op te halen zonder in te loggen.

Protected hosting beheert de toegang tot de statische bestanden die Fabric Apps serveert. Het vervangt authenticatie en autorisatie in je applicatie of API's niet.

Bij de eerste interactieve npx rayfin up implementatie wordt je gevraagd een toegangsinstelling te kiezen als assetAccess niet is geconfigureerd. Niet-interactieve implementaties gebruiken protected en slaan die instelling op in rayfin.yml.

Om de toegangsinstelling na de uitrol te wijzigen, update assetAccess, en voer vervolgens een volledige uitrol uit:

npx rayfin up

Het npx rayfin up staticapp deploy commando werkt alleen de inhoud bij. Het past geen nieuwe assetAccess waarde toe.

Voorbeeld met een afzonderlijke frontendmap

Als uw front-endcode zich in een submap bevindt:

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

Met deze configuratie wordt het uitvoerpad omgezet in <project-root>/frontend/dist.

Statische inhoud implementeren

Volledige implementatie

Wanneer u uitvoert npx rayfin up, wordt statische inhoud automatisch geïmplementeerd als onderdeel van de volledige stack-implementatie:

npx rayfin up

De CLI bouwt uw front-end, verpakt de uitvoer en uploadt deze naast uw back-endconfiguratie. Na de implementatie drukt de CLI de hosting-URL af en schrijft deze naar uw .env.fabric-* bestand als VITE_RAYFIN_HOSTING_URL.

Zelfstandige statische implementatie

Gebruik de staticapp deploy subopdracht om alleen uw statische inhoud opnieuw te implementeren zonder de volledige implementatie opnieuw uit te voeren:

npx rayfin up staticapp deploy

Deze opdracht is handig wanneer u alleen de front-endcode hebt gewijzigd en een snellere iteratiecyclus wilt uitvoeren.

De buildstap overslaan

Als u uw front-end al hebt gemaakt en de bestaande uitvoer wilt implementeren zonder opnieuw te bouwen:

npx rayfin up staticapp deploy --skip-build

Uitgebreide logboekregistratie inschakelen

Gedetailleerde uitvoer weergeven tijdens de implementatie:

npx rayfin up staticapp deploy --verbose

Configuratie van verificatieaanroep

Wanneer zowel statische hosting als verificatie zijn ingeschakeld, registreert de Rayfin CLI automatisch een callback-URI voor verificatie op basis van uw hosting-URL.

Als uw hosting-URL bijvoorbeeld is https://example.webapp.com, voegt de CLI deze callback-URI toe:

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

U hoeft de callback-URI voor verificatie niet handmatig te configureren. De CLI werkt de configuratie bij en pusht deze tijdens de implementatie.

Limieten voor implementatiegrootte

Het gecomprimeerde ZIP-archief mag niet groter zijn dan 100 MB.
De CLI gebruikt maximale compressie om de uploadgrootte te minimaliseren.
Als uw buildoutput de limiet overschrijdt, kunt u uw middelen als volgt optimaliseren:
- Brontoewijzingen uitsluiten van productieversies.
- Grote afbeeldingen en video's comprimeren of verwijderen.
- Binaire bestanden verplaatsen naar Fabric Apps-opslag in plaats van ze te bundelen.

Volledig voorbeeld

Een volledige rayfin.yml configuratie met statische hosting, verificatie en gegevensservices ingeschakeld:

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

Lokaal testen

Voordat u implementeert, controleert u of uw statische build lokaal werkt:

Bouw uw front-end:
```
npm run build
```
Controleer of de uitvoermap de verwachte bestanden bevat:
```
ls dist
```
Serveer de ingebouwde bestanden met een lokale statische server:
```
npx serve dist
```
Open de URL die door de server wordt afgedrukt en controleer of de toepassing correct wordt geladen.

Implementatieproblemen oplossen

Statische map niet gevonden

Als de CLI rapporteert dat de statische map niet bestaat:

Controleer of het pad folder in rayfin.yml correct is en relatief ten opzichte van root (of ten opzichte van de projecthoofdmap als root niet is ingesteld).
Zorg ervoor dat de buildopdracht correct is uitgevoerd en uitvoer heeft geproduceerd in de verwachte map.

Lege map voor statische bestanden

Een lege uitvoermap betekent meestal dat de buildopdracht is mislukt of dat de uitvoer niet is geproduceerd. Voer de buildopdracht handmatig uit om te controleren op fouten:

npm run build

Implementatie overschrijdt de groottelimiet

Als de ZIP groter is dan 100 MB:

Controleer de uitvoer van uw build op onnodige bestanden (bronkaarten, ontwikkelassets).
Configureer je bundler om source maps uit te sluiten in productiebuilds.
Verplaats grote binaire bestanden naar Fabric Apps-opslag.

Er is geen extern eindpunt geconfigureerd

Voor de npx rayfin up staticapp deploy opdracht is een bestaande externe implementatie vereist. Voer npx rayfin up eerst uit om het externe eindpunt te configureren en gebruik staticapp deploy vervolgens voor volgende updates.

Feedback

Is deze pagina nuttig?

Laatst bijgewerkt om 2026-09-29