¿Tu equipo ha invertido mucho esfuerzo en empaquetar código manualmente? Si es así, ya es hora de que utilices GitHub Actions Artifacts, para que tu equipo pueda automatizar este procedimiento. Al mismo tiempo, reducirás la variabilidad en las versiones y ahorrarás tiempo para trabajar en otras tareas cruciales.
GitHub Actions Artifacts te permite transferir de manera efectiva datos de un trabajo activo a otro, eliminando las tareas repetitivas y que consumen mucho tiempo en la implementación. En este tutorial, aprenderás cómo usar y administrar artefactos para implementar una aplicación de React en Netlify.
¡Sigue leyendo y comienza a crear implementaciones consistentes!
Requisitos previos
Este tutorial será una demostración práctica. Si deseas seguirlo, asegúrate de tener una aplicación de React simple y un repositorio de GitHub. Este tutorial utiliza un repositorio de la Aplicación de Contador de React.
Creando un flujo de trabajo de CI/CD
Cuando un trabajo en un flujo de trabajo de GitHub Actions finaliza, también lo hacen los datos que procesan y generan. Los datos llamados artefactos se pueden conservar en la página del repositorio después de que los trabajos se hayan completado y se pueden cargar utilizando la acción upload-artifact.
Pero antes de usar los artefactos de GitHub Actions para tus versiones de implementación, primero necesitas construir un flujo de trabajo de CI/CD para tu aplicación:
1. Crea una carpeta .github en el directorio raíz de tu aplicación y crea una subcarpeta llamada workflows.
2. A continuación, crea el archivo de flujo de trabajo (un archivo .yml) en la carpeta workflows. Puedes nombrar el archivo como quieras. Pero para este tutorial, el archivo se llama ci.yml.
La estructura de recursos de tu archivo de flujo de trabajo debería verse como la siguiente.
3. Agrega el siguiente código al archivo ci.yml y guarda los cambios. El código a continuación crea un flujo de trabajo llamado CI con un trabajo de compilación para la aplicación.
4. Ahora, agrega y confirma los cambios, y súbelos a tu repositorio remoto de GitHub.
Si la subida fue exitosa, verás el commit con un círculo de color ámbar, como se muestra a continuación, indicando que el flujo de trabajo se está ejecutando.
5. Haz clic en la pestaña Actions para ver el flujo de trabajo.
6. Haz clic en cualquier trabajo de compilación en el lado izquierdo y expande el trabajo de compilación de la aplicación. Verás los datos del trabajo de compilación (archivos estáticos) generados. Estos son los archivos que necesitas para el despliegue.
Estos archivos generados se pierden cuando se elimina el servidor que ejecuta el trabajo (o cuando el trabajo termina). Dado que necesitarás estos archivos para el despliegue, implementarás un paso para tomar estos archivos y cargarlos como un artefacto en la siguiente sección.
7. Por último, agrega el siguiente código después de ejecutar las pruebas en el bloque de pasos de tu trabajo de construcción.
El código a continuación carga un artefacto llamado “production” desde el directorio de construcción utilizando la acción “actions/upload-artifact@v3”.
Los archivos generados se pierden cuando el servidor que ejecuta el trabajo se desecha o cuando el trabajo termina. Dado que necesitarás estos archivos para implementar, el código a continuación implementa un paso para llevarlos y cargarlos como un artefacto.
Configuración de un período de retención de artefactos personalizado
Los artefactos se almacenan durante 90 días de forma predeterminada antes de ser borrados. Pero dependiendo del tipo de repositorio, puedes cambiar este período de retención.
A continuación se muestran los valores que puedes establecer para personalizar un período de retención de artefactos:
- Repositorio privado: cualquier valor entre
1y400días. - Repositorio público: cualquier valor entre
1y90días solamente.
Para establecer un período de retención de artefactos personalizado, actualiza tu archivo YAML de flujo de trabajo incluyendo retention-days: 2 en tu paso # Cargar Artefacto.
Alternativamente, configura el período de retención de artefactos de la siguiente manera a través de GitHub:
- Navega a la pestaña Configuración en el repositorio.
- Haz clic en Acción (panel izquierdo) para expandir el menú desplegable y selecciona General.
- Ingresa el número de días que deseas mantener el artefacto en la sección de Retención de artefactos y registros que se muestra a continuación, y haz clic en Guardar.
Importar un proyecto desde un repositorio de Git a Netlify
El artefacto de construcción ahora se puede acceder en otro trabajo en el flujo de trabajo al ser descargado porque tienes un paso para cargar el artefacto, reduciendo el tiempo de finalización del flujo de trabajo. Agregarás una tarea de implementación a tu flujo de trabajo, y uno de los pasos en ese trabajo descarga el ítem cargado.
Pero antes de actualizar tu flujo de trabajo, configurarás Netlify para la implementación de la aplicación:
1. Abre tu navegador web favorito, accede a Netlify e inicia sesión con tu cuenta de GitHub.
2. Una vez iniciada la sesión, haz clic en Agregar nuevo sitio en la sección de Sitios, y selecciona Importar un proyecto existente para iniciar la importación de tu proyecto.
3. Haz clic en GitHub ya que usarás el repositorio que creaste para este tutorial en GitHub. Aparecerá una ventana emergente donde autorizarás el acceso de Netlify a tu identidad de GitHub.
4. Una vez autorizado, busca y selecciona el repositorio del cual deseas importar el proyecto.
5. En la nueva página, configura los ajustes básicos de construcción para el sitio, como la rama desde la cual deseas implementar y el comando de construcción. Pero como estarás implementando utilizando acciones de GitHub, deja los campos de comando de construcción y directorio de publicación en blanco.
Haz clic en Deploy site después de configurar la configuración de construcción, y verás que el sitio se está implementando. Una vez implementado, se generará un enlace en vivo para el sitio.
Si dejaste el campo de comando de construcción en blanco, ir al enlace mostrará una página 404 ya que la aplicación no se construyó.
6. A continuación, haz clic en Configuración del sitio para revisar la información del sitio (paso seis).
7. Por último, en la página de Detalles del sitio, toma nota del ID del sitio debajo en la sección de Información del sitio para su uso posterior.
Creación de un token de acceso personal
Ahora que tienes tu ID de sitio, necesitas obtener un token de acceso. El token de acceso personal otorgará acceso a tu cuenta de Netlify para que las acciones de GitHub realicen la implementación en Netlify.
1. Haz clic en tu icono de perfil (arriba a la derecha) y elige Configuración de usuario para acceder a la configuración de tu perfil.
2. En la nueva página, haz clic en Aplicaciones (panel izquierdo) → Nuevo token de acceso (en la sección de Tokens de acceso personal) para iniciar la creación de un nuevo token de acceso.
3. En la nueva página, ingresa un nombre descriptivo para el token y haz clic en Generar token.
4. Ahora, copia el token a un lugar seguro.
Seguridad del ID del sitio y del token de acceso mediante la creación de secretos
Ahora que tienes el ID del sitio y el token de acceso de Netlify, puedes agregarlos a tu repositorio para que se utilicen en el flujo de trabajo de las acciones. Pero primero, tendrás que asegurar tu ID de sitio y tu token de acceso mediante la creación de secretos.
1. Navega a tu repositorio de GitHub en tu navegador.
2. A continuación, haz clic en la pestaña Configuración → Secretos (panel izquierdo) → Acciones (debajo de Secretos) para acceder a la lista de acciones disponibles en tu repositorio.
3. Haz clic en el botón Nuevo secreto de repositorio en la página de secretos de Acciones para iniciar la adición de un secreto.
4. Ahora, proporciona un Nombre descriptivo para el nuevo secreto. Pero este tutorial utiliza NETLIFY_AUTH_TOKEN como nombre de secreto.
Agrega tu token de acceso como Valor y haz clic en Agregar secreto para crear el nuevo secreto.
5. Por último, repite el paso cuatro, pero esta vez, agrega un secreto para el ID de tu sitio.
Una vez agregados, verás los secretos en la sección Secretos del repositorio, como se muestra a continuación.
Descarga e Implementación de Artefacto en Netlify
Ahora que tu sitio de Netlify y secretos están configurados, incluirás un paso en tu flujo de trabajo para implementar en Netlify usando tus secretos.
1. Actualiza tu flujo de trabajo agregando el código a continuación que contiene el trabajo de implementación.
El siguiente código contiene pasos para descargar el artefacto cargado y otro paso para implementarlo en Netlify.
Puedes encontrar el código completo del archivo ci.yml en el repositorio de GitHub de ATA.
2. A continuación, añade y envía los cambios al repositorio remoto.
Deberías ver el último commit que se ejecuta en la página de flujos de trabajo en el repositorio, como se muestra a continuación.
Una vez enviado, haz clic en la última ejecución para ver más detalles.
Si los trabajos se ejecutan correctamente, verás una marca de verificación verde junto a los trabajos y el artefacto de producción en la parte inferior de la página.
3. Ahora, haz clic en el trabajo de implementación (panel izquierdo) y expande la tarea de Implementación en Netlify. Verás la salida del paso, que contiene la URL del sitio web.
Haz clic en la URL del sitio web para verificar que el sitio funcione y sea accesible.
La URL se abrirá automáticamente en una nueva pestaña de tu navegador web, como se muestra a continuación. Esta salida indica que tu sitio está funcionando correctamente.
Eliminación de Artefactos No Utilizados para Ahorrar Espacio
Después de cada lanzamiento, se utiliza más espacio en disco cuando se cargan y descargan nuevos lanzamientos. ¿Cómo se ahorra espacio? Eliminar artefactos no utilizados es la solución más viable. Debes limitar la cantidad de artefactos de lanzamiento que residen en cada servidor para evitar la acumulación de miles de lanzamientos y un disco lleno.
Además de utilizar la configuración del período de retención para eliminar artefactos después de cierto tiempo, también puedes eliminar el artefacto desde la página de flujos de trabajo en GitHub:
En tu página de flujo de trabajo, haz clic en el ícono de eliminar junto al artefacto para eliminarlo.
Ahora, haz clic en OK en el cuadro de diálogo (el más superior) para confirmar la eliminación del artefacto.
Observa abajo que el artefacto ya no está en la página, confirmando que ha sido eliminado correctamente.
Conclusión
Has visto cómo los artefactos simplifican el desarrollo de automatizaciones más intrincadas en las que un flujo de trabajo proporciona información a otro. En este punto, deberías tener una mejor comprensión de los artefactos de GitHub Actions y cómo pueden ser utilizados para tus lanzamientos de implementación.
Con este nuevo conocimiento, ¿por qué no aprovechar las acciones de GitHub para la automatización de flujo de trabajo de tu próximo proyecto?
Source:
https://adamtheautomator.com/github-actions-artifacts-2/