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ä, komentokeskus ottaa käyttöön rakennetut assetit Fabric-palveluun ja tarjoaa julkisen URL-osoitteen, josta käyttäjät voivat käyttää sovellustasi.

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. Palauttaa julkisen hosting-URL-osoitteen, jossa sovelluksesi on käytettävissä.

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

Konfigurointivaihtoehdot

Vaihtoehto Pakollinen Oletus Description
enabled Yes — Asetettu tilaan true staattisen hostingin mahdollistamiseksi.
folder Yes — Tulostuskansio, joka sisältää rakennettuja staattisia tiedostoja suhteessa .root
root Ei Project root Frontend-projektin juurihakemisto suhteessa projektin juureen.
buildCommand Ei — Shell-komento ajaa ennen pakkausta (esim. npm run build).
indexDocument Ei — Oletusasiakirja, joka palvelee hakemistopyyntöjä varten (esim. index.html).

Esimerkki erillisellä frontend-hakemistolla

Jos frontend-koodisi sijaitsee alihakemistossa:

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

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

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ö

  • Last updated on