El despliegue continuo se ha vuelto crucial en el panorama del desarrollo de software, que evoluciona rápidamente. Promete ciclos de publicación más rápidos, menos errores humanos y, en última instancia, una mejor experiencia de usuario.
El desarrollo de software implica resolver problemas del mundo real con código. El viaje del software desde su creación hasta el cliente implica numerosas etapas, que exigen velocidad, seguridad y fiabilidad. Aquí es donde brilla el despliegue continuo.
Este artículo explica cómo integrar la plataforma CircleCI para crear un flujo de trabajo de integración continua y entrega/despliegue continuos (CI/CD), aprovechando al mismo tiempo la potencia de la API de Kinsta para el despliegue continuo de aplicaciones — como nuestro ejemplo React aquí. Esta combinación puede allanar el camino del desarrollo a la producción.
Entender el Despliegue Continuo
El despliegue continuo es algo más que una palabra de moda: es un cambio de paradigma en el desarrollo de software. Implica automatizar el proceso de creación, prueba y despliegue de los cambios de código en los servidores de producción.
La canalización CI/CD, un componente fundamental del despliegue continuo, orquesta todo el proceso. Incluye el control de versiones, las pruebas automatizadas y el despliegue automatizado. Cada etapa es crucial para garantizar que sólo llegue a producción código fiable y probado.
¿Qué Es CircleCI?
CircleCI es una popular herramienta para implantar CI/CD. Se integra con sistemas de control de versiones como GitHub, GitLab y Bitbucket, permitiendo a los desarrolladores automatizar todo el proceso de CI/CD. Su escalabilidad, extensibilidad y compatibilidad con varios lenguajes de programación la convierten en una herramienta versátil para proyectos de todos los tamaños.
Los desarrolladores de CircleCI definen flujos de trabajo que se activan automáticamente al confirmar el código. Esto inicia los procesos de construcción y prueba y, una vez completados con éxito, despliega el código en el entorno de destino. Este enfoque no intervencionista no sólo ahorra tiempo, sino que también reduce el riesgo de errores humanos durante el despliegue.
Comprender la API de Kinsta
La API de Kinsta te permite interactuar con los servicios alojados en Kinsta mediante programación, con el despliegue de aplicaciones como parte de su funcionalidad. Cuando trabajes con flujos de trabajo CI/CD, utilizarás el comando cURL para interactuar con la API de Kinsta desde el flujo de trabajo.
Para utilizar la API, debes tener una cuenta con al menos un sitio, Aplicación o Base de Datos de WordPress en MyKinsta. A continuación, puedes generar una clave API para autenticar tu acceso a la API.
Para generar una clave API:
- Ve a tu panel de MyKinsta.
- Ve a la página Claves API (Tu nombre > Configuración de la empresa > Claves API).
- Haz clic en Crear Clave API.
- Elige una fecha de caducidad o establece una fecha de inicio personalizada y un número de horas para que caduque la clave.
- Dale a la clave un nombre único.
- Haz clic en Generar.
Después de crear una clave API, cópiala y guárdala en un lugar seguro (te recomendamos que utilices un gestor de contraseñas), ya que es la única vez que se revela dentro de MyKinsta.
Cómo Activar el Despliegue con la API de Kinsta
Para activar el despliegue de una aplicación en Kinsta mediante la API, necesitas el ID de la aplicación y el nombre de la rama desplegable en el repositorio Git. Puedes recuperar el ID de tu aplicación consultando primero la lista de tus aplicaciones, que proporcionará detalles sobre cada aplicación, incluido su ID.
A continuación, puedes realizar una solicitud POST al endpoint de la API /applications/deployments con un comando cURL:
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H 'Authorization: Bearer <YOUR_TOKEN_HERE>'
-H 'Content-Type: application/json'
-d '{
"app_id": "<YOUR_APP_ID>",
"branch": "main"
}'Este comando cURL se utilizará en el flujo de trabajo.
Cómo Empezar con CircleCI
Necesitarás el código fuente alojado en tu proveedor Git preferido para empezar con CircleCI. Para este tutorial, vamos a utilizar la aplicación constructora de sitios desarrollada para el tutorial Cómo Crear un Sitio WordPress con la API de Kinsta. Siéntete libre de utilizar el repositorio navegando hasta él en GitHub y seleccionando: Usar esta plantilla > Crear un nuevo repositorio.
En la aplicación React, se crean pruebas unitarias para probar cada componente. También se utiliza ESLint para que la sintaxis y el formato del código sean perfectos. Vamos a configurar un flujo de trabajo CI/CD que construya, pruebe, se asegure de que la sintaxis de nuestro código es correcta y, finalmente, lo despliegue en Kinsta utilizando la API.
Para empezar, exploremos algunos conceptos clave:
- Flujos de trabajo: CircleCI se basa en flujos de trabajo — secuencias definidas de tareas que describen las etapas de tu proceso CI/CD. Los flujos de trabajo pueden incluir varios pasos, como construir, probar, desplegar, etc.
- Tareas: Las tareas son unidades individuales de trabajo dentro de un flujo de trabajo. Cada trabajo ejecuta una tarea específica, como compilar código, ejecutar pruebas o desplegar en un servidor. Estos trabajos también pueden incluir varios pasos que se ejecutan en secuencia (ejecución paralela), de modo que cuando uno falla, falla todo el trabajo.
Paso 1: Crear una Cuenta CircleCI
Visita el sitio web de CircleCI y crea una cuenta si aún no tienes una. Puedes registrarte utilizando tu proveedor de Git preferido. Así te resultará más fácil acceder a tus repositorios sin necesidad de realizar más configuraciones.
Paso 2: Crear el Archivo de Configuración
En el directorio root de tu proyecto, crea una carpeta .circleci si no existe, y dentro de esa carpeta, crea un archivo config.yml. Este archivo albergará la configuración de tu flujo de trabajo.
Paso 3: Configura Tu Repositorio
Una vez que hayas iniciado sesión, navega hasta tu panel de control CircleCI, haz clic en Proyectos en la barra lateral izquierda para ver una lista de repositorios, y haz clic en el botón Configurar Proyecto del repositorio que desees configurar.
Se abrirá un cuadro de diálogo en el que CircleCI detectará automáticamente tu archivo de configuración. A continuación, haz clic en el botón Configurar Proyecto. Ahora CircleCI puede acceder a tu base de código y ejecutar los flujos de trabajo definidos cuando se produzcan cambios en el código.
Paso 4: Define el Trabajo de Tu Flujo de Trabajo
En el centro de la configuración de tu pipeline de CircleCI se encuentra este paso crucial: definir tu flujo de trabajo dentro del archivo config.yml. Aquí es donde orquestas la secuencia de acciones que ejecutará tu pipeline. Es como esbozar el plano de tu viaje del desarrollo a producción.
Comienza definiendo la versión de CircleCI, que actualmente es 2.1:
version: 2.1Necesitarás una tarea build para cada proyecto React. Este trabajo se ocupa de las tareas fundamentales que hacen que tu código esté listo para el despliegue. Estas tareas abarcan la instalación de las dependencias necesarias, la compilación de tu código, la ejecución de pruebas para garantizar que todo funciona correctamente, la comprobación de la calidad del código y, por último, el envío del código a su destino.
Dado que los proyectos React a menudo necesitan herramientas como Node.js para realizar el trabajo, CircleCI simplifica el acceso a estas herramientas ofreciéndolas como imágenes preempaquetadas. En este tutorial, especifica la versión de Node.js que deseas utilizar. Vamos a utilizar Node.js v20.
jobs:
build:
docker:
- image: cimg/node:20.5.0Este trabajo realizará varios pasos, así que vamos a crearlos. El primer paso es checkout, que obtiene la última versión de tu código del repositorio para que todas las acciones posteriores funcionen con el código más reciente.
steps:
- checkoutAhora, pasemos al verdadero meollo del trabajo — hacer las cosas. Los pasos que siguen a checkout cubren tareas clave: instalar dependencias, compilar el código fuente, ejecutar pruebas unitarias y emplear ESLint para inspeccionar tu código en busca de cualquier bandera roja.
steps:
- checkout
- run:
name: Install Dependencies
command: npm install
- run:
name: Compile Source Code
command: npm run build
- run:
name: Run Unit Tests
command: npm test
- run:
name: Run ESLint
command: npm run lintCada paso, como las señales en un viaje, tiene un nombre para ayudarte a seguir lo que ocurre cuando el flujo de trabajo está en pleno apogeo. Esta claridad facilita la resolución de problemas y garantiza que todo va por buen camino a medida que fluye tu flujo de trabajo.
Activar el Despliegue Continuo en Kinsta
El paso final en el trabajo build es iniciar el despliegue en Kinsta a través de la API. Esto requiere dos valores: tu clave API y tu ID de aplicación, que no deben ser públicos. Estos valores se mantendrán como variables de entorno en CircleCI. Por ahora, vamos a definir la etapa de despliegue en el flujo de trabajo:
- run:
name: Deploy to Kinsta
command: |
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H "Authorization: Bearer $API_KEY"
-H "Content-Type: application/json"
-d '{
"app_id": "'"$APP_ID"'",
"branch": "main"
}'En el código proporcionado, ejecuta el comando cURL para activar el despliegue utilizando el ID de Aplicación almacenado en tus variables de entorno. Recuerda que a las variables de entorno se accede utilizando la sintaxis
"$VARIABLE_NAME"Almacenamiento de Variables de Entorno con CircleCI
Las variables de entorno son cruciales para mantener la seguridad y flexibilidad de tus flujos de trabajo de integración y despliegue continuos. Para almacenar variables de entorno en CircleCI, sigue estos pasos:
- Abre tu proyecto para ver todos los detalles de tu canalización, y haz clic en el botón Configuración del Proyecto.
- Haz clic en la pestaña Variables de Entorno de la barra lateral y añade tus variables de entorno.
Paso 5: Configuración del Flujo de Trabajo
Con tu(s) trabajo(s) configurado(s) y estructurado(s) en pasos organizados, la siguiente fase consiste en configurar tu flujo de trabajo. El flujo de trabajo actúa como un orquestador, guiando la secuencia de trabajos e incorporando filtros específicos y reglas para determinar cómo se ejecutan estos trabajos.
En este tutorial, crearemos un flujo de trabajo que active el trabajo de construcción exclusivamente cuando haya un envío o alteraciones en el código de la rama main del repositorio:
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- mainEsta configuración se consigue utilizando filtros, que te permiten controlar cuándo se ejecuta un trabajo en función de determinadas condiciones. También puedes incorporar disparadores para programar cuándo debe ejecutarse el flujo de trabajo (ejemplo: diariamente a las 12 a.m. UTC):
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- main
triggers:
- schedule:
cron: "0 0 * * *"El flujo de trabajo anterior incluye un trigger definido con la palabra clave schedule. La expresión cron "0 0 * * *" corresponde a programar el flujo de trabajo a medianoche UTC todos los días.
En una expresión cron, hay cinco campos separados por espacios, cada uno de los cuales representa una unidad de tiempo diferente:
- Minuto (0-59): El primer campo representa el minuto de la hora, configurado en
0para que se active al comienzo de la hora. - Hora (0-23): El segundo campo representa la hora del día, configurado en
0para medianoche. - Día del mes (1-31): El tercer campo significa el día, indicado por un asterisco (
*) para cualquier día. - Mes (1-12): El cuarto campo representa el mes, señalado con un asterisco (
*) para cualquier mes. - Día de la semana (0-6, donde 0 es domingo): El quinto campo significa el día de la semana, también marcado con un asterisco (
*) para cualquier día.
Con esta configuración del flujo de trabajo, puedes gestionar eficazmente cuándo y en qué condiciones se ejecutan tus trabajos definidos, manteniendo un canal de CI/CD eficiente y optimizado.
Paso 6: Confirmar y Observar
Una vez que tu flujo de trabajo esté configurado correctamente, confirma los cambios en tu repositorio de control de versiones. CircleCI detectará automáticamente la presencia del archivo de configuración y activará los flujos de trabajo definidos cuando se produzcan cambios en el código.
Haz clic en el trabajo de construcción para revisar sus detalles. Si tienes más de un trabajo, aparecerán todos en la lista. Cuando hagas clic en un trabajo, la pestaña PASOS mostrará todos los pasos que ejecutó el trabajo y si tuvieron éxito o fallaron.
También puedes hacer clic en cada paso para ver más detalles. Cuando hagas clic en el paso Desplegar en Kinsta, verás más detalles sobre la solicitud de la API y sabrás si ha tenido éxito:
Cuando compruebes tu panel de control MyKinsta, te darás cuenta de que el flujo de trabajo activa automáticamente el despliegue. Este es el aspecto de tu flujo de trabajo CircleCI completo:
version: 2.1
jobs:
build:
docker:
- image: cimg/node:20.5.0
steps:
- checkout # Check out the code from the repository
- run:
name: Install Dependencies
command: npm install
- run:
name: Compile Source Code
command: npm run build
- run:
name: Run Unit Tests
command: npm test
- run:
name: Run ESLint
command: npm run lint
- run:
name: Deploy to Kinsta
command: |
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H "Authorization: Bearer $API_KEY"
-H "Content-Type: application/json"
-d '{
"app_id": "'"$APP_ID"'",
"branch": "main"
}'
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- mainResumen
Ahora has conseguido con éxito un proceso de despliegue a medida para tu aplicación React en Kinsta a través de CircleCI. Este enfoque te dota de mayor flexibilidad y autoridad sobre tus despliegues, permitiendo a tu equipo ejecutar pasos especializados dentro del proceso.
Al adoptar CircleCI, estás dando un paso sustancial hacia la elevación de tus metodologías de desarrollo. La automatización de tu canal CI/CD no sólo garantiza la calidad de tu código, sino que también acelera tus ciclos de lanzamiento.
¿Cómo utilizas la API Kinsta? ¿Qué puntos finales te gustaría que se añadieran a la API? ¿Qué tutorial relacionado con la API Kinsta te gustaría leer a continuación?
Deja una respuesta