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é, l’interface CLI déploie vos ressources intégrées sur Fabric et fournit une URL publique où les utilisateurs peuvent accéder à votre application.

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.
Retourne une URL d’hébergement publique où votre application est accessible.

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

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`).

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

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

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 ?

Last updated on 2026-06-02