Hospedaje de contenido estático para aplicaciones de Fabric

Fabric Apps incluye un servicio de hospedaje de contenido estático que compila, empaqueta y sirve la aplicación de front-end junto con las API de back-end. Cuando el hospedaje estático está habilitado, la CLI implementa los recursos creados en Fabric y proporciona una dirección URL pública donde los usuarios pueden acceder a la aplicación.

Prerequisites

Un proyecto de Fabric Apps con una aplicación de front-end (por ejemplo, React, Vue o Vanilla TypeScript).
Comando de compilación que genera una salida estática (por ejemplo, npm run build).

Funcionamiento del hospedaje estático

Al implementar con el hospedaje estático habilitado, la CLI realiza estos pasos:

Ejecuta el comando de compilación configurado (por ejemplo, npm run build).
Valida que la carpeta de salida existe y contiene archivos.
Empaqueta todos los archivos en un archivo ZIP comprimido (máximo de 100 MB).
Carga el archivo en el host de Fabric Apps.
Devuelve una dirección URL de hospedaje pública donde se puede acceder a la aplicación.

Configuración del hospedaje estático

Añada una sección staticHosting debajo de services en su archivo rayfin/rayfin.yml:

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

Opciones de configuración

Opción	Obligatorio	Predeterminado	Descripción
`enabled`	Sí	—	Establézcalo en `true` para habilitar el hospedaje estático.
`folder`	Sí	—	Carpeta de salida que contiene los archivos estáticos generados, relativa a `root`.
`root`	No	raíz del proyecto	Directorio raíz del proyecto de front-end, en relación con la raíz del proyecto.
`buildCommand`	No	—	Comando shell que se ejecutará antes del empaquetado (por ejemplo, `npm run build`).
`indexDocument`	No	—	Documento predeterminado para atender solicitudes de directorio (por ejemplo, `index.html`).

Ejemplo con un directorio de front-end independiente

Si el código de front-end reside en un subdirectorio:

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

Esta configuración convierte la ruta de salida en <project-root>/frontend/dist.

Implementación de contenido estático

Implementación completa

Al ejecutar npx rayfin up, el contenido estático se implementa automáticamente como parte de la implementación de pila completa:

npx rayfin up

La CLI compila el front-end, empaqueta la salida y la carga junto con la configuración de back-end. Después de la implementación, la CLI imprime la dirección URL de hospedaje y la escribe en el .env.fabric-* archivo como VITE_RAYFIN_HOSTING_URL.

Implementación estática independiente

Use el staticapp deploy subcomando para volver a implementar el contenido estático sin volver a ejecutar la implementación completa:

npx rayfin up staticapp deploy

Este comando es útil cuando solo se cambia el código de front-end y se desea un ciclo de iteración más rápido.

Omitir el paso de compilación

Si ya ha creado el front-end y desea implementar la salida existente sin volver a generar:

npx rayfin up staticapp deploy --skip-build

Habilitación del registro detallado

Mostrar la salida detallada durante la implementación:

npx rayfin up staticapp deploy --verbose

Configuración de devolución de llamada de autenticación

Cuando están habilitados tanto el alojamiento estático como la autenticación, la CLI de Rayfin registra automáticamente un URI de callback de autenticación a partir de la URL de alojamiento.

Por ejemplo, si la URL de alojamiento es https://example.webapp.com, la CLI añade este URI de devolución de llamada:

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

No es necesario configurar manualmente el URI de devolución de llamada de autenticación: la CLI actualiza la configuración y la envía durante la implementación.

Límites de tamaño de implementación

El archivo ZIP comprimido no debe superar los 100 MB.
La CLI usa la compresión máxima para minimizar el tamaño de carga.
Si la salida de compilación supera el límite, optimice los recursos mediante:
- Excluir los mapas de origen de las compilaciones de producción.
- Compresión o eliminación de imágenes y vídeos grandes.
- Mover archivos binarios al almacenamiento de Fabric Apps en lugar de agruparlos.

Ejemplo completo

Una configuración completa rayfin.yml con el hospedaje estático, la autenticación y los servicios de datos habilitados:

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

Realiza una prueba local

Antes de la implementación, compruebe que la compilación estática funciona localmente:

Compile el front-end:
```
npm run build
```
Compruebe que la carpeta de salida contiene los archivos esperados:
```
ls dist
```
Sirva los archivos generados con un servidor estático local:
```
npx serve dist
```
Abra la dirección URL impresa por el servidor y compruebe que la aplicación se carga correctamente.

Solución de problemas de implementación

No se encontró la carpeta estática

Si la CLI informa de que la carpeta estática no existe:

Compruebe que la ruta de acceso folder en rayfin.yml es correcta y relativa a root (o a la raíz del proyecto si no se ha establecido root).
Asegúrese de que el comando de compilación se ejecutó correctamente y generó la salida en el directorio esperado.

Carpeta estática vacía

Normalmente, una carpeta de salida vacía significa que se produjo un error en el comando de compilación o no se produjo la salida. Ejecute el comando de compilación manualmente para comprobar si hay errores:

npm run build

La implementación supera el límite de tamaño

Si el archivo ZIP supera los 100 MB:

Revise la salida de la compilación en busca de archivos innecesarios (mapas de código fuente, recursos de desarrollo).
Configura el empaquetador para excluir los source maps en las compilaciones de producción.
Mueva archivos binarios grandes a Fabric Apps Storage.

No hay ningún punto de conexión remoto configurado

El npx rayfin up staticapp deploy comando requiere una implementación remota existente. Ejecute npx rayfin up primero para configurar el punto de conexión remoto y, a continuación, use staticapp deploy para las actualizaciones posteriores.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2026-06-02