Despliegue de Aplicaciones Node.js con App Fiber Hosting

Clase 27 de 36 • Curso de Angular Avanzado

Clase anteriorSiguiente clase

Resumen

La implementación de Server Side Rendering (SSR) en Angular representa un paso crucial para mejorar el rendimiento y la experiencia de usuario de nuestras aplicaciones. Cuando llega el momento de llevar nuestra aplicación a producción, necesitamos entender las diferentes opciones de despliegue disponibles y cómo configurarlas correctamente para aprovechar al máximo las ventajas del SSR.

¿Qué necesitamos para desplegar una aplicación Angular con SSR?

Para desplegar una aplicación Angular con Server Side Rendering necesitamos un entorno que pueda ejecutar Node.js, ya que el renderizado del lado del servidor requiere un runtime de JavaScript. Aunque existen alternativas como Bun, Deno o Cloudflare Workers, la opción más común y confiable sigue siendo Node.js.

Existen numerosos proveedores que ofrecen servidores Node.js:

  • Digital Ocean
  • Amazon Web Services
  • Google Cloud Platform
  • Microsoft Azure
  • Y muchos otros

En entornos empresariales, es común que el equipo de infraestructura se encargue de este proceso, solicitando un Docker o configurando un sistema de orquestación de contenedores. Sin embargo, para simplificar este proceso, podemos utilizar servicios que facilitan el despliegue.

¿Cómo funciona App Firebase Hosting?

Firebase ha lanzado un nuevo producto llamado App Firebase Hosting, diseñado específicamente para aplicaciones que utilizan Server Side Rendering. Es importante distinguirlo del Firebase Hosting tradicional:

  • Firebase Hosting: Para archivos estáticos y páginas estáticas (SSG o CSR)
  • App Firebase Hosting: Para aplicaciones que requieren SSR, actualmente compatible con Next.js y Angular

Este servicio utiliza la infraestructura de Google Cloud para ejecutar aplicaciones Node.js, proporcionando seguridad y escalabilidad. Aunque existen alternativas como Netlify, la integración con el ecosistema de Google hace que App Firebase Hosting sea una opción atractiva.

¿Cómo configurar App Firebase Hosting para nuestra aplicación Angular?

El proceso de configuración implica varios pasos:

  1. Crear un nuevo proyecto en Firebase
  2. Configurar la facturación (App Firebase Hosting no está incluido en el plan gratuito)
  3. Conectar nuestro repositorio de GitHub
  4. Configurar la rama de despliegue

Creación del proyecto y configuración de facturación

1. Acceder a console.firebase.com
2. Crear un nuevo proyecto (en este caso "store app")
3. Habilitar Google Analytics (opcional)
4. Configurar una cuenta de facturación

Es recomendable establecer un límite de presupuesto para evitar sorpresas en la facturación. Firebase permite configurar alertas cuando el consumo se acerca al límite establecido.

Configuración del despliegue

Una vez configurada la facturación, podemos comenzar con la configuración del despliegue:

  1. Seleccionar la región donde se desplegará la aplicación (idealmente cerca de nuestros usuarios)
  2. Conectar nuestro repositorio de GitHub
  3. Seleccionar la rama que se utilizará para el despliegue

Es una buena práctica crear una rama específica para producción. En este caso, se creó una rama llamada "production" que servirá como la rama de despliegue. Cada vez que se realice un merge a esta rama, se activará automáticamente un nuevo despliegue.

# Crear una rama de producción
git checkout -b production
git merge 1class  # Fusionar los cambios de la rama de desarrollo
git push origin production

Este enfoque es similar al GitLab Flow, donde se utilizan ramas específicas para diferentes entornos (desarrollo, staging, producción).

Solución de errores comunes

Durante el despliegue, es posible encontrar errores relacionados con la compatibilidad de versiones. Para Angular, puede ser necesario instalar el adaptador específico de App Firebase Hosting:

npm install -D @app/hosting-adapter-angular@0.0.1-alpha.9

También es necesario agregar una nueva tarea en el archivo package.json:

"app-hosting-build": {
  "framework-version": "19.0.0",
  "command": "app-hosting-adapter-angular build"
}

Estos ajustes permiten que App Firebase Hosting pueda construir y desplegar correctamente nuestra aplicación Angular con SSR.

¿Qué ventajas ofrece este método de despliegue?

Una vez desplegada, nuestra aplicación estará disponible en un dominio proporcionado por Firebase (aunque también es posible configurar un dominio personalizado). Las principales ventajas incluyen:

  • Despliegue automático: Cada vez que se realiza un push a la rama de producción, se inicia automáticamente un nuevo despliegue
  • Logs y monitoreo: Acceso a los registros de Google Cloud para diagnosticar problemas
  • Escalabilidad: La infraestructura de Google Cloud permite que la aplicación escale según la demanda

Además, al utilizar Server Side Rendering, obtenemos beneficios como mejor SEO, tiempos de carga iniciales más rápidos y mejor experiencia para usuarios con conexiones lentas.

El despliegue de aplicaciones Angular con SSR ha evolucionado significativamente, y servicios como App Firebase Hosting simplifican enormemente este proceso. Aunque existen alternativas y cada proyecto puede requerir una solución diferente, entender estas opciones nos permite tomar decisiones informadas sobre la infraestructura de nuestras aplicaciones.

¿Has tenido experiencia desplegando aplicaciones Angular con SSR en otros proveedores? ¿Qué ventajas o desventajas has encontrado? Comparte tu experiencia en los comentarios.