Hébergement de contenu statique pour les applications Fabric

Fabric Apps inclut un service d’hébergement de contenu statique qui génère, packages et sert votre application frontale en même temps que vos API back-end. Lorsque l’hébergement statique est activé, la CLI déploie vos assets intégrés sur Fabric et fournit une URL d’hébergement. Vous pouvez exiger que les utilisateurs se connectent et obtiennent la permission de consulter l’application Fabric, ou vous pouvez autoriser un accès anonyme aux ressources hébergées.

Prerequisites

Un projet Fabric Apps avec une application frontale (par exemple, React, Vue ou Vanille TypeScript).
Commande de build qui produit une sortie statique (par exemple, npm run build).

Fonctionnement de l’hébergement statique

Lorsque vous déployez avec l’hébergement statique activé, l’interface CLI effectue les étapes suivantes :

Exécute votre commande de build configurée (par exemple, npm run build).
Vérifie que le dossier de sortie existe et contient des fichiers.
Empaquet tous les fichiers dans une archive ZIP compressée (maximum 100 Mo).
Charge l’archive sur l’hôte Fabric Apps.
Applique le paramètre d’accès configuré et renvoie une URL d’hébergement.

Configurer l’hébergement statique

Ajoutez une section staticHosting sous services dans votre fichier rayfin/rayfin.yml :

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

Options de configuration

Option	Obligatoire	Par défaut	Description
`enabled`	Oui	—	Définissez sur `true` pour activer l’hébergement statique.
`folder`	Oui	—	Dossier de sortie contenant les fichiers statiques générés, par rapport à `root`.
`root`	Non	Racine du projet	Répertoire racine du projet frontend, par rapport à la racine du projet.
`buildCommand`	Non	—	Commande Shell à exécuter avant l’empaquetage (par exemple, `npm run build`).
`indexDocument`	Non	—	Document par défaut à traiter pour les demandes d’annuaire (par exemple, `index.html`).
`assetAccess`	Non	`protected` pour les déploiements non interactifs	Contrôle l’accès aux ressources hébergées. Utiliser `protected` pour exiger une connexion et une autorisation pour accéder à l’application Fabric, ou pour `public` permettre un accès anonyme.

Configurer l’accès aux ressources hébergées

Définissez assetAccess sur l’une des valeurs suivantes :

protected- Exige que les utilisateurs se connectent et obtiennent la permission de consulter l’application Fabric avant de pouvoir récupérer les ressources hébergées.
public - Permet à toute personne disposant de l’URL d’hébergement de récupérer les ressources hébergées sans se connecter.

L’hébergement protégé contrôle l’accès aux fichiers statiques que sert Fabric Apps. Cela ne remplace pas l’authentification et l’autorisation dans votre application ou vos API.

Le premier déploiement interactif npx rayfin up vous invite à choisir un paramètre d’accès si assetAccess n’est pas configuré. Les déploiements non interactifs utilisent protected et enregistrent ce paramètre dans rayfin.yml.

Pour modifier le paramètre d’accès après le déploiement, mettez à jour assetAccess, puis exécutez un déploiement complet :

npx rayfin up

La npx rayfin up staticapp deploy commande ne met à jour que le contenu. Il n’applique pas de nouvelle assetAccess valeur.

Exemple avec un répertoire frontal distinct

Si votre code front-end se trouve dans un sous-répertoire :

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

Cette configuration résout le chemin de sortie vers <project-root>/frontend/dist.

Déployer du contenu statique

Déploiement complet

Lorsque vous exécutez npx rayfin up, le contenu statique se déploie automatiquement dans le cadre du déploiement de la pile complète :

npx rayfin up

L’interface CLI génère votre front-end, empaquette la sortie et la charge en même temps que votre configuration back-end. Après le déploiement, l’interface CLI imprime l’URL d’hébergement et l’écrit dans votre .env.fabric-* fichier en tant que VITE_RAYFIN_HOSTING_URL.

Déploiement statique autonome

Utilisez la staticapp deploy sous-commande pour redéployer uniquement votre contenu statique sans réexécuter le déploiement complet :

npx rayfin up staticapp deploy

Cette commande est utile lorsque vous avez uniquement modifié le code frontal et que vous souhaitez un cycle d’itération plus rapide.

Ignorer l’étape de génération

Si vous avez déjà créé votre front-end et que vous souhaitez déployer la sortie existante sans regénérer :

npx rayfin up staticapp deploy --skip-build

Activez la journalisation commentée

Afficher une sortie détaillée pendant le déploiement :

npx rayfin up staticapp deploy --verbose

Configuration du rappel d’authentification

Lorsque l’hébergement statique et l’authentification sont activés, l’interface CLI Rayfin inscrit automatiquement un URI de rappel d’authentification basé sur votre URL d’hébergement.

Par exemple, si votre URL d’hébergement est https://example.webapp.com, l’interface CLI ajoute cet URI de rappel :

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

Vous n’avez pas besoin de configurer manuellement l’URI de rappel d’authentification : l’interface CLI met à jour la configuration et l’envoie (push) pendant le déploiement.

Limites de taille de déploiement

L’archive ZIP compressée ne doit pas dépasser 100 Mo.
L’interface CLI utilise la compression maximale pour réduire la taille du chargement.
Si votre sortie de build dépasse la limite, optimisez vos ressources en :
- Exclusion des source maps des versions de production.
- Compression ou suppression d’images et de vidéos volumineuses.
- Déplacement des fichiers binaires vers l’espace de stockage de Fabric Apps au lieu de les inclure dans le package.

Exemple complet

Configuration complète rayfin.yml avec hébergement statique, authentification et services de données activés :

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

Tester localement

Avant de déployer, vérifiez que votre build statique fonctionne localement :

Créez votre interface utilisateur :
```
npm run build
```
Vérifiez que le dossier de sortie contient les fichiers attendus :
```
ls dist
```
Servez les fichiers générés avec un serveur statique local :
```
npx serve dist
```
Ouvrez l’URL imprimée par le serveur et vérifiez que votre application se charge correctement.

Résoudre les problèmes de déploiement

Dossier statique introuvable

Si l’interface CLI signale que le dossier statique n’existe pas :

Vérifiez que le chemin folder dans rayfin.yml est correct et relatif à root (ou à la racine du projet si root n’est pas défini).
Vérifiez que votre commande de build s’est exécutée avec succès et produit la sortie dans le répertoire attendu.

Dossier statique vide

Un dossier de sortie vide signifie généralement que la commande de build a échoué ou n’a pas produit de sortie. Exécutez la commande de build manuellement pour rechercher les erreurs :

npm run build

Le déploiement dépasse la limite de taille

Si le fichier ZIP dépasse 100 Mo :

Passez en revue votre sortie de build pour les fichiers inutiles (cartes sources, ressources de développement).
Configurez votre bundler pour exclure les cartes sources dans les builds de production.
Déplacez les fichiers binaires volumineux vers le stockage Fabric Apps.

Aucun point de terminaison distant n’est configuré

La commande npx rayfin up staticapp deploy nécessite un déploiement distant existant. Exécutez npx rayfin up d’abord pour configurer le point de terminaison distant, puis utilisez-le staticapp deploy pour les mises à jour suivantes.

Commentaires

Cette page a-t-elle été utile ?

Dernière mise à jour : 2026-09-29