Introducir CI/CD en tu proyecto puede ser un proceso desafiante. En GitLab valoramos la iteración como uno de nuestros valores clave, y en espíritu de la iteración estaremos encantados de compartir cómo GitLab puede ayudarte a trabajar gradualmente en llevar tu proyecto al paraíso del CI/CD.
Construye tu Pipeline de JS de forma incremental con GitLab
Video Summary and Transcription
GitLab soporta todo el ciclo de DevOps y utiliza herramientas como YesLint, Jest, Docker y Kubernetes. La caché y la validación son desafíos importantes en DevOps. La función de auto DevOps de GitLab simplifica Docker, Kubernetes y Helm. Hay opciones de personalización y opciones avanzadas disponibles en GitLab. El pipeline de GitLab permite optimizar las dependencias de los trabajos y la mejora continua. La duración promedio de los pipelines de construcción de front-end es inferior a 10 minutos para la mayoría de las personas. Ejecutar un proceso de construcción y pipeline en GitLab implica cálculos de trabajos, configuración de runners y lógica oculta. GitLab puede ayudar con la ejecución de front-end en Kubernetes y tiene un visualizador DAG. Lidiar con pruebas inestables en el front-end es un desafío en los pipelines de GitLab.
1. Introducción al ciclo y herramientas de DevOps
Soy Ilya Klimov de GitLab, un ingeniero senior de frontend. GitLab soporta todo el ciclo de DevOps, enfocándose en verificar, empaquetar y lanzar. En la etapa de Verificación, utilizamos herramientas como YesLint y Jest para la calidad del código y las pruebas. El empaquetado ahora se estandariza con Docker. Por último, hablaré sobre Kubernetes para el lanzamiento.
Hola a todos. Mi nombre es Ilya Klimov. Soy de GitLab, del equipo de importación gestionada. Soy un ingeniero senior de frontend, y me encantan las cosas rápidas. Así que conduzco mucho en mi auto Celes, intento utilizar mi conexión a Internet de un gigabit cuando es posible, y también me encanta GitLab por los tiempos de construcción rápidos. Y aunque los primeros dos obviamente están fuera de contexto de nuestra conferencia, estaré encantado de compartir mi conocimiento con el tercero. Así que en GitLab estamos tratando de apoyarte durante todo el ciclo de DevOps, comenzando desde la creación, donde creas tu código fuente, gestionando problemas, planificando ética, y así sucesivamente. Y terminando con protegerte de diferentes actividades maliciosas y monitoreando la salud de todos tus entornos de producción, puesta en escena, y así sucesivamente. Pero obviamente, hablar sobre todo el ciclo de DevOps llevaría una eternidad para completarse. Así que centrémonos solo en estas tres cosas. Es verificar, empaquetar y lanzar, que básicamente es de lo que se trata la integración continua y la entrega continua será justo después de eso. Entregar las cosas al lugar correcto después del lanzamiento en algún lugar de tu entorno de ejecución real.
Entonces, ¿cuál es el problema aquí? Por lo general, comienza de manera bastante simple. En la etapa de Verificación, en algún lugar, generalmente en el entorno de Node.js, ya que estamos en una conferencia de JavaScript y estamos hablando sobre el entorno de Node.js, incluso si eres un ingeniero de frontend, generalmente ejecutas algunas de tus herramientas favoritas para verificar la calidad del código, ejecutar tus pruebas. Por ejemplo, en GitLab, utilizamos YesLint y Jest para el linting. También mantenemos nuestras propias reglas de linting y para ejecutar pruebas. Hace mucho tiempo, solíamos usar Karma para hacer estas cosas, pero sinceramente, estoy muy feliz de que esos tiempos hayan pasado. Y probablemente introduzcamos más herramientas más adelante. En este paso, la idea principal es asegurarse de que todo vaya bien y que tu código se comporte como se espera. Después de eso, obviamente, necesitamos empaquetar tu código para entregarlo a producción. Y estoy bastante contento de que, bueno, llevo mucho tiempo en el desarrollo de software, más de 10 años. Y recuerdo cuando necesitabas inventar tus propias herramientas de entrega durante mucho, mucho tiempo. Así que ahora, Docker es la forma estándar de hacer las cosas. Y estoy bastante contento de tener eso. Estandarizar las cosas es genial. Y hoy hablaremos mucho sobre cómo hacer las cosas estándar, ya sea para toda la comunidad de JavaScript o solo para tu empresa. Porque cada empresa obviamente tiene su propio enfoque. Así que el último es el lanzamiento. Y aquí, las cosas no son tan estables como en la etapa de empaquetado. Para esta charla, me enfocaré un poco en Kubernetes.
2. Desafíos con las herramientas en el pipeline de DevOps
Incluso las herramientas son difíciles. Construir una buena prueba es complejo. Asegurarse de que el código se ejecute correctamente con diferentes versiones de Node.js puede llevar a errores impredecibles. La complejidad del pipeline crece rápidamente a medida que se agregan más herramientas.
3. Desafíos con Caché, Validación y Registros
En un mundo de DevOps, la caché y la validación son dos problemas importantes. La caché de los módulos de Node.js y la entrega de artefactos, como los resultados de las pruebas y los resultados de cobertura, son importantes para mejorar el rendimiento del pipeline. Los registros, como el registro de Docker o el registro de npm, varían según el tipo de lanzamiento.
4. GitLab's Auto DevOps Feature
GitLab puede ayudarte con la complejidad de Docker, Kubernetes y Helm en la primera etapa del ciclo de DevOps. La función de auto DevOps en GitLab CI es poderosa y permite una configuración sencilla. Al importar un repositorio del mundo real y utilizar el pipeline de auto DevOps por defecto, puedes construir y probar automáticamente tu aplicación. GitLab utiliza el paquete de compilación de Heroku para proporcionar diversas funciones como verificaciones de calidad de código, análisis de seguridad y más. Las características disponibles dependen del nivel de tu solución de GitLab. GitLab también tiene una herramienta de calidad de código automática que detecta YesLint y ejecuta comprobaciones específicas para ello. La configuración cero es la predeterminada, pero es posible personalizarla adicionalmente.
Así que, comencemos con el primer paso, que es el auto DevOps. Hablando francamente, el poder de GitLab CI fue la principal razón por la que me uní a GitLab hace mucho, mucho tiempo. Ya era un gran fanático de él tres años antes de unirme a GitLab, y estoy muy contento con la función de auto DevOps, e incluso feliz de que, como ingeniero de front-end, haya contribuido en Git. Así que, supongamos que simplemente importas algún repositorio del mundo real. He elegido el ejemplo de aplicación del mundo real de Vue solo porque mi pila principal es Vue.js, y hago clic en la herramienta de auto pipeline de DevOps predeterminada en la configuración del nuevo proyecto, y la magia sucede. Tienes este pipeline, que automáticamente tendrá pasos de construcción, calidad de código, pruebas de YesLint, y así sucesivamente. ¿Qué está sucediendo? La razón es, probablemente, si llevas suficiente tiempo en el desarrollo de JavaScript, probablemente hayas implementado tu aplicación en Heroku y conozcas toda esa magia. Simplemente haces git push, y todo funciona. Bueno, estamos aprovechando un poco esa oportunidad. Utilizamos el paquete de compilación de Heroku para comprender cómo construir tu aplicación y proporcionarte toneladas de cosas diferentes. Podemos probar automáticamente que no estés filtrando secretos, o tal vez olvidaste eliminar tu clave de Amazon Web Services del repositorio de Git. Te lo haremos saber. Tal vez tengas un código deficiente en calidad, o tal vez tu código de front-end no sea tan seguro. Tenemos toneladas de cosas para producir, que aparecerán automáticamente en tu pipeline. Solo para que sepas que lo que tendrás dependerá en gran medida del nivel que tengas en tu solución independiente o SaaS de Git. Cuanto más pagues, obviamente, más cosas obtendrás. Por ejemplo, como mencioné, contribuí a la herramienta de calidad de código automática, que detectará automáticamente YesLint y ejecutará varias comprobaciones específicas de YesLint. YesLint de seguridad, YesLint relacionado con react, y eso contribuyó a la selección adecuada de la versión de YesLint. Si ya tienes una configuración de YesLint en tu repositorio, también ejecutaremos tus comprobaciones, obviamente. Pero obviamente, la configuración predeterminada no es suficiente para todos. La configuración cero es genial. Todos lo hacen. Cada herramienta de compilación, cada herramienta que quiere tener éxito,
5. Customization and Advanced Options
AutoDesarrollo permite una rápida prueba de integración continua. La personalización es sencilla con la configuración de variables de entorno. Puedes configurar los pasos de construcción, desactivar ciertos pasos y habilitar/deshabilitar aplicaciones de revisión. GitLab fomenta las contribuciones y el aprendizaje. Utiliza la configuración de auto Desarrollo y la interfaz de usuario de GitLab como inspiración. Considera el proyecto untampermylogfile para la seguridad. Explora frontend.GitLab.CI.YAML en el repositorio principal de GitLab para opciones avanzadas y optimización de velocidad.
6. Optimización de las dependencias de trabajo en el pipeline
Y por lo general, se ejecuta uno por uno. Estamos dividiendo nuestros trabajos por etapas. Preparar, construir, imágenes, arreglos, prueba. Nuestro trabajo que ejecuta pruebas necesita un trabajo de arreglos de front-end. YesLint y GraphQL Verify son dos trabajos. YesLint se puede mover a una etapa anterior, pero se requiere que esté en la etapa de prueba. La nueva característica de grafo acíclico dirigido permite especificar las dependencias de trabajo. El pipeline ahora tiene diferentes dependencias entre sí.
7. Optimización del Pipeline y Mejora Continua
Utilizamos la interfaz de GitLab para diversas tareas, como ejecutar pruebas lo antes posible y desplegar el trabajo de revisión. Las compilaciones de imágenes de Docker activan actualizaciones automáticas de capturas de pantalla y escaneo de contenedores. El uso de un DAG en GitLab simplifica el pipeline y lo hace más fácil de descubrir. Considera la personalización completa del pipeline o contribuir a la plantilla de auto DevOps para tu empresa. La mejora del pipeline es un proceso continuo. No dudes en contactarnos en Twitter si tienes alguna pregunta o sugerencia. ¡Gracias por unirte a nosotros!
Por ejemplo, no podíamos calcular la cobertura antes de que se completaran todas nuestras pruebas, pero queremos ejecutarlas lo antes posible. Por ejemplo, queremos ejecutar las pruebas solo después de entender cuáles pruebas queremos ejecutar. Estamos invirtiendo mucho tiempo en no probar cosas que definitivamente no han cambiado y en muchos otros enfoques. Si aún piensas que no lo necesitas, parece ser otro campo para mi pequeño proyecto. Aún lo utilizamos en la interfaz de GitLab y mira, es bastante simple y aún brillante. Por ejemplo, el trabajo de revisión, que permite a las personas verificar las cosas en una URL separada y desplegar, se ejecutará tan pronto como se construya nuestro storybook. Sí, probablemente podríamos hacer un mejor trabajo al colocar las palabras en una línea, pero hey, estamos mejorando constantemente. Lo mismo ocurre tan pronto como se construye una imagen de Docker, podríamos ejecutar la actualización de capturas de pantalla, que se actualizará automáticamente, este es un trabajo manual. Podemos realizar una verificación visual para asegurarnos de que nuestra captura de pantalla se vea igual y un escaneo de contenedores para asegurarnos de que no se esté ejecutando nada malicioso. Esto sigue siendo impresionante y se siente como una mejora significativa, porque es tan fácil, al menos para mí, entender el enfoque de las necesidades. Anteriormente, hace mucho tiempo, cuando no estaba trabajando en GitLab, dividía mis cosas en muchas etapas diferentes solo para asegurarme de que podía poner algo en las cosas que tenían sentido para mí. Mira tu código, tal vez también tengas todo esto, como tener la primera etapa, como prueba uno, prueba dos, prueba tres, prueba cuatro, deshazte de eso. Con un DAG, puedes hacer que tu proceso sea fluido y bastante fácil de descubrir, porque es un gráfico, a todos los ingenieros de software les encanta un gráfico, creo. Si hay algo que probablemente deberías probar en GitLab, esto es, obviamente, el DAG, 10 de 10 puntos, lo recomiendo.
Entonces, ¿qué hacer a continuación? Probablemente lo hayas optimizado y estés satisfecho con los resultados, y hay una cosa más por hacer. Una cosa más por hacer depende de lo que quieras, en realidad. Probablemente podrías optar por un pipeline personalizado completo, que es lo que estamos haciendo actualmente en GitLab, porque a veces queremos tareas inusuales y requisitos habituales y podrías querer ser un verdadero ingeniero de DevOps, pero hay otra opción que te sugiero considerar. Si estás ejecutando múltiples proyectos en tu empresa, por ejemplo, mi empresa anterior era una empresa de externalización, por lo que creamos muchos proyectos bastante similares, solo descubre en nuestra documentación cómo puedes contribuir a una plantilla de auto DevOps específica para tu empresa, asumiendo que estás ejecutando una versión independiente de GitLab. Y si haces esto, probablemente podrías ahorrar suficiente tiempo para otras personas en tu empresa. Así que recuerda que la mejora del pipeline es un proceso constante y no una tarea única. Cada vez que eches un vistazo a tu pipeline, descubre las cosas que van lentas. Y si tienes alguna pregunta, alguna sugerencia, no dudes en contactarme en Twitter, Xanth-UA. Y nunca dejes de mejorar tus flujos. Gracias. Deja el micrófono, Ilja. Qué gran charla. Muchas gracias por unirte a nosotros. Es realmente excelente.
8. Duración Promedio del Pipeline de Construcción de Front-End
¿Cuál es la duración promedio de tu pipeline de construcción de front-end? La mayoría de las personas tienen un pipeline de menos de diez minutos, ya sea porque tienen un proyecto pequeño o porque su pipeline está súper optimizado. Sin embargo, hay un aumento gradual en el rango de 10 a 30 minutos.
9. Duración del Pipeline y Adopción de CI
No muchas personas se han unido al club de más de 30 minutos para los pipelines. Los pipelines pueden variar desde 40 minutos hasta seis horas, dependiendo de la suerte y la escala. Las categorías de menos de 10 minutos y de 10 minutos a 30 minutos están ambas en un 40%, lo que indica que la mayoría de las personas están utilizando CI.
10. Running a Build and Pipeline Process
Recordemos cuál es el tiempo de espera para ejecutar una compilación. Preguntas de nuestros espectadores. Alexa pregunta, ¿qué sucede en segundo plano cuando se activa un pipeline, especialmente con los pipelines de GitLab? Sí, seguro. Es bastante simple y a la vez complicado. Internamente en GitLab tienes el archivo .gitlab.CI.yaml que especifica o no especifica ciertos requisitos para la máquina de compilación. GitLab marca, como, hey, aquí está el pipeline. Dependiendo de ciertas condiciones, quién activó el trabajo, por qué se activó el trabajo, y así sucesivamente, calcula qué trabajos se ejecutarán en este pipeline. Después de eso, todos los runners están enviando señales a GitLab. Entonces, cada runner, puede ser el mismo o no, dependiendo de cuántos tengas, está clonando tu repositorio y luego ejecutando la descripción del trabajo. El pipeline es grande, está compuesto por los trabajos. También, una cosa que probablemente la gente a veces no se da cuenta, es que incluso si estás utilizando la versión gratuita en gitlab.com y te quedas sin nuestro límite, creo que son 2000 minutos de CI por mes para la versión gratuita, puedes comprar minutos o simplemente configurar un runner conocido en cualquier PC virtual o de hardware que tengas, registrarlo en gitlab.com y aún podrás compilar tu proyecto en tu hardware o en tu, lo que prefieras, Amazon, Google Cloud, Azure, y seguirás estando en la versión gratuita. Así que siempre puedes tener el control de tu hardware. Por qué digo que es complicado es porque creo que suena bastante fácil, pero en realidad hay mucha lógica oculta, como reintentos, entender que los trabajos están bloqueados porque a todos les encantan los ciclos infinitos, reintentar el trabajo si el runner falla, tener cachés compartidas para que cuando tu caché esté en un runner, se pueda obtener de forma segura desde otro. Es una parte importante escrita en lenguaje Go y Ruby, y hay mucho código oscuro, al menos desde mi perspectiva de front-end, que une todo esto. Entendido. Esa es una excelente respuesta.
QnA
Running Front-End in Kubernetes and DAG Visualizer
¿Vale la pena ejecutar el front-end en Kubernetes? Depende de lo que estés optimizando, ya sea el costo o la velocidad. Kubernetes se escala bien desde proyectos pequeños hasta configuraciones enormes como GitLab. Pero si tu proyecto es pequeño, GitLab aún puede ayudarte. Puedes optimizar tu pipeline según tu etapa actual. El costo no es un problema. El visualizador DAG está disponible en las versiones Enterprise de GitLab introducidas en la versión 12.2 y posteriores.
Challenges with Flaky Tests in GitLab Pipelines
La parte más difícil de los pipelines de GitLab es lidiar con pruebas inestables en el frontend. Debido a la naturaleza asíncrona del desarrollo frontend, es fácil escribir pruebas que no esperan ciertas condiciones, lo que lleva a pruebas fallidas cuando el entorno de CI no está sincronizado. Desafortunadamente, no hay una solución perfecta para garantizar la confiabilidad de las pruebas, y puede ser frustrante cuando las pruebas fallan intermitentemente.
De acuerdo, muy bien. Así que, solo una pregunta más. Ahora es el momento, gente. Todavía tenemos a Ilya aquí con nosotros, así que dejen sus preguntas en el DevOps Talk Q&A, y no olviden que Ilya estará disponible en su sala de conferencias y en el chat espacial, así que definitivamente pueden hablar con él allí. Pero una pregunta más. Entonces, ¿cuál dirías, Ilya, que es la parte más difícil de los pipelines de GitLab, si tuvieras que pensarlo? Oh, la parte más difícil de los pipelines de GitLab son las pruebas inestables, si hablamos del frontend, porque, debido a la naturaleza asíncrona del frontend, es muy fácil escribir una prueba que no espera algo, sino que simplemente confía en que algo en tu entorno de CI es lo suficientemente lento, o incluso lo suficientemente rápido. Y eso significa que estás cambiando algunas cosas en la configuración de CI, y de repente ves muchas pruebas fallidas, y piensas, hey, probablemente arruiné mi configuración, pero no es así. Desafortunadamente, no tengo una solución perfecta para asegurarme de que tus pruebas sean correctas, y esto no es realmente una pregunta sobre pipelines, pero para mí esta es la parte más oscura de cualquier cosa relacionada con el frontend en los pipelines de GitLab. Porque, bueno, cuando falla cada vez, sabes qué hacer. Cuando falla a veces, todos están molestos y, hey, nadie está feliz cuando dices, oh, falló. Intentemos volver a intentarlo y esperemos lo mejor.
Entiendo. Gente, ahora es el momento. ¿Alguna pregunta final para Ilya? Esperaremos unos segundos. A la gente le lleva tiempo. Muchos dicen, gracias. Excelente charla. Buena charla. Gracias. Muy útil. Así que, deberías estar feliz, Ilya. Tuviste una charla realmente genial. Así que, felicidades por una sesión realmente excelente. Creo que vamos a terminar. Muchas gracias por estar con nosotros y compartir tus conocimientos sobre GitLab. Ilya estará disponible en la sala de conferencias y en el chat espacial y en Discord. No dudes en comunicarte y hacer más preguntas que puedas tener y que no hayan sido respondidas en vivo durante la sesión. Muchas gracias. Gracias.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
In this workshop the participants will be introduced to the basic fundamentals of Continuous Integration and Continuous Delivery/Deployment. Participants will learn the core principles of CI/CD and have the opportunity to reinforce what they’ve learned in a hands on workshop featuring the CircleCI platform. The workshop will demonstrate CI/CD build configuration, code commits, commit builds, code testing and packaging. The participants will leave with a hands-on experience and understanding of what it takes to CI/CD.
Table of contents- Introduction to the topic of CI/CD, and motivation for it- How different kinds of JavaScript projects are built and deployed (from static sites to APIs)- Overview of common manual steps & how we might automate them- Implementing a CI/CD pipeline from 'scratch'- Overview of CircleCI orbs- Testing across multiple versions of Node- Debugging builds with SSH- Caching dependencies- Security / vuln scanning- Deploying to various outlets
Prerequisites- Code and git installed- GitHub account
github.com/CircleCI-Public/cicd-workshop-js