Automatizar el proceso de envío a producción es una de las prácticas más valiosas en el desarrollo de software moderno. Configurar un flujo de integración continua (continuous integration) permite que cada cambio en el código pase por pruebas automáticas y, solo cuando todas se cumplen, el proyecto se despliega sin intervención manual. A continuación se explica paso a paso cómo lograrlo con Travis CI y GitHub Pages.
¿Qué es Travis CI y por qué usarlo en tu proyecto?
Travis CI es una plataforma que se conecta a tu repositorio de GitHub y actúa como un trigger o función que escucha cada cambio que realizas en tu código [0:22]. Cuando detecta un nuevo commit, clona el repositorio, prepara el entorno en una máquina virtual, ejecuta las pruebas definidas y, si todas pasan, procede con el deploy a producción [1:08].
Entre los destinos de producción compatibles se encuentran Heroku, GitHub Pages y otras plataformas de hospedaje. En este caso se utiliza GitHub Pages para publicar el proyecto Platzi Store [1:22].
Travis CI ofrece una versión gratuita para proyectos open source o repositorios públicos, lo que permite conectar proyectos sin costo alguno [2:02]. Para repositorios privados o empresariales, existen planes de pago que conviene evaluar según las necesidades.
¿Cómo se crea el archivo de configuración .travis.yml?
El primer paso concreto es crear un archivo llamado .travis.yml en la raíz del proyecto [2:30]. Este archivo contiene toda la configuración que Travis necesita para saber cómo ejecutar el entorno:
- language: se establece como
node_js, indicando que el proyecto trabaja con Node [3:10].
- cache: se configura para los archivos de NPM, optimizando los tiempos de instalación en el servidor [3:18].
- node_js: se especifica la versión, en este caso la
12 [3:30].
- git depth: define la profundidad de acceso al repositorio, con un valor por defecto de tres capas [3:40].
Después se añaden los scripts que Travis debe ejecutar. Los dos fundamentales son test y build [3:55]. Un detalle importante: Travis trabaja internamente con Yarn como manejador de paquetes, pero Yarn y NPM son totalmente compatibles, así que no es necesario modificar nada en el proyecto [4:08].
¿Cómo se configura el deploy hacia GitHub Pages?
Una vez que los scripts se ejecutan correctamente, se define la sección de deploy [4:30]:
- provider: se indica
pages para GitHub Pages.
- local_dir: el directorio de salida del compilado, que debe coincidir con el path definido en
webpack.config [5:00].
- target_branch: se establece como
gh-pages, el branch donde GitHub Pages busca los archivos para servir el sitio [5:20].
- on branch: se configura
master como el branch que Travis escucha para disparar el proceso [5:50].
GitHub Pages permite servir contenido desde master o desde un branch específico como gh-pages. Al usar este segundo enfoque, Travis crea automáticamente el branch y sube los recursos compilados.
¿Cómo generar y configurar el GitHub token?
Para que Travis tenga permisos de escritura sobre el repositorio, es necesario generar un personal access token en GitHub [6:10]. El proceso es el siguiente:
- Ir a los settings de tu cuenta en github.com.
- Acceder a la sección de developer settings y generar un nuevo personal access token [6:30].
- Asignar un nombre descriptivo, como "Travis CI JS".
- Otorgar permisos de acceso al repositorio y a los hooks de lectura [6:45].
- No habilitar permisos de eliminación, ya que un trigger mal configurado podría borrar el repositorio [6:55].
Una vez generado el token, se copia y se añade como variable de entorno en la configuración de Travis [7:10]. El nombre de la variable debe ser GITHUB_TOKEN. Esta variable queda protegida dentro de la plataforma y Travis la utiliza cuando necesita enviar los archivos compilados al repositorio [7:25].
Con toda esta configuración lista, el flujo queda preparado: cada push a master dispara las pruebas automáticas y, al cumplirse todas, el proyecto se despliega en GitHub Pages sin intervención manual. ¿Ya has implementado integración continua en tus proyectos? Comparte tu experiencia y las herramientas que utilizas.
