Staattinen sisällön isännöinti Fabric-sovelluksille

Fabric Apps sisältää staattisen sisällön isännöintipalvelun, joka rakentaa, paketoi ja palvelee frontend-sovellustasi yhdessä backend-API:n kanssa. Kun staattinen isännöinti on käytössä, komentorivi ottaa rakennetut assetit käyttöön Fabric-palveluun ja tarjoaa isännöinti-URL-osoitteen. Voit vaatia käyttäjiä kirjautumaan sisään ja antamaan luvan nähdä Fabric-sovellusta, tai voit sallia anonyymin pääsyn isännöityihin assetteihin.

Edellytykset

• Fabric Apps -projekti, jossa on frontend-sovellus (esimerkiksi React, Vue tai vanilla TypeScript).
• Build-komento, joka tuottaa staattista ulostuloa (esimerkiksi npm run build).

Miten staattinen isännöinti toimii

Kun otat käyttöön staattisen hostingin ollessa käytössä, komentokeskus suorittaa seuraavat vaiheet:

1. Suorittaa konfiguroidun build-komennon (esimerkiksi, npm run build).
2. Vahvistaa, että tuloskansio on olemassa ja sisältää tiedostoja.
3. Paketoi kaikki tiedostot pakattuun ZIP-arkistoon (enintään 100 MB).
4. Lataa arkiston Fabric Apps -isäntäpalveluun.
5. Soveltaa konfiguroidun käyttöoikeusasetuksen ja palauttaa hosting-URL-osoitteen.

Konfiguroi staattinen isännöinti

Lisää staticHosting osio tiedostoosi servicesrayfin/rayfin.yml :

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

Konfigurointivaihtoehdot

Konfiguroi pääsy isännöityihin assetteihin

Aseta assetAccess johonkin näistä arvoista:

• protected- Vaatii käyttäjiä kirjautumaan sisään ja saamaan luvan nähdä Fabric-sovellus ennen kuin he voivat hakea isännöityjä assetteja.
• public - Mahdollistaa kenen tahansa, jolla on hosting-URL, hakea isännöityjä assetteja kirjautumatta sisään.

Suojattu isännöinti hallitsee pääsyä Fabric Appsin tarjoamiin staattisiin tiedostoihin. Se ei korvaa todennuksia ja valtuuksia sovelluksessasi tai API:ssa.

Ensimmäinen interaktiivinen npx rayfin up käyttöönotto kehottaa valitsemaan käyttöoikeusasetuksen, jos assetAccess sitä ei ole konfiguroitu. Ei-interaktiiviset käyttöönotot käyttävät protected ja tallentavat tämän asetuksen .rayfin.yml

Käyttöasetuksen muuttamiseksi käyttöönoton jälkeen, päivitä assetAccess, ja suorita sitten täysi käyttöönotto:

npx rayfin up

Komento npx rayfin up staticapp deploy päivittää vain sisältöä. Se ei sovellu uutta assetAccess arvoa.

Esimerkki erillisellä frontend-hakemistolla

Jos frontend-koodisi sijaitsee alihakemistossa:

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

Tämä konfiguraatio ratkaisee lähtöpolun arvoon <project-root>/frontend/dist.

Lataa staattista sisältöä

Täysi käyttöönotto

Kun suoritat npx rayfin up, staattinen sisältö julkaistaan automaattisesti osana koko pinon käyttöönottoa:

npx rayfin up

Komentokeskus rakentaa frontendisi, pakkaa ulostulon ja lataa sen backend-konfiguraatiosi rinnalle. Käyttöönoton jälkeen CLI tulostaa hosting-URL-osoitteen ja kirjoittaa sen tiedostoosi .env.fabric-* muodossa VITE_RAYFIN_HOSTING_URL.

Itsenäinen staattinen käyttöönotto

Käytä alikomentoa staticapp deploy vain staattisen sisällön uudelleenkäyttöönottoon ilman koko käyttöönottoa uudelleen:

npx rayfin up staticapp deploy

Tämä komento on hyödyllinen, kun muutat vain frontend-koodia ja haluat nopeamman iterointisyklin.

Ohita rakennusvaihe

Jos olet jo rakentanut frontendisi ja haluat ottaa olemassa olevan tuloksen käyttöön ilman uudelleenrakentamista:

npx rayfin up staticapp deploy --skip-build

Yksityiskohtaisen kirjaamisen käyttöönotto

Näytä yksityiskohtainen tulostus käyttöönoton aikana:

npx rayfin up staticapp deploy --verbose

Tunnistautumisen takaisinsoittokonfiguraatio

Kun sekä staattinen isännöinti että todennus ovat käytössä, Rayfin CLI rekisteröi automaattisesti autentikoidun callback-URI:n hosting-URL-osoitteesi perusteella.

Esimerkiksi, jos hosting-URL-osoitteesi on https://example.webapp.com, CLI lisää tämän callback URI:n:

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

Sinun ei tarvitse konfiguroida autentikointipuhelun URI:tä manuaalisesti—komentokeskus päivittää konfiguraation ja työntää sen käyttöönoton aikana.

Käyttöönoton koon rajoitukset

• Pakattu ZIP-arkisto ei saa ylittää 100 MB:tä.
• Komentojärjestelmä käyttää maksimipakkausta lähetyskoon minimoimiseksi.
• Jos buildisi tuotto ylittää rajan, optimoi assetteja seuraavasti:
  • Lähdekarttojen poissulkeminen tuotantoversioista.
  • Suurten kuvien ja videoiden pakkaaminen tai poistaminen.
  • Binääritiedostojen siirtäminen Fabric Apps -tallennustilaan niiden niputtamisen sijaan.

Täydellinen esimerkki

Täysi rayfin.yml konfiguraatio, jossa on staattinen hosting, todennus ja datapalvelut käytössä:

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

Testaa paikallisesti

Ennen käyttöönottoa varmista, että staattinen versio toimii paikallisesti:

1. Rakenna frontendisi:

   npm run build
   

2. Tarkista, että tuloskansio sisältää odotetut tiedostot:

   ls dist
   

3. Palvele rakennetut tiedostot paikallisella staattisella palvelimella:

   npx serve dist
   

4. Avaa palvelimen tulostama URL-osoite ja varmista, että sovelluksesi latautuu oikein.

Vianetsintä käyttöönoton ongelmista

Staattinen kansio ei löydy

Jos komentokeskus ilmoittaa, ettei staattista kansiota ole olemassa:

• Varmista, että folder polku on rayfin.yml oikea ja suhteellinen root (tai projektin juuri, jos root sitä ei ole asetettu).
• Varmista, että build-komentosi suoritti onnistuneesti ja tuotti tulosta odotetusta hakemistosta.

Tyhjä staattinen kansio

Tyhjä ulostulokansio tarkoittaa yleensä, että build-komento epäonnistui tai ei tuottanut tulosta. Suorita build-komento manuaalisesti tarkistaaksesi virheet:

npm run build

Käyttöönotto ylittää kokorajan

Jos ZIP ylittää 100 MB:

• Tarkista build-tuloksesi tarpeettomien tiedostojen varalta (lähdekartat, kehitysassetit).
• Määritä bundler-ohjelmasi sulkemaan lähdekartat pois tuotantoversioissa.
• Siirrä suuret binääritiedostot Fabric Apps -tallennustilaan.

Etäpäätepisteitä ei ole määritetty

Komento npx rayfin up staticapp deploy vaatii olemassa olevan etäkäyttöönoton. Suorita npx rayfin up ensin etäpäätepisteen konfigurointi ja käytä staticapp deploy sitä myöhemmissä päivityksissä.

Liittyvä sisältö

• Deploy Fabric
• Todentamisen määrittäminen
• Luo ensimmäinen projektisi