Como automatizar el despliegue en GitHub-pages con Travis CI

Aviso: Este artículo no es patrocinado por ninguna de las tecnologías (compañías) que se describen aquí (Travis-CI, Github, Github-Pages)

Digamos que has creado un proyecto con React.js y lo desplegaste en GitHub-pages (aún no?? — crea tu primer proyecto con React.js -artículo en inglés). Pero qué tal si realizas cambios frecuentes al código y además quieres que la versión desplegada (producción) se encuentre siempre actualizada? ... ¡Te encontrarás con un tedioso proceso que consiste en correr scripts para el despliegue una y otra vez!!!

Qué tal si el proceso pudiera ser automatizado??

Luego de una sesión rápida de búsqueda en google, encontré que es posible y puede ser logrado usando Travis CI—una herramienta de código abierto para automatizar el despliegue de varios tipos de proyectos.

Lo que aprenderás >

En este artículo vas a aprender como implementar el sistema que disparará los scripts para despliegue de React usando TRAVIS-CI, para así lograr desplegar el proyecto a GitHub-pages, cuando sea que haya cambios por desplegar en la rama principal (master branch) del repositorio.

• A configurar el despliegue automatizado del proyecto ‘react-portfolio’
• Aprender acerca de algunos errores frecuentemente encontrados en este proceso.
• Aprenderás algunos conceptos relacionados al ‘continuous deployment’ (despliegue continuo).

Aprendamos algunos fundamentos

Brinca esta sección sino eres del tipo (fundamentos primero)!!

Continuous Integration(CI) & Continuous Delivery(CD) >

-Integración Continua (IC) y Entrega Continua (EC)

“En ingeniería de software , la Integración Continua (CI) es la práctica de integrar todos las copias funcionales de los desarrolladores en una rama central (shared mainline /trunk) varias veces al día” — wikipedia

Dicho de otra forma, los desarrolladores tratarán de fusionar (merge) sus cambios o características nuevas en la rama master tan frecuentemente como sea posible. Seguir esta práctica permite que los desarrolladores y gerentes de producto realicen el lanzamiento del producto más frecuentemente.

Existen algunas versiones extendidas de CI pipelines (canales CI) donde estos cambios también pueden ser puestos a prueba (testing) automáticamente, lo que hace que el código sea desplegable en todo momento; esto se conoce como ‘Continuous Delivery’ (entrega continua). Una extensión aún mayor a este canal o pipeline se conoce como ‘Continuous Deployment’ (Despliegue continuo), donde estos cambios ya puestos a prueba (tested) son subidos automáticamente a los servidores de producción. (Estaremos implementando el pipeline de despliegue continuo en nuestro caso).

Travis CI >

Travis CI es un servicio alojado de integración continua (CI) utilizado para desarrollar y probar (test) proyectos de software alojados en GitHub. ¡Con el que se pueden realizar pruebas a proyectos de código abierto sin cargos!!

Travis CI puede ser configurado agregando el archivo .travis.yml al repositorio. Cuando Travis CI ha sido activado para un repositorio, GitHub notificará cuando sea que nuevos commits sean realizados en el repositorio o cualquier pull request sea enviado que cumpla con las reglas definidas en el archivo .travis.yml, Travis CI ejecutará los pasos necesarios, que pueden ser— desde correr pruebas, hacer un build de la aplicación o ejecutar scripts para despliegue. Travis CI ofrece una amplia gama de opciones y lenguajes para desarrollar software y claro, nuestro amado javascript es una de esas opciones.

NOTA: GitHub tiene un  pack para desarrolladores estudiantes disponible con un montón de características premium gratuitas para estudiantes, que incluye varias plataformas (Travis CI es una de ellas) —  obtén tu "student pack" ahora!!

DevOps >

DevOps es un grupo de prácticas que combinan el desarrollo de software (Dev) y  operaciones de tecnologías informáticas (Ops) para acortar los ciclos de vida en el desarrollo de sistemas mientras se entregan características, corrección de errores y actualizaciones de manera continua y frecuente. El concepto DevOps se fundamenta en la construcción de una cultura de colaboración entre equipos.

“DevOps es más que una práctica  — se trata de una cultura”

Integración continua, entrega continua, despliegue continuo; son algunas de las prácticas clave del DevOps. Además los ingenieros DevOps aprovechan fuertemente el poder de la infraestructura de la nube para hacer el proceso de despliegue impecable.

¡Paremos de hablar!!! Pongamos manos a la obra.

Como ya has desplegado en GitHub pages usando el módulo node gh-pages, habrá una rama llamada gh-pages en el repositorio, que contiene los archivos que son desplegados a los servidores de GitHub pages. Luego de la integración de Travis CI, seremos capaces de implementar el sistema que desatará un "build" (compilación/transpilación del código) automáticamente cada vez que el usuario realice cambios a la rama master. Si el "build" es exitoso, los "build scripts" serán disparados, lo que actualizará la rama gh-pages. Travis CI notificará entonces al usuario acerca del estatus del build via correo electrónico.

Crea una cuenta en Travis-CI >

• Ve a Travis-ci.com y regístrate con GitHub.
• Acepta los términos y condiciones de Travis CI. Serás redireccionado a GitHub.
• Da clic al botón de activar (Activate), selecciona los repositorios que desea utilizar con Travis CI.
• Se agregará automáticamente un token de autorización cuando inicies sesión en GitHub.

Agrega el archivo travis.yml al repositorio >

Este archivo contiene las instrucciones que instruyen a Travis-CI — qué?..cómo?..cuándo?

NOTA: Cuando dispares una tarea en Travis-CI, este iniciará una máquina virtual con el entorno de despliegue apropiado según la configuración en el archivo .travis.yml

Revisemos el código paso a paso —

language: node_js
node_js:
  - "stable"
cache:
  directories:
  - node_modules
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $github_token
  local_dir: build
  on:
    branch: master

on : Travis-CI disparará automáticamente una tarea en cuanto haya cambios en la rama especificada en este campo.

deploy : En este campo hemos declarado que usaremos el proveedor de despliegue para GitHub pages  que nos brinda Travis-CI, que no es otra cosa que las instrucciones de configuración para preparar el entorno para realizar el despliegue.

script : Contiene los "build scripts" (código para "construir", compilar o transpilar el proyecto) que serán ejecutados mientras se corre la tarea. Para este caso puedes agregar "test scripts" (para pruebas; cobertura de código, pruebas de fusión, etc. ) antes del "build".

cache : Travis-CI nos permite guardar en caché los archivos de librerías y módulos para cada "build". Los archivos en la caché pueden ser reutilizados para los próximos builds, de esta forma podemos reducir el tiempo de ejecución de extremo a extremo en cada ejecución.

Todo listo >

Muy bien ahora todo está en su lugar, de ahora en adelante si confirmas ( commit ) algún cambio en la rama master se desatará una rutina (build) de Travis-CI que se verá más o menos como en las capturas de pantalla de abajo. También puedes disparar un build manualmente desde el panel de control de Travis-CI.

Pero …. (siempre hay un pero!! eh?!)

Estoy seguro de que tu panel de control no se verá como el de arriba tan fácilmente, tal como en la vida las cosas no siempre salen como uno espera. Puede haber infinitas razones por las cuales tu panel de control en Travis-CI se llene de builds fallidos (lo sé porque ya me ha pasado).

Este es el momento cuando tus más valiosas habilidades para "googlear" van a ser muy útiles. Explicaré todos los errores que he encontrado al intentar crear un canal o "pipeline".

• Errores de seguridad
• Errores con el token
• Errores de tipo aleatorio (Necesitarás ensuciarte las manos para encontrar la solución!!)

Errores con los tokens >

Si tus builds fallan debido a errores con los permisos entonces hay muchas probabilidades de que tenga que ver con problemas con los tokens. Necesitas ir al URL https://github.com/settings/tokens y ver cuando fue la última vez que se usaron, si muestra que no han sido usados nunca, habrás encontrado al culpable.

Para arreglarlo sigue estos pasos,

• Borra el token y crea uno nuevo
• Agrega el token a las variables de entorno de Travis (en las configuraciones de rutina/job)
• Reintenta el build

Errores de seguridad >

Hay muchas prácticas de seguridad que ignoramos al programar y crear aplicaciones. Cuando corremos nuestro proyecto localmente no les damos mucha importancia y frecuentemente los descartamos como simples advertencias, pero cuando tratamos de desplegar el servicio usando Travis-CI estas advertencias causarán que el build falle.

Hablaré de los errores que encontré mientras trabajaba en mi proyecto (y te invito a hacer lo mismo con tus errores). Lo genial es que la mayoría de estos errores tienen sus propias páginas dedicadas que explican las causas del problema y ofrecen soluciones o remedios alternativos (Remedios— nos encantan los remedios aunque sepamos que no deberíamos).

• Usar target=_blank in HTML <href> tag: Esta vulnerabilidad es más seria de lo que aparenta. Conoce más aquí.
• Redundancia en el código HTML: Hay muchas etiquetas HTML y nombres de clases redundantes, lo cual hacía que mi código luciera como un desastre.

La mejor manera de prevenir estos errores es instalar el plug-in es-lint para el editor de texto que uses.

¿Creaste algún proyecto? — Compártelo!

Estoy tratando de construir una comunidad de desarrolladores donde la gente puede compartir sus ideas, conocimientos, trabajar con otros y encontrar otras personas con ideologías similares para construir cosas juntos. Así que si construiste algún proyecto y quieres compartirlo, publícalo en el canal.

• Canal en Gitter : https://gitter.im/weekend-devs/community
• Organización Github : https://github.com/weekend-developers

Para cerrar

Me gustaría tomar un momento para reconocer el trabajo de la gente que me ha inspirado y enseñado lo que sé, lo que puedo hacer y así poder escribir este artículo.

• Comunidad Travis CI : por proveer herramientas increíbles de forma libre  gratuita.
• Mis mejores amigos: quienes me ayudaron a corregir mis errores.
• TÚ: por leer hasta aquí abajo, espero que haya sido una lectura productiva. ¡Continúa explorando y construyendo cosas increíbles!

Traducido del artículo de Dhruv Barochiya - How to automate deployment on GitHub-pages with Travis CI