Fabric Uygulamaları için statik içerik barındırma

Fabric Apps, ön uç uygulamanızı arka uç API'lerinizle birlikte derleyen, paketleyen ve sunan statik bir içerik barındırma hizmeti içerir. Statik barındırma etkinleştirildiğinde CLI, yerleşik varlıklarınızı Fabric dağıtır ve kullanıcıların uygulamanıza erişebileceği genel bir URL sağlar.

Prerequisites

  • Ön uç uygulamasına sahip bir Fabric Apps projesi (örneğin, React, Vue veya vanilya TypeScript).
  • Statik çıkış üreten bir derleme komutu (örneğin, npm run build).

Statik barındırma nasıl çalışır?

Statik barındırma etkin olarak dağıttığınızda, CLI şu adımları gerçekleştirir:

  1. Yapılandırılan derleme komutunuzu çalıştırır (örneğin, npm run build).
  2. Çıkış klasörünün mevcut olduğunu ve dosya içerdiğini doğrular.
  3. Tüm dosyaları sıkıştırılmış zip arşivine paketler (en fazla 100 MB).
  4. Arşivi Fabric Uygulamaları konağına yükler.
  5. Uygulamanızın erişilebilir olduğu bir genel barındırma URL'si döndürür.

Statik barındırmayı yapılandırma

rayfin/rayfin.yml dosyanızda, services altına staticHosting bölümü ekleyin:

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

Yapılandırma seçenekleri

Seçenek Zorunlu Varsayılan Açıklama
enabled Evet — Statik barındırmayı etkinleştirmek için true olarak ayarlayın.
folder Evet — root öğesine göre, oluşturulmuş statik dosyaları içeren çıkış klasörü.
root Hayır Proje kökü Ön uç projesinin kök dizini, proje köküne göre.
buildCommand Hayır — Paketlemeden önce çalıştırılacak kabuk komutu (örneğin, npm run build).
indexDocument Hayır — Dizin istekleri için kullanılacak varsayılan belge (örneğin, index.html).

Ayrı bir ön uç dizini olan örnek

Ön uç kodunuz bir alt dizinde yaşıyorsa:

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

Bu yapılandırma, çıkış yolunu <project-root>/frontend/dist olarak belirler.

Statik içerik dağıtma

Tam dağıtım

çalıştırdığınızda npx rayfin up, statik içerik tam yığın dağıtımının bir parçası olarak otomatik olarak dağıtılır:

npx rayfin up

CLI frontend’inizi oluşturur, çıktıyı paketler ve arka uç yapılandırmanızla birlikte yükler. Dağıtımdan sonra CLI, barındırma URL'sini yazdırır ve bunu .env.fabric-* dosyanıza VITE_RAYFIN_HOSTING_URL olarak yazar.

Bağımsız statik dağıtım

staticapp deploy Tam dağıtımı yeniden çalıştırmadan yalnızca statik içeriğinizi yeniden dağıtmak için alt komutu kullanın:

npx rayfin up staticapp deploy

Bu komut, yalnızca ön uç kodunu değiştirdiğinizde ve daha hızlı bir yineleme döngüsü istediğinizde kullanışlıdır.

Derleme adımını atla

Ön yüzünüzü zaten derlediyseniz ve mevcut derleme çıktısını yeniden derlemeden dağıtıma almak istiyorsanız:

npx rayfin up staticapp deploy --skip-build

Ayrıntılı günlük kaydını etkinleştir

Dağıtım sırasında ayrıntılı çıktıyı göster:

npx rayfin up staticapp deploy --verbose

Kimlik doğrulama geri çağırma yapılandırması

Hem statik barındırma hem de kimlik doğrulaması etkinleştirildiğinde, Rayfin CLI barındırma URL'nize göre otomatik olarak bir kimlik doğrulama geri çağırma URI'si kaydeder.

Örneğin barındırma URL'niz ise https://example.webapp.comCLI bu geri çağırma URI'sini ekler:

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

Kimlik doğrulama geri çağırma URI'sini el ile yapılandırmanız gerekmez; CLI yapılandırmayı güncelleştirir ve dağıtım sırasında bunu iletir.

Dağıtım boyutu sınırları

  • Sıkıştırılmış ZIP arşivi 100 MB'ı aşmamalıdır.
  • CLI, yükleme boyutunu en aza indirmek için maksimum sıkıştırma kullanır.
  • Derleme çıktınız sınırı aşarsa, öğelerinizi şu şekilde optimize edin:
    • Kaynak haritalarını üretim derlemelerinden hariç tutma.
    • Büyük resimleri ve videoları sıkıştırma veya kaldırma.
    • İkili dosyaları paketlemek yerine Fabric Apps depolama alanına taşıma.

Tam örnek

Statik barındırma, kimlik doğrulaması ve veri hizmetlerinin etkinleştirildiği tam rayfin.yml yapılandırma:

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

Yerel olarak test et

Dağıtmadan önce statik derlemenizin yerel olarak çalıştığını doğrulayın:

  1. Ön ucunuzu oluşturun:

    npm run build

  2. Çıktı klasörünün beklenen dosyaları içerdiğini denetleyin:

    ls dist

  3. Derlenen dosyaları yerel bir statik sunucuyla sunun:

    npx serve dist

  4. Sunucu tarafından yazdırılan URL'yi açın ve uygulamanızın doğru yüklendiğini doğrulayın.

Dağıtım sorunlarını giderme

Statik klasör bulunamadı

CLI statik klasörün mevcut olmadığını bildirirse:

  • rayfin.yml içindeki folder yolunun doğru olduğunu ve root dizinine göreli olduğunu doğrulayın (root ayarlanmamışsa projenin kök dizinine göre).
  • Derleme komutunun başarıyla çalıştığından ve beklenen dizinde çıktı oluşturduğundan emin olun.

Boş statik klasör

Boş bir çıkış klasörü genellikle derleme komutunun başarısız olduğu veya çıkış üretmediğini gösterir. Hataları denetlemek için derleme komutunu el ile çalıştırın:

npm run build

Dağıtım boyut sınırını aşıyor

ZIP 100 MB'ı aşarsa:

  • Gereksiz dosyalar (kaynak haritalar, geliştirme varlıkları) için derleme çıkışınızı gözden geçirin.
  • Paketleyicinizi, üretim derlemelerinde kaynak haritalarını hariç tutacak şekilde yapılandırın.
  • Büyük ikili dosyaları Fabric Apps depolama alanına taşıyın.

Hiçbir uzak uç nokta yapılandırılmadı

npx rayfin up staticapp deploy komutu, mevcut bir uzak dağıtım gerektirir. Uzak uç noktayı yapılandırmak için önce komutunu çalıştırın npx rayfin up , ardından sonraki güncelleştirmeler için kullanın staticapp deploy .

İlgili içerik

  • Last updated on