Arquitectura de despliegue
Flujo completo desde el código fuente hasta el usuario final
Local
Código React
→
Build
vite build
→
Deploy
firebase deploy
→
CDN
Edge Global
→
Usuario
Cooperativa
1
Instalar Firebase CLI
Herramienta de línea de comandos para gestionar proyectos Firebase desde local.
2
Inicializar el proyecto
Ejecutar firebase init hosting para generar la configuración base.
3
Personalizar firebase.json
Configurar rewrites para la SPA React y la función API de AgroFlow.
4
Deploy y preview
Desplegar a producción o a canales de preview para QA del equipo.
Prerrequisitos
Instalar dependencias antes de comenzar
# 1. Verificar Node.js ≥ 18
$ node --version
v20.11.0
# 2. Instalar Firebase CLI (sin instalación global gracias a npx)
$ npx -y firebase-tools@latest --version
13.7.4
# 3. Autenticarse con Google
$ npx firebase-tools@latest login
✔ Success! Logged in as dev@agroflow.es
# 4. Inicializar Hosting en el proyecto
$ npx firebase-tools@latest init hosting
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔ Wrote firebase.json
Configuración:
firebase.jsonConfiguración completa para AgroFlow SPA + Cloud Function API
Contexto AgroFlow: La app React usa React Router v6, por lo que todas las rutas deben servir
index.html. Las llamadas a /api/** se redirigen a la Cloud Function agroflowApi.
firebase.json
json
{
"hosting": {
// Directorio con el build de Vite
"public": "dist",
// Archivos a excluir del deploy
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
// URLs limpias sin .html
"cleanUrls": true,
"trailingSlash": false,
// Rewrites: API → Cloud Function · SPA → index.html
"rewrites": [
{
"source": "/api/**",
"function": "agroflowApi",
"region": "europe-west1"
},
{
// Catch-all para React Router
"source": "**",
"destination": "/index.html"
}
],
// Headers de seguridad para todos los assets
"headers": [
{
"source": "**",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "X-XSS-Protection", "value": "1; mode=block" },
{ "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
{ "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" }
]
},
{
// Cache agresivo para assets de Vite (con hash en filename)
"source": "/assets/**",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
]
}
]
}
}
| Propiedad | Valor AgroFlow | Obligatorio | Para qué sirve |
|---|---|---|---|
| public | "dist" | ✓ Sí | Carpeta con el output de vite build |
| cleanUrls | true | Opcional | Sirve /dashboard en vez de /dashboard.html |
| rewrites[0] | /api/** → function | Opcional | Ruta la API a la Cloud Function en eu-west1 |
| rewrites[1] | ** → /index.html | Opcional | SPA catch-all para React Router v6 |
| headers | Security + Cache | Opcional | Headers HTTP de seguridad y caché agresivo |
Despliegue a producción
Build + deploy con un solo flujo de comandos
# 1. Build del proyecto React con Vite
$ npm run build
vite v5.2.0 building for production...
✓ 847 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.29 kB
dist/assets/index-BZG8kMPy.css 42.18 kB │ gzip: 8.91 kB
dist/assets/index-Cxj7ZVJR.js 312.40 kB │ gzip: 98.22 kB
✓ built in 4.32s
# 2. Deploy solo del Hosting (más rápido)
$ npx -y firebase-tools@latest deploy --only hosting
=== Deploying to 'agroflow-prod'...
i deploying hosting
i hosting[agroflow-prod]: beginning deploy...
i hosting[agroflow-prod]: found 12 files in dist
✔ hosting[agroflow-prod]: file upload complete
i hosting[agroflow-prod]: finalizing version...
✔ hosting[agroflow-prod]: version finalized
i hosting[agroflow-prod]: releasing new version...
✔ hosting[agroflow-prod]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/agroflow-prod/overview
Hosting URL: https://agroflow-prod.web.app
Tip CI/CD: En tu pipeline de GitHub Actions, añade el secreto
FIREBASE_TOKEN y usa el flag --token $FIREBASE_TOKEN para deployar automáticamente sin login interactivo.
Preview Channels — QA sin riesgo
Compartir URLs temporales del equipo antes de publicar en producción
Live · Producción
https://agroflow-prod.web.app
Canal permanente. Acceso de cooperativas activas. Solo se actualiza con
firebase deploy o desde un canal de preview. Preview · staging
https://agroflow-prod--staging-abc123.web.app
Canal temporal (7 días). Para QA del equipo antes de ir a producción.
# Desplegar al canal de preview 'staging'
$ npx -y firebase-tools@latest hosting:channel:deploy staging
✔ hosting[agroflow-prod]: preview channel URL: https://agroflow-prod--staging-abc123.web.app
Channel expires 2026-06-23
# Compartir la URL con el cliente para validación
# Una vez aprobado, promover a producción SIN rebuild
$ npx -y firebase-tools@latest hosting:clone \
agroflow-prod:staging agroflow-prod:live
✔ Clone complete! Site agroflow-prod:live updated.
# Preview con expiración personalizada (1 hora para demo rápida)
$ npx -y firebase-tools@latest hosting:channel:deploy demo-cooperativa --expires 1h
✔ https://agroflow-prod--demo-cooperativa-xyz9.web.app (expira en 1h)
Emulador local
Desarrollo sin conectarse a Firebase real · Instancia en localhost:5000
# Iniciar el emulador de Hosting (apunta a dist/)
$ npx -y firebase-tools@latest emulators:start --only hosting
i emulators: Starting emulators: hosting
i hosting: Serving hosting files from: dist
✔ hosting: Local server: http://localhost:5000
i All emulators ready! View status and logs at http://127.0.0.1:4000
# En otra terminal: hacer hot-reload de Vite + emulador
$ npm run dev # vite dev server en :5173
Nota: El emulador de Hosting sirve el contenido de
dist/. Para desarrollo activo con hot-reload, usa el servidor de Vite (npm run dev). El emulador es útil para validar la configuración de rewrites y headers antes del deploy.
Checklist de Go-Live — AgroFlow
Verificar antes de anunciar el despliegue a las cooperativas
-
✓Build limpio:
npm run buildsin errores ni warnings críticos. Tamaño de bundle < 500KB gzip. -
✓firebase.json validado: Rewrites de SPA y API configurados. Confirmar con el emulador local que todas las rutas de React Router responden correctamente.
-
✓Preview channel aprobado: El equipo de QA ha validado el canal
staging. Al menos dos cooperativas piloto han probado el flujo completo. -
✓SSL activo: Verificar que
https://agroflow-prod.web.appcarga con certificado válido. Firebase gestiona esto automáticamente. -
✓Dominio personalizado: Si se usa
app.agroflow.es, configurar el registro DNS CNAME en el proveedor y verificar en Firebase Console → Hosting. -
✓Headers de seguridad: Verificar con securityheaders.com que X-Frame-Options, CSP y demás están activos en producción.
-
✓API Cloud Function: Llamada de prueba a
https://agroflow-prod.web.app/api/healthdevuelve 200. La función está deployada en europe-west1. -
✓Monitorización: Firebase Console → Hosting muestra el tráfico. Configurar alertas en Cloud Monitoring para errores 5xx.