Despliega un repositorio frontend utilizando la consola de C4C7OPS

Introducción al despliegue frontend con C4C7OPS

El frontend de una aplicación web es la interfaz visible para los usuarios: los componentes de UI, los estilos visuales y la lógica de interacción que permiten una experiencia fluida. Desplegar correctamente un repositorio frontend es determinante para que tu aplicación esté disponible, rápida y operativa en todo momento.

En esta guía técnica aprenderás a crear y desplegar un repositorio frontend desde la consola de C4C7OPS, conectado directamente a infraestructura AWS. Este proceso asume que ya completaste la integración de tu proveedor Git con AWS utilizando C4C7OPS. Si aún no lo has hecho, consulta nuestra guía de integración de Git, AWS y C4C7OPS antes de continuar.

Requisitos previos

Antes de iniciar el despliegue de tu servicio frontend, verifica que cumplas con los siguientes requisitos indispensables. Saltar cualquiera de estos pasos impedirá la creación y publicación correcta del servicio.

1. 1Ambiente de desarrollo en AWS creadoVerifica que tu ambiente de desarrollo esté activo y correctamente integrado con C4C7OPS desde la consola de administración.
2. 2Proveedor Git configuradoAsegúrate de haber vinculado tu proveedor Git (Bitbucket, GitHub u otro) como fuente de repositorios dentro de C4C7OPS.
3. 3Repositorio frontend listoTu repositorio debe contener una aplicación frontend funcional con su archivo de build configurado (package.json, webpack, vite, etc.).
4. 4Acceso a la consola de C4C7OPSInicia sesión en la consola de C4C7OPS con credenciales válidas y permisos suficientes para crear servicios dentro del ambiente.

Creación del servicio frontend

Una vez validados los requisitos previos, accede a la consola de C4C7OPS y dirígete a la ventana "Frontends" dentro de tu ambiente de desarrollo. Pulsa el botón "Crear" para iniciar la configuración del nuevo servicio frontend.

Se abrirá un formulario con los campos necesarios para registrar y desplegar tu aplicación. Cada campo tiene un propósito específico que直接影响 la disponibilidad y el enrutamiento de tu servicio.

Configuración de los campos del servicio

El formulario de creación presenta los siguientes campos que debes completar con precisión para garantizar un despliegue exitoso.

1. 1NameDefine el nombre identificador de tu servicio frontend. Este nombre será visible dentro de la consola de C4C7OPS y te permitirá distinguirlo de otros servicios en el mismo ambiente. Usa nombres descriptivos como "portal-clientes" o "admin-dashboard".
2. 2DNS recordEstablece el prefijo DNS que se asignará al host según el ambiente de despliegue. Por ejemplo, si defines "mi-app", el dominio resultante podría ser mi-app.dev.tudominio.com. Este valor debe ser único dentro del ambiente.
3. 3RepositoryIngresa la URL del repositorio Git donde se encuentra el código fuente del frontend. Utiliza el formato SSH: [email protected]:usuario/repositorio.git o el formato HTTPS según tu configuración de proveedor.
4. 4Health check pathEspecifica la ruta (path) donde se encuentra el endpoint de verificación de salud del servicio. Típicamente es "/" o "/health". C4C7OPS utilizará esta ruta para monitorear la disponibilidad continua del servicio desplegado.
5. 5Health check status codeIndica el código HTTP esperado como respuesta del health check. El valor recomendado es 200 (OK). Esto permite a C4C7OPS validar que el servicio está respondiendo correctamente antes de rutear tráfico hacia él.

# Ejemplo de valores para el formulario de creación
name: portal-clientes
dns_record: portal-clientes
repository: [email protected]:mi-equipo/portal-clientes.git
health_check_path: /
health_check_status_code: 200

Despliegue y verificación

Después de completar todos los campos y confirmar la creación, C4C7OPS inicia automáticamente el proceso de despliegue. El sistema clona el repositorio, ejecuta el pipeline de build y publica los artefactos en la infraestructura AWS configurada para tu ambiente.

Puedes monitorear el estado del despliegue directamente desde la consola de C4C7OPS. Una vez completado, verifica que el servicio esté accesible mediante la URL generada con el DNS record configurado.

Diferencia entre ambiente y servicio frontend

Es fundamental comprender la distinción entre ambos conceptos para organizar correctamente tus despliegues en C4C7OPS.

Buenas prácticas para despliegues frontend

Para maximizar la confiabilidad y el rendimiento de tus despliegues frontend con C4C7OPS, considera las siguientes recomendaciones validadas por el equipo de Codifly.

1. 1Nombra servicios con convención claraUsa prefijos o sufijos que identifiquen el tipo de servicio y el ambiente, como "portal-prod" o "admin-stg". Esto facilita la gestión cuando tienes múltiples servicios.
2. 2Configura un health check representativoElige una ruta que verifique no solo disponibilidad HTTP sino también la integridad de los assets principales. Un health check robusto permite detectar problemas temprano.
3. 3Mantén repositorios enfocadosCada repositorio debe contener un solo servicio frontend. Evita monorepos complejos que dificulten el pipeline de build y aumenten los tiempos de despliegue.
4. 4Verifica antes de confirmarRevisa todos los campos del formulario antes de crear el servicio. Errores en el DNS record o la URL del repositorio requieren eliminación y recreación del servicio.
5. 5Monitorea después del despliegueUtiliza la consola de C4C7OPS para verificar el estado del servicio y realiza pruebas manuales en la URL pública para confirmar la experiencia del usuario.

Recursos adicionales

Profundiza tu conocimiento sobre C4C7OPS y las integraciones disponibles con estos recursos oficiales.