Cómo automatizar la implementación en páginas de GitHub con Travis CI

Descargo de responsabilidad: esta historia no está patrocinada por ninguna de las herramientas que se han descrito en el artículo (Travis-CI, Github, Github-Pages)

Ha creado un proyecto en React.js y lo ha implementado en las páginas de GitHub (¿todavía no? - cree su primer proyecto en React.js) Pero, ¿qué pasa si está haciendo cambios frecuentes en la base del código y también quiere mantener el versión implementada actualizada a la última? … ¡¡¡Te encontrarás en el tedioso proceso de ejecutar los scripts de implementación una y otra vez !!!

¿Qué pasa si el proceso de implementación se puede automatizar?

Después de una sesión rápida de búsqueda en Google, descubrí que es posible y se puede lograr con Travis CI: se puede usar una herramienta de código abierto para automatizar la implementación de varios tipos de proyectos.

Que aprenderás>

En este artículo, podrá aprender cómo implementar el sistema que activará los scripts de implementación de reacción utilizando TRAVIS-CI para implementar el proyecto en las páginas de GitHub siempre que se encuentren cambios en la rama maestra del repositorio de código. .

  • Configuración de la implantación automatizada de ' reaccionar-cartera' proyecto
  • Obtenga información sobre algunos errores frecuentes encontrados durante el proceso.
  • Conozca algunos conceptos relacionados con la ' implementación continua'

Aprendamos algunos fundamentos

¡Omita esta sección si sabe que no es de ese tipo!

Integración continua (CI) y entrega continua (CD)>

"En la ingeniería de software, la integración continua (CI) es la práctica de fusionar las copias de trabajo de todos los desarrolladores en una línea principal compartida varias veces al día" - wikipedia

En otras palabras, los desarrolladores intentarán fusionar su código de característica en la rama maestra con la mayor frecuencia posible. Seguir esta práctica permite a los desarrolladores y gerentes de producto lanzar el producto con más frecuencia.

Hay algunas versiones extendidas de las canalizaciones de CI en las que estos cambios también se prueban automáticamente, lo que hace que el código se pueda implementar en cualquier momento, se llama 'Entrega continua '. Una extensión adicional de esta canalización se denomina canalización de 'Implementación continua' , donde estos cambios de código probados se envían automáticamente a los servidores de producción. (Implementaremos la canalización de implementación continua en nuestro caso)

Travis CI>

Travis CI es un servicio de integración continua alojado que se utiliza para crear y probar proyectos de software alojados en GitHub. ¡Los proyectos de código abierto se pueden probar sin ningún cargo!

Travis CI se puede configurar agregando un .travis.ymlarchivo al repositorio. cuando Travis CI se ha activado para un repositorio determinado, GitHub notificará cada vez que se envíen nuevas confirmaciones al repositorio o se envíe cualquier solicitud de extracción, luego, de acuerdo con las reglas definidas en el .travis.ymlarchivo, Travis CI realizará los pasos que pueden ser cualquier cosa, desde ejecutar pruebas, crear la aplicación o los scripts de implementación. Travis CI ofrece una amplia gama de opciones para construir el software y, por supuesto, nuestro querido ❤️ javascriptes una de ellas.

NOTA : Github tiene un paquete de desarrollador para estudiantes disponible con un montón de funciones premium de diferentes plataformas (Travis CI es una de ellas) de forma gratuita para los estudiantes que desean aprender cosas nuevas: ¡obtenga su paquete para estudiantes ahora!

DevOps>

DevOps es un conjunto de prácticas de desarrollo de software que combina el desarrollo de software ( Dev ) y las operaciones de tecnología de la información ( Ops ) para acortar el ciclo de vida del desarrollo de sistemas al tiempo que ofrece funciones, correcciones y actualizaciones con frecuencia. El concepto de DevOps se basa en la creación de una cultura de colaboración entre equipos.

"DevOps es más que práctica, se trata de cultura"

Integración continua, entrega continua, implementación continua son algunas de las pocas prácticas clave de DevOps. Aparte de estos, los ingenieros de DevOps utilizan en gran medida el poder de la infraestructura de la nube para que el proceso de implementación sea fluido.

¡¡¡Basta de hablar !!! Hagamos algo de acción

Como ya ha implementado en las páginas de GitHub utilizando el gh-pagesmódulo de nodo, habrá una rama llamada gh-pagesen el repositorio que contiene los archivos que se implementan en los servidores de páginas de Github. Después de la integración de Travis CI, podríamos implementar el sistema donde cualquier cambio realizado por el usuario en la mastersucursal desencadenará automáticamente una compilación. Si la compilación es exitosa, se activarán los scripts de compilación que actualizarán la gh-pagesrama. El usuario será notificado sobre el estado de la compilación a través de notificaciones por correo electrónico de Travis CI

Cree una cuenta en Travis-CI>

  • Vaya a Travis-ci.com y regístrese con GitHub .
  • Acepte los términos y condiciones de Travis CI. Serás redirigido a GitHub.
  • Haga clic en el botón Activar y seleccione los repositorios que desea usar con Travis CI.
  • Agregar token de autorización (esto se hará automáticamente cuando inicie sesión con GitHub)

Agregue el archivo travis.yml al repositorio>

Este archivo contiene las instrucciones que le dicen a Travis-CI: ¿qué? ... ¿cómo? ... ¿cuándo?

NOTA : Cuando activa un trabajo en Travis-CI, se iniciará una máquina virtual con el entorno de implementación apropiado configurado en el .travis.yml

Analicemos el código -

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 activará automáticamente un trabajo siempre que se realicen algunos cambios en la rama especificada en este campo.

deploy : En este archivo, hemos declarado que usaremos el proveedor de implementación para las páginas de GitHub proporcionadas por Travis-CI, que no son más que las instrucciones de configuración para configurar el entorno para la implementación.

script: Este archivo contiene los scripts de compilación que se ejecutarán mientras se ejecuta el trabajo. Para este caso que es el script de compilación, también puede agregar scripts de prueba (cobertura de código, prueba de fusión, etc.) antes de la compilación.

cache: Travis-CI proporciona una opción para almacenar en caché los archivos y módulos de la biblioteca que serán la constante para todas las compilaciones. Los archivos almacenados en caché pueden ser utilizados nuevamente por los trabajos de compilación posteriores, lo que reduce el tiempo de ejecución del trabajo de un extremo a otro.

Todo listo>

Ohkay everything is in the place, now onwards if you commit anything on the master branch it will trigger a Travis-CI build job which will look something like in the below screenshots. You can also trigger a build manually from the Travis-CI dashboard itself.

But …. (there is always a but !! huh!!)

I am pretty sure your build dashboard will not look like the above one same as life has not been smooth we were told it would be ?. There can be infinite reasons due to which your Travis-CI dashboard is full of failed builds ( I know..I have been through this)

This is the time when your most valuable “googling” skills will come handy. I will explain what all are the errors I have faced while I was trying to create a pipeline.

  • Security errors
  • Token errors
  • Just random errors (You have to get dirty & find the solution!!)

Token errors >

If your builds are failing due permissions error then there are high chances that there is some problem with tokens. You need to go to the token URL //github.com/settings/tokens and see when it was used lately, if it shows never then you have found your culprit.

Follow the below steps,

  • Delete and create a new token
  • Add it to the Travis environment variables ( Go to job settings )
  • Re-try the build

Security errors >

There are plenty of security practices we ignore while coding & building web applications. When we run in local these security errors are not given much emphasis and often discarded as warning messages, but when we are trying to deploy the service using the Travis-CI these warnings will cause the build failure.

I will mention the errors I encountered while working on my project(I would encourage you to mention the errors you have encountered) The great thing is that most of them have their own dedicated web-pages which explain the underlying problem and offers the solutions/workarounds ( Workarounds — we all love it even knowing that we shouldn’t !! )

  • Using target=_blank in HTML tag : This is more serious security flaw than it looks. You can learn more about it here.
  • Redundancy in HTML code: There were many redundant tags/class names which were making the code look like junk.

Best way to prevent these errors is to install the es-lint plug-in in whichever text-editor you are using.

Built some project? — Share it

I am trying to build a community of developers where people can share their ideas, knowledge, work with others and find other people with similar ideology to build things together. So, if you built some project and want to share it, post it on the channel.

  • Gitter channel: //gitter.im/weekend-devs/community
  • Github Organization: //github.com/weekend-developers

Wrapping up

I would like to take a moment to acknowledge the work of the people who gave me the inspiration and knowledge to complete this article.

  • Travis CI community: for providing awesome tools for free.
  • My dearest friends: who helped me in correcting my mistakes.
  • YOU: for sticking around, I hope you had a productive time. Keep exploring and building amazing things!