{"id":69251,"date":"2023-08-21T13:59:24","date_gmt":"2023-08-21T11:59:24","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=69251&preview=true&preview_id=69251"},"modified":"2023-08-23T11:33:30","modified_gmt":"2023-08-23T09:33:30","slug":"react-despliegue-continuo","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/react-despliegue-continuo\/","title":{"rendered":"Despliegue Continuo de Aplicaciones React con CircleCI y la API de Kinsta"},"content":{"rendered":"

El despliegue continuo se ha vuelto crucial en el panorama del desarrollo de software<\/a>, que evoluciona r\u00e1pidamente. Promete ciclos de publicaci\u00f3n m\u00e1s r\u00e1pidos, menos errores humanos y, en \u00faltima instancia, una mejor experiencia de usuario.<\/p>\n

El desarrollo de software implica resolver problemas del mundo real con c\u00f3digo. El viaje del software desde su creaci\u00f3n hasta el cliente implica numerosas etapas, que exigen velocidad, seguridad y fiabilidad. Aqu\u00ed es donde brilla el despliegue continuo.<\/p>\n

Este art\u00edculo explica c\u00f3mo integrar la plataforma CircleCI<\/a> para crear un flujo de trabajo de integraci\u00f3n continua y entrega\/despliegue continuos (CI\/CD<\/a>), aprovechando al mismo tiempo la potencia de la API de Kinsta<\/a> para el despliegue continuo de aplicaciones \u2014 como nuestro ejemplo React aqu\u00ed. Esta combinaci\u00f3n puede allanar el camino del desarrollo a la producci\u00f3n.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Entender el Despliegue Continuo<\/h2>\n

El despliegue continuo es algo m\u00e1s que una palabra de moda: es un cambio de paradigma en el desarrollo de software. Implica automatizar el proceso de creaci\u00f3n, prueba y despliegue de los cambios de c\u00f3digo en los servidores de producci\u00f3n.<\/p>\n

La canalizaci\u00f3n CI\/CD<\/a>, 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\u00f3lo llegue a producci\u00f3n c\u00f3digo fiable y probado.<\/p>\n

\u00bfQu\u00e9 Es CircleCI?<\/h2>\n

CircleCI es una popular herramienta para implantar CI\/CD. Se integra con sistemas de control de versiones como GitHub<\/a>, GitLab<\/a> y Bitbucket<\/a>, permitiendo a los desarrolladores automatizar todo el proceso de CI\/CD. Su escalabilidad, extensibilidad y compatibilidad con varios lenguajes de programaci\u00f3n<\/a> la convierten en una herramienta vers\u00e1til para proyectos de todos los tama\u00f1os.<\/p>\n

Los desarrolladores<\/a> de CircleCI definen flujos de trabajo que se activan autom\u00e1ticamente al confirmar el c\u00f3digo. Esto inicia los procesos de construcci\u00f3n y prueba y, una vez completados con \u00e9xito, despliega el c\u00f3digo en el entorno de destino. Este enfoque no intervencionista no s\u00f3lo ahorra tiempo, sino que tambi\u00e9n reduce el riesgo de errores humanos durante el despliegue.<\/p>\n

Comprender la API de Kinsta<\/h2>\n

La API de Kinsta<\/a> te permite interactuar con los servicios alojados en Kinsta mediante programaci\u00f3n, con el despliegue de aplicaciones como parte de su funcionalidad. Cuando trabajes con flujos de trabajo CI\/CD, utilizar\u00e1s el comando cURL para interactuar con la API de Kinsta desde el flujo de trabajo.<\/p>\n

Para utilizar la API, debes tener una cuenta con al menos un sitio, Aplicaci\u00f3n<\/a> o Base de Datos<\/a> de WordPress<\/a> en MyKinsta. A continuaci\u00f3n, puedes generar una clave API para autenticar tu acceso a la API.<\/p>\n

Para generar una clave API:<\/p>\n

    \n
  1. Ve a tu panel de MyKinsta.<\/li>\n
  2. Ve a la p\u00e1gina Claves API<\/strong> (Tu nombre<\/strong> > Configuraci\u00f3n de la empresa<\/strong> > Claves API<\/strong>).<\/li>\n
  3. Haz clic en Crear Clave API<\/strong>.<\/li>\n
  4. Elige una fecha de caducidad o establece una fecha de inicio personalizada y un n\u00famero de horas para que caduque la clave.<\/li>\n
  5. Dale a la clave un nombre \u00fanico.<\/li>\n
  6. Haz clic en Generar<\/strong>.<\/li>\n<\/ol>\n

    Despu\u00e9s de crear una clave API, c\u00f3piala y gu\u00e1rdala en un lugar seguro (te recomendamos que utilices un gestor de contrase\u00f1as<\/a>), ya que es la \u00fanica vez que<\/strong> se revela dentro de MyKinsta.<\/p>\n

    C\u00f3mo Activar el Despliegue con la API de Kinsta<\/h3>\n

    Para activar el despliegue de una aplicaci\u00f3n en Kinsta mediante la API, necesitas el ID de la aplicaci\u00f3n y el nombre de la rama desplegable en el repositorio Git. Puedes recuperar el ID de tu aplicaci\u00f3n consultando primero la lista de tus aplicaciones<\/a>, que proporcionar\u00e1 detalles sobre cada aplicaci\u00f3n, incluido su ID.<\/p>\n

    A continuaci\u00f3n, puedes realizar una solicitud POST<\/a> al endpoint de la API \/applications\/deployments<\/a><\/code> con un comando cURL:<\/p>\n

    curl -i -X POST \n  https:\/\/api.kinqsta.com\/v2\/applications\/deployments \n  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' \n  -H 'Content-Type: application\/json' \n  -d '{\n    \"app_id\": \"<YOUR_APP_ID>\",\n    \"branch\": \"main\"\n  }'<\/code><\/pre>\n
    Este comando cURL se utilizar\u00e1 en el flujo de trabajo.<\/p>\n
    C\u00f3mo Empezar con CircleCI<\/h2>\n
    Necesitar\u00e1s el c\u00f3digo fuente alojado en tu proveedor Git preferido para empezar con CircleCI. Para este tutorial, vamos a utilizar la aplicaci\u00f3n constructora de sitios<\/a> desarrollada para el tutorial C\u00f3mo Crear un Sitio WordPress con la API de Kinsta<\/a>. Si\u00e9ntete libre de utilizar el repositorio navegando hasta \u00e9l en GitHub y seleccionando: Usar esta plantilla<\/strong> > Crear un nuevo repositorio<\/strong>.<\/p>\n
    En la aplicaci\u00f3n React<\/a>, se crean pruebas unitarias para probar cada componente. Tambi\u00e9n se utiliza ESLint<\/a> para que la sintaxis y el formato del c\u00f3digo sean perfectos. Vamos a configurar un flujo de trabajo CI\/CD que construya, pruebe, se asegure de que la sintaxis de nuestro c\u00f3digo es correcta y, finalmente, lo despliegue en Kinsta utilizando la API.<\/p>\n
    Para empezar, exploremos algunos conceptos clave:<\/p>\n
      \n
    1. Flujos de trabajo:<\/strong> CircleCI se basa en flujos de trabajo \u2014 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.<\/li>\n
    2. Tareas:<\/strong> Las tareas son unidades individuales de trabajo dentro de un flujo de trabajo. Cada trabajo ejecuta una tarea espec\u00edfica, como compilar c\u00f3digo, ejecutar pruebas o desplegar en un servidor. Estos trabajos tambi\u00e9n pueden incluir varios pasos que se ejecutan en secuencia (ejecuci\u00f3n paralela), de modo que cuando uno falla, falla todo el trabajo.<\/li>\n<\/ol>\n
      Paso 1: Crear una Cuenta CircleCI<\/h3>\n
      Visita el sitio web de CircleCI y crea una cuenta si a\u00fan no tienes una. Puedes registrarte utilizando tu proveedor de Git preferido. As\u00ed te resultar\u00e1 m\u00e1s f\u00e1cil acceder a tus repositorios sin necesidad de realizar m\u00e1s configuraciones.<\/p>\n
      Paso 2: Crear el Archivo de Configuraci\u00f3n<\/h3>\n
      En el directorio root de tu proyecto, crea una carpeta .circleci<\/strong> si no existe, y dentro de esa carpeta, crea un archivo config.yml<\/strong>. Este archivo albergar\u00e1 la configuraci\u00f3n de tu flujo de trabajo.<\/p>\n
      Paso 3: Configura Tu Repositorio<\/h3>\n
      Una vez que hayas iniciado sesi\u00f3n, navega hasta tu panel de control CircleCI<\/a>, haz clic en Proyectos<\/strong> en la barra lateral izquierda para ver una lista de repositorios, y haz clic en el bot\u00f3n Configurar Proyecto<\/strong> del repositorio que desees configurar.<\/p>\n
      \"Configura
      Configura tu repositorio.<\/figcaption><\/figure>\n
      Se abrir\u00e1 un cuadro de di\u00e1logo en el que CircleCI detectar\u00e1 autom\u00e1ticamente tu archivo de configuraci\u00f3n. A continuaci\u00f3n, haz clic en el bot\u00f3n Configurar Proyecto<\/strong>. Ahora CircleCI puede acceder a tu base de c\u00f3digo y ejecutar los flujos de trabajo definidos cuando se produzcan cambios en el c\u00f3digo.<\/p>\n
      Paso 4: Define el Trabajo de Tu Flujo de Trabajo<\/h3>\n
      En el centro de la configuraci\u00f3n de tu pipeline de CircleCI se encuentra este paso crucial: definir tu flujo de trabajo dentro del archivo config.yml<\/strong>. Aqu\u00ed es donde orquestas la secuencia de acciones que ejecutar\u00e1 tu pipeline. Es como esbozar el plano de tu viaje del desarrollo a producci\u00f3n.<\/p>\n
      Comienza definiendo la versi\u00f3n de CircleCI, que actualmente es 2.1<\/code>:<\/p>\n
      version: 2.1<\/code><\/pre>\n
      Necesitar\u00e1s una tarea build<\/code> para cada proyecto React. Este trabajo se ocupa de las tareas fundamentales que hacen que tu c\u00f3digo est\u00e9 listo para el despliegue. Estas tareas abarcan la instalaci\u00f3n de las dependencias necesarias, la compilaci\u00f3n de tu c\u00f3digo, la ejecuci\u00f3n de pruebas para garantizar que todo funciona correctamente, la comprobaci\u00f3n de la calidad del c\u00f3digo y, por \u00faltimo, el env\u00edo del c\u00f3digo a su destino.<\/p>\n
      Dado que los proyectos React a menudo necesitan herramientas como Node.js<\/a> para realizar el trabajo, CircleCI simplifica el acceso a estas herramientas ofreci\u00e9ndolas como im\u00e1genes preempaquetadas<\/a>. En este tutorial, especifica la versi\u00f3n de Node.js que deseas utilizar. Vamos a utilizar Node.js v20<\/a>.<\/p>\n
      jobs:\n  build:\n    docker:\n      - image: cimg\/node:20.5.0<\/code><\/pre>\n
      Este trabajo realizar\u00e1 varios pasos, as\u00ed que vamos a crearlos. El primer paso es checkout<\/code>, que obtiene la \u00faltima versi\u00f3n de tu c\u00f3digo del repositorio para que todas las acciones posteriores funcionen con el c\u00f3digo m\u00e1s reciente.<\/p>\n
      steps:\n  - checkout<\/code><\/pre>\n
      Ahora, pasemos al verdadero meollo del trabajo \u2014 hacer las cosas. Los pasos que siguen a checkout<\/code> cubren tareas clave: instalar dependencias, compilar el c\u00f3digo fuente, ejecutar pruebas unitarias y emplear ESLint para inspeccionar tu c\u00f3digo en busca de cualquier bandera roja.<\/p>\n
      steps:\n  - checkout\n  - run:\n      name: Install Dependencies\n      command: npm install\n  - run:\n      name: Compile Source Code\n      command: npm run build\n  - run:\n      name: Run Unit Tests\n      command: npm test\n  - run:\n      name: Run ESLint\n      command: npm run lint<\/code><\/pre>\n
      Cada paso, como las se\u00f1ales en un viaje, tiene un nombre para ayudarte a seguir lo que ocurre cuando el flujo de trabajo est\u00e1 en pleno apogeo. Esta claridad facilita la resoluci\u00f3n de problemas y garantiza que todo va por buen camino a medida que fluye tu flujo de trabajo.<\/p>\n
      Activar el Despliegue Continuo en Kinsta<\/h4>\n
      El paso final en el trabajo build<\/code> es iniciar el despliegue en Kinsta a trav\u00e9s de la API. Esto requiere dos valores: tu clave API<\/strong> y tu ID de aplicaci\u00f3n<\/strong>, que no deben ser p\u00fablicos. Estos valores se mantendr\u00e1n como variables de entorno<\/a> en CircleCI. Por ahora, vamos a definir la etapa de despliegue en el flujo de trabajo:<\/p>\n
      - run:\n    name: Deploy to Kinsta\n    command: |\n      curl -i -X POST \n        https:\/\/api.kinqsta.com\/v2\/applications\/deployments \n        -H \"Authorization: Bearer $API_KEY\" \n        -H \"Content-Type: application\/json\" \n        -d '{\n          \"app_id\": \"'\"$APP_ID\"'\",\n          \"branch\": \"main\"\n        }'<\/code><\/pre>\n
      En el c\u00f3digo proporcionado, ejecuta el comando cURL para activar el despliegue utilizando el ID de Aplicaci\u00f3n almacenado en tus variables de entorno. Recuerda que a las variables de entorno se accede utilizando la sintaxis<\/p>\n
      \"$VARIABLE_NAME\"<\/code><\/pre>\n
      Almacenamiento de Variables de Entorno con CircleCI<\/h4>\n
      Las variables de entorno son cruciales para mantener la seguridad y flexibilidad de tus flujos de trabajo de integraci\u00f3n y despliegue continuos. Para almacenar variables de entorno en CircleCI, sigue estos pasos:<\/p>\n
        \n
      1. Abre tu proyecto para ver todos los detalles de tu canalizaci\u00f3n, y haz clic en el bot\u00f3n Configuraci\u00f3n del Proyecto<\/strong>.<\/li>\n
      2. Haz clic en la pesta\u00f1a Variables de Entorno<\/strong> de la barra lateral y a\u00f1ade tus variables de entorno.<\/li>\n<\/ol>\n
        \"Almacenar
        Almacenar variables de entorno<\/figcaption><\/figure>\n
        Paso 5: Configuraci\u00f3n del Flujo de Trabajo<\/h3>\n
        Con tu(s) trabajo(s) configurado(s) y estructurado(s) en pasos organizados, la siguiente fase consiste en configurar tu flujo de trabajo<\/a>. El flujo de trabajo act\u00faa como un orquestador, guiando la secuencia de trabajos e incorporando filtros espec\u00edficos<\/a> y reglas\u00a0para determinar c\u00f3mo se ejecutan estos trabajos.<\/p>\n
        En este tutorial, crearemos un flujo de trabajo que active el trabajo de construcci\u00f3n exclusivamente cuando haya un env\u00edo o alteraciones en el c\u00f3digo de la rama main<\/code> del repositorio:<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main<\/code><\/pre>\n
        Esta configuraci\u00f3n se consigue utilizando filtros, que te permiten controlar cu\u00e1ndo se ejecuta un trabajo en funci\u00f3n de determinadas condiciones. Tambi\u00e9n puedes incorporar disparadores para programar cu\u00e1ndo debe ejecutarse el flujo de trabajo (ejemplo: diariamente a las 12 a.m. UTC):<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main\n    triggers:\n      - schedule:\n          cron: \"0 0 * * *\"<\/code><\/pre>\n
        El flujo de trabajo anterior incluye un trigger<\/code> definido con la palabra clave schedule<\/code>. La expresi\u00f3n cron \"0 0 * * *\"<\/code> corresponde a programar el flujo de trabajo a medianoche UTC todos los d\u00edas.<\/p>\n
        En una expresi\u00f3n cron, hay cinco campos separados por espacios, cada uno de los cuales representa una unidad de tiempo diferente:<\/p>\n
          \n
        1. Minuto (0-59):<\/strong> El primer campo representa el minuto de la hora, configurado en 0<\/code> para que se active al comienzo de la hora.<\/li>\n
        2. Hora (0-23):<\/strong> El segundo campo representa la hora del d\u00eda, configurado en 0<\/code> para medianoche.<\/li>\n
        3. D\u00eda del mes (1-31):<\/strong> El tercer campo significa el d\u00eda, indicado por un asterisco (*<\/code>) para cualquier d\u00eda.<\/li>\n
        4. Mes (1-12):<\/strong> El cuarto campo representa el mes, se\u00f1alado con un asterisco (*<\/code>) para cualquier mes.<\/li>\n
        5. D\u00eda de la semana (0-6, donde 0 es domingo):<\/strong> El quinto campo significa el d\u00eda de la semana, tambi\u00e9n marcado con un asterisco (*<\/code>) para cualquier d\u00eda.<\/li>\n<\/ol>\n
          Con esta configuraci\u00f3n del flujo de trabajo, puedes gestionar eficazmente cu\u00e1ndo y en qu\u00e9 condiciones se ejecutan tus trabajos definidos, manteniendo un canal de CI\/CD eficiente y optimizado.<\/p>\n
          Paso 6: Confirmar y Observar<\/h3>\n
          Una vez que tu flujo de trabajo est\u00e9 configurado correctamente, confirma los cambios en tu repositorio de control de versiones. CircleCI detectar\u00e1 autom\u00e1ticamente la presencia del archivo de configuraci\u00f3n y activar\u00e1 los flujos de trabajo definidos cuando se produzcan cambios en el c\u00f3digo.<\/p>\n
          \"Detalles
          Detalles del trabajo CircleCI.<\/figcaption><\/figure>\n
          Haz clic en el trabajo de construcci\u00f3n para revisar sus detalles. Si tienes m\u00e1s de un trabajo, aparecer\u00e1n todos en la lista. Cuando hagas clic en un trabajo, la pesta\u00f1a PASOS<\/strong> mostrar\u00e1 todos los pasos que ejecut\u00f3 el trabajo y si tuvieron \u00e9xito o fallaron.<\/p>\n
          \"Pasos
          Pasos del trabajo.<\/figcaption><\/figure>\n
          Tambi\u00e9n puedes hacer clic en cada paso para ver m\u00e1s detalles. Cuando hagas clic en el paso Desplegar en Kinsta<\/strong>, ver\u00e1s m\u00e1s detalles sobre la solicitud de la API y sabr\u00e1s si ha tenido \u00e9xito:<\/p>\n
          \"Informaci\u00f3n
          Informaci\u00f3n del paso.<\/figcaption><\/figure>\n