Despliega un repositorio frontend utilizando la consola de C4c7us

¡Bienvenido a nuestro blog sobre desarrollo web! En este artículo, exploraremos cómo desplegar un repositorio frontend utilizando la consola de C4c7us. Si estás interesado en aprender cómo llevar tu aplicación web al siguiente nivel y aprovechar al máximo la potencia de C4c7us, has llegado al lugar adecuado.

El frontend de una aplicación web es el rostro visible para los usuarios, la interfaz de usuario con la que interactúan, los estilos que dan vida a la aplicación y la lógica que permite una experiencia de usuario fluida. El despliegue correcto de un repositorio frontend es crucial para asegurarte de que tu aplicación esté disponible y funcione sin problemas.

En este artículo, te guiaremos paso a paso a través del proceso de creación y despliegue utilizando la consola de C4c7us.

Anteriormente creamos nuestro primer ambiente de desarrollo en AWS, si te lo perdiste visita nuestro articulo sobre integración de git, AWS y c4c7us.

Creación del servicio frontend

Con la creación previa del ambiente, ahora nos vamos a crear un servicio frontend y desplegarlo, para esto iniciaremos dirigiéndonos hacia la ventana “Frontends” y estando allí pulsamos el botón crear.

Con esto se nos mostrará una pantalla para insertar la información correspondiente de nuestro servicio. En esta se pueden apreciar los siguiente campos:

• Name: Será el nombre con el que identificaremos nuestro servicio.
• DNS record: Este valor será el prefijo que esperamos se le asigne al host dependiendo del ambiente donde se realizará el despliegue.
• Repository: La url del repositorio donde se encuentra el servicio frontend que queremos desplegar, por ejemplo “git@bitbucket.org:user/user-repo.git”.
• Health check path: La ruta (path) dónde se encuentra el health-check del servicio.
• Health check status code: El código de respuesta del estado de la solicitud que se espera de la ruta anteriormente definida. (Recomendamos usar el estado 200)
• Build: Seleccionaremos el lenguaje en el cual está definido nuestro proyecto, también de ser necesario, podremos seleccionar que la compilación se realice usando un archivo dockerfile.
• Content type: En este caso tenemos dos opciones.
• Si el contenido tiene que ser renderizado desde el servidor se requiere Dynamic (Server Side Render)
• Si el contenido que se genera en el build es estático entonces se recomienda usar Static (S3)

Completa los campos y haz clic en “Save“ para continuar.

Se nos mostrará la lista de servicios creados, allí se podrá validar la creación exitosa del registro.

Ajuste de configuraciones relacionadas con los posibles ambientes de despliegue

Ahora pulsamos sobre el botón “Environments” ubicado en el registro creado.

Una vez que hayas creado, simplemente haz clic en el botón ‘Settings’ situado en la tabla para acceder a las opciones de configuración y realizar ajustes.

Ahora podremos ver la configuración ofrecida por defecto para “Runtime settings“, esta es ajustable y personalizable para cumplir con sus necesidades.

Los parámetros de configuración son los siguientes:

• Cpu units: Aquí podemos asignar la cantidad de unidades de CPU que se destinarán al servicio. Esto puede ser útil para ajustar el rendimiento en función de la intensidad de procesamiento de nuestra aplicación.
• Memory: Aquí podemos establecer la cantidad de memoria asignada al servicio. Dependiendo de las necesidades de nuestra aplicación, podemos aumentar o disminuir la cantidad de memoria asignada para garantizar un rendimiento óptimo.
• Minimum and maximum of instances: Podemos especificar la cantidad mínima y máxima de instancias del servicio que deseamos que se ejecuten simultáneamente. Esto nos permite controlar la escalabilidad horizontal del servicio y adaptarlo a la carga esperada.
• Health check grace period in seconds: Este parámetro que se configura en numero de segundos para determinar cual es el tiempo máximo de espera para obtener una respuesta del endpoint que se configura como health check.
• CPU percentage to scale: El porcentaje de uso de CPU lo configuramos para controlar el rendimiento de las instancias. Si se alcanza ese porcentaje, y la configuración lo permite, se inicia una nueva instancia para distribuir la carga de trabajo y evitar la sobrecarga.
• Memory percentage to scale: Este parámetro lo configuramos para controlar el rendimiento de las instancias. Si se alcanza ese porcentaje, y la configuración lo permite, se inicia una nueva instancia.
• Spot instance percentage: Este parámetro lo configuramos para determinar el porcentaje de las instancias del servicio que van serán de tipo spot, recordando que una instancia de tipo spot son instancias mas económicas pero a su vez mas inestables.
• Enable OpenTelemetry: Permitirá hacer uso de OpenTelemetry.

Ahora, personaliza tus ajustes en Runtime settings y, para finalizar, guarda los cambios haciendo clic en ‘Save’.

Para configurar las variables del entorno, selecciona la opción “Save”.

Digite el nombre de la variable y el valor correspondiente.

Verificamos que se creo exitosamente.

Para establecer una configuración para “Autoscaling behavior” seleccionamos nuestras preferencias y pulsamos el botón “Save”.

También podremos configurar en esta la forma en que el servicio se ajusta en función de la demanda y carga de trabajo en el entorno.

Configura las políticas de AWS que deseamos asociar a nuestro servicio y haz click en “Save” para guardar.

Despliegue de un servicio frontend usando la consola de c4c7us

Con la previa configuración realizada procedemos a crear un despliegue de nuestro servicio de frontend, para esto nos dirigimos en nuestro registro al botón “Deploys“.

En esta pantalla podrás acceder a los despliegues que se han ejecutado. Para lanzar uno nuevo, haz clic en “Create”.

Para realizar el despliegue se debe tener presente el nombre de la rama, etiqueta o commit desde el cual deseas realizar el despliegue. También deberás seleccionar el tipo de infraestructura que se utilizará para alojar y ejecutar tu aplicación web (La infraestructura se refiere a la combinación de recursos y servicios proporcionados por AWS).

Si seleccionas ‘Principal Infrastructure’, el despliegue se reflejará en el dominio asignado al servicio. Por otro lado, si eliges otra opción, se creará una infraestructura asociada a una etiqueta específica que podría ser eliminada en el futuro.

Completa los campos y haz clic en ‘Launch’ para continuar.

Luego de iniciar el lanzamiento obtendremos la siguiente vista, donde se logra apreciar una serie de estados del despliegue:

• Initializing components: Se valida que el commit, etiqueta o branch y demás componentes relacionados con el deploy existan.
• Building projects: Este estado muestra el resultado del proceso de compilación del proyecto que se quiere desplegar.
• Creating image: En este punto se generan las imágenes que serán lanzadas en su proveedor de la nube.
• Push image to AWS: Se envían las imágenes creadas anteriormente a partir del proyecto y rama(etiqueta o commit) a su proveedor de la nube.
• Deploy ready: Aquí se reflejará el estado del proceso final del despliegue, si este es exitoso dependiendo directamente de si las instancias del despliegue anterior se finalizan

Solo queda aguardar que el mismo se realice de forma exitosa.

Al finalizar el despliegue nos dirigiremos hacia la ventana anterior, donde se listan todos los despliegues realizados.

Allí podremos tomar el DNS donde se realizó el despliegue y posteriormente dirigirnos a él.

Así podremos validar el despliegue exitoso de nuestro primer servicio de frontend.

A lo largo de este artículo, hemos avanzado a través del proceso de despliegue, destacando las características y herramientas que ofrece la consola de C4c7us para facilitar este proceso. Espero que esta guía te haya proporcionado la confianza y los conocimientos necesarios para llevar tu aplicación web al siguiente nivel utilizando esta plataforma.

Recuerda que el despliegue de un repositorio frontend es solo el comienzo. Continúa explorando las capacidades de C4c7us y aprovecha al máximo todas las herramientas y servicios que ofrece para mejorar y hacer crecer tus aplicaciones web.