Cómo usar Travis CI y GitHub para el trabajo pesado de su flujo de trabajo de desarrollo web

Todo se vuelve más fácil con la integración continua a través de Travis CI

Es común piratear aplicaciones en CodePen cuando estás comenzando. Pero habrá un momento en que querrás publicar tus propias aplicaciones web en todo el mundo. Podrían ser proyectos paralelos o proyectos para un cliente. Un buen flujo de trabajo de desarrollo hará una gran diferencia en este punto.

Vamos a configurar un flujo de trabajo de desarrollo utilizando las siguientes herramientas:

  • crear-reaccionar-aplicación
  • npm scripts
  • Travis-CI

Conectaremos a Travis CI y GitHub juntos. Al final, obtendremos una insignia bonita y brillante como la que se muestra a continuación.

Pero más que el aspecto, la insignia significa una función. Es una señal de que Travis CI prueba, crea y publica nuestros compromisos con GitHub. Travis CI publica solo si las pruebas pasan.

Prepárese para colocar estas insignias en su repositorio:

He organizado todo el flujo de trabajo en etapas. Una sesión debe hacer para cada etapa. Eso es dentro de unos 50 minutos.

Etapa 1: Ejecute create-react-app localmente

Prepara tu repositorio git

Lo primero es crear un nuevo repositorio en GitHub. Si aún no tiene una cuenta, ahora es el momento de registrarse. Los repositorios públicos son gratuitos. Cuando crea un nuevo repositorio, GitHub le permite crear archivos para .gitignore, licencia y README.md.

Si está comenzando con Git por primera vez, puede leer este libro gratis en línea. También hay una sección de ayuda en GitHub.

Así es como se verá nuestro nuevo repositorio:

Muy bien, pongámoslo en nuestra terminal. ¿Ves ese botón verde brillante en la imagen de arriba que muestra Clonar o descargar? Eso nos dará la URL del repositorio. En su terminal, ejecute este comando:

git clone git@github.com: pineboat / react-continuo-despliegue.git

Ese comando descargará el contenido del repositorio en un nuevo directorio. Nombra el directorio igual que el repositorio. En nuestro caso, el nombre del directorio será react-continuo-despliegue.

Si desea asegurarse de que un enlace al repositorio original esté listo, use el comando:

git remote -v

Ahora que estamos listos para impulsar nuestros cambios a GitHub, vamos a poner en funcionamiento React.

En funcionamiento con create-react-app

Iniciar un nuevo proyecto de reacción desde cero puede llevar más tiempo de lo esperado. Especialmente cuando no está utilizando ningún andamio predefinido. Existen varias soluciones que podemos usar para comenzar. Elegí la aplicación oficial Create React porque la probé primero y me quedé con ella. Cuando no tiene que administrar micro sus configuraciones, le da un comienzo limpio para que pueda comenzar a codificar.

Como muestra el archivo README.md del repositorio, solo tiene que instalarlo una vez a nivel mundial. Luego puede usarlo para andamiar tantos proyectos como desee.

Para instalarlo escriba:

npm install -g create-react-app

Una vez que esté instalado, puede ejecutarlo desde cualquier directorio para crear una nueva aplicación. Pongamos el nombre de nuestro repositorio:

crear-reaccionar-aplicación reaccionar-despliegue continuo

Eso no creará una nueva carpeta ya que ya tenemos la carpeta creada por Git. En su lugar, comenzará a instalar los necesarios node_modules y scripts de andamio dentro de la carpeta existente.

Si desea una aplicación nueva, puede usar:

crear-reaccionar-aplicación nombre-aplicación-elegante

Luego, deberá crear un repositorio de Git y conectarlo a GitHub. Eso no es muy difícil. Puede usar esta página de ayuda de GitHub.

¿Ya ha terminado esa instalación? No debería tomar más de 5 minutos. Me llevó unos 15 minutos. No dejes que eso te asuste. A menos que sea como yo, y esté utilizando una tarjeta de datos 4G de 150 mb / s que le brinda aproximadamente 512 kbps de velocidad de descarga en su mejor día.

Lo bueno es que la instalación movió nuestro antiguo archivo README.md a un lado. La terminal muestra este dulce mensaje:

Usted tenía un archivo `README.md`, lo cambiamos de nombre a` README.old.md`

El terminal también debería haberle mostrado la enorme lista de paquetes en una estructura de árbol. Esto puede parecer aterrador. Pero la mayoría de estos son dependencias entre paquetes. Están ahí para ayudarlo a desarrollar su aplicación. El producto final solo tendrá los archivos JavaScript necesarios, como react.js y react-dom.js. Iremos allí en un rato.

Por ahora, despertemos nuestra aplicación. Una vez finalizada la instalación,
create-react-app nos dará una lista de comandos que serán útiles.

Aquí hay un catálogo de referencia:

  • npm start
    Inicia el servidor de desarrollo.
  • npm run build
    Agrupa la aplicación en archivos estáticos para producción
  • prueba npm
    Inicia el corredor de prueba.
  • npm ejecutar expulsar
    Elimina la compilación de dependencia única de su proyecto Ver aquí
  • npm ejecutar desplegar
    Para implementar la compilación en la rama gh-pages

Los comandos de nodo incorporados npm start y npm test se reconocen por defecto. Debe ejecutar otras secuencias de comandos, como compilar, expulsar e implementar utilizando un indicador de ejecución adicional:
npm ejecutar script_name

Agregaremos algunos más en el proceso a medida que avanzamos. Ahora es el momento de cargar nuestro sitio en un navegador. Ingrese al directorio de la aplicación y ejecute:

npm start

Como por arte de magia, se abre una nueva pestaña del navegador y ves una buena rueda de React girando. La vista debe ser un desafío para crear la próxima mejor aplicación que Internet está a punto de presenciar.

Entonces esto es lo que obtenemos:

Es un GIF (formato de intercambio de gráficos) bastante bueno, ¿no? Excepto por mi cursor entrando. Capturé este GIF con una herramienta llamada Peek. Compruébalo cuando lo necesites.

¡Bien hecho! Espero que no haya tomado más de 45 minutos. Si tiene problemas, preste atención a los mensajes de error e intente solucionarlos.

Cuando esté cerca del punto de frustración, diríjase a Stack Overflow para obtener ayuda. O deja tus preguntas en los comentarios a continuación.

Antes de piratear cualquiera de los archivos, confirmemos el código y envíelo al repositorio de GitHub. Estos comandos harán:

estado git
git add --all git commit -m "Andamio inicial, este es tu propio mensaje"
  • estado git
    Muestra una lista de los cambios que hemos realizado.
  • git add
    Agrega esos cambios a un lugar temporal llamado etapa antes de llevarlo a la nube

Si ejecuta el estado de git nuevamente, informará que

Su rama está por delante de 'origin / master' por 1 commit.
 (use "git push" para publicar sus confirmaciones locales)
 nada que comprometer, directorio de trabajo limpio

Así es, hemos realizado y comprometido cambios a nivel local. No hay cambios no comprometidos. Pero estamos por delante de la versión en la nube de nuestro repositorio. Es hora de publicarlos en una casa segura, que es GitHub.

Todo lo que necesitas para correr es:
maestro de origen de empuje git

Obtendrá un buen informe que muestra un hash como fb74259..045ec7a, que es una referencia para nuestro compromiso. Por supuesto, tu hash será diferente.

Verifique su repositorio de GitHub. ¿Te sorprende ver un largo archivo README.md? Recuerda que create-react-app ha reemplazado nuestro pequeño README.md por el suyo. Es enorme y útil, por lo que lo conservaremos por ahora antes de escribir el nuestro.

Etapa 2: Portar el sitio a las páginas de GitHub

Construye el sitio estático

Echemos un vistazo a la versión final.

Solo tienes que correr:

npm run build

Asegúrese de estar dentro del directorio de la aplicación para todos los comandos. Recibiremos este bonito texto que nos muestra lo que sucedió y qué más podemos hacer:

$ npm ejecutar compilación
> react-continuous-deployment@0.1.0 build / home / weebee / Projects / blog_projects / react-continuo-despliegue
> construcción de react-scripts

Crear una compilación de producción optimizada ...
Compilado con éxito.

Tamaños de archivo después de gzip:

  48.12 KB build / static / js / main.9fdf0e48.js
  288 B build / static / css / main.cacbacc7.css

El proyecto fue construido asumiendo que está alojado en la raíz del servidor.
Para anular esto, especifique la página de inicio en su package.json.
Por ejemplo, agregue esto para compilarlo para las páginas de GitHub:

  "página de inicio": "http://myname.github.io/myapp",

La carpeta de compilación está lista para implementarse.
Puede servirlo con un servidor estático:

  npm install -g serve
  servir -s construir

El comando npm run build hace lo que pedimos. Construye nuestra aplicación y optimiza y minimiza nuestros activos. Y coloca todo en una carpeta llamada build.

Hacia la parte inferior, la sugerencia es instalar el paquete serve npm para iniciar un servidor local. La mayoría de las veces, si está en Linux, ya tendrá Python instalado. Es muy fácil iniciar un servidor local si tienes Python.

Ingrese al directorio de compilación e inicie un servidor, consulte los siguientes comandos:

cd build
python -m SimpleHTTPServer

El comando Python por defecto inicia el servidor en el puerto 8000. Entonces, http: // localhost: 8000 servirá la versión de producción del sitio web. Utiliza activos de su directorio de compilación local que acabamos de crear.

Si eso se ve bien, lo enviaremos a las páginas de GitHub.

Primer en las páginas de GitHub

Las páginas de GitHub son soluciones de alojamiento proporcionadas por GitHub para repositorios. Hay pocos lugares donde puede alojar su sitio, todo dentro de un repositorio:

  • Puede usar la rama maestra (la predeterminada) para alojar su sitio web
    Si tiene un index.html, aparecerá. De lo contrario, se mostrará su archivo README.md.
  • También puede usar la carpeta docs en una rama maestra para alojar su sitio
    El caso de uso sería cuando tienes un software o biblioteca desarrollado en GitHub. Es posible que desee alojar la documentación en el mismo repositorio.
  • Puede usar la rama gh-pages para alojar su sitio

Hay una excepción Su nombre de repositorio no debe ser .github.io o .github.io

Estos son nombres especiales y lo limitan a usar la rama maestra.

Una vez que aloje su sitio web, puede cargarlo en las siguientes URL. Depende de si su repositorio está bajo su cuenta o una cuenta de la organización:

https: //  .github.io /  /
https: //  .github.io /  /

Con esa comprensión, equipemos nuestro repositorio para que se active.

Publicar en páginas de GitHub

El nuevo archivo README.md que nos brinda la aplicación create-react-tiene una sección separada en las páginas de GitHub. Hay pocas cosas que debemos hacer.

Verifique las adiciones al archivo package.json

"homepage": "http: //  .github.io / 

Nota: Por lo general, la última sección o entrada en un JSON no necesita una coma, todos los demás deben tener una.

Instalar el paquete gh-pages

Este es fácil. Simplemente ejecute el siguiente comando mientras está dentro del directorio del proyecto:

npm install --save gh-pages

El indicador --save agregará gh-pages como una dependencia a package.json. Esto es para garantizar que cualquier persona que clone su proyecto también pueda obtenerlo cuando ejecutan npm install.

Aquí hay una instantánea del comando git diff que muestra todo lo que hemos agregado desde que se creó package.json.

Implementar en la rama gh-pages

Ejecutemos npm run deploy. Se ejecutará automáticamente antes de la implementación, para generar la compilación de producción que hemos visto anteriormente. Luego implementará la compilación en nuestro repositorio bajo una nueva rama llamada gh-pages.

Compruebe si obtiene un estado Publicado como la última declaración. Si es así, ha implementado con éxito la compilación de producción en GitHub. Aquí está la salida:

Seleccione la rama de gh-pages que se publicará

Pasemos al repositorio de GitHub y publiquemos nuestro sitio. Abra el repositorio y vaya a la pestaña de configuración en la parte superior. Se ve como esta imagen a continuación, ¡espera un minuto! GitHub ha publicado automáticamente la rama gh-pages. No hay nada más que hacer. También muestra la URL en la que podemos acceder al sitio.

El subtítulo anterior en realidad debería decir No hacer nada. Todo está listo y listo para que lo consumamos.

Nota: La URL que se muestra para mi repositorio puede confundirlo. Eso es porque he creado este repositorio bajo una organización llamada PineBoat, que es mi blog. GitHub coloca esto bajo mi dominio personalizado, que no es algo que esperaba cuando probé esto. El tuyo será diferente.

Hasta ahora tan bueno. Si tiene experiencia previa en paquetes Git y Node, no debería haber tenido problemas para llegar hasta aquí. De hecho, el archivo README.md predeterminado fue suficiente para ayudarme hasta aquí. Si no has tenido experiencia, espero que hayas disfrutado el viaje.

Pero aspiramos a un flujo de trabajo de implementación continua. Estamos comenzando a navegar por aguas desconocidas. Uno podría argumentar que no hay nada desconocido en Internet. Estoy de acuerdo, pero creo mi propio mapa.

Etapa 3: Implementación continua

Aquí es donde traemos bots para hacer la mayor parte de la implementación que hicimos en la etapa 2.

Cable en Travis CI para compilación automática

Hagamos que Travis CI haga el despliegue por nosotros. No hay ningún daño en construir e implementar su sitio por su cuenta. Como hemos visto, todo lo que se necesita son unos minutos más de nuestro valioso tiempo.

Sin embargo, cuando se encuentra con proyectos más grandes de escala, es mejor dejar que los bots de confianza realicen algunos de los trabajos. Travis CI es uno de esos servicios.

Podemos aprovechar Travis CI para construir e implementar cada vez que confirmamos nuestro código en el repositorio.

Regístrese en Travis CI

Sería molesto si empiezo con "si tienes una cuenta de GitHub" ahora. Estoy seguro de que ya tiene uno y podemos usarlo para suscribirnos en Travis CI.

Conéctese al repositorio de GitHub

Cuidado con los permisos. Si su repositorio no aparece en la lista, haga clic en el botón de sincronización y actualice la página. Tuve que otorgar permiso a la organización "PineBoat" antes de poder ver el repositorio.

Travis CI te muestra los pasos. Mueva ese interruptor contra su repositorio para conectarlo.

Haga clic en el nombre del repositorio para abrirlo. Mostrará un estado de compilación como desconocido y una nota más grande que dice No hay compilaciones para este repositorio.

No por mucho tiempo. Vamos a cambiarlo

Agregue .travis.yml al repositorio

Aquí está el .travis.yml que debe agregarse. Eche un vistazo y quédese conmigo mientras aclaro algunas de las preguntas que pueda tener.

idioma: nodo_js
node_js:
 - "nodo"
after_success:
 - git config --global user.name "vijayabharathi"
 - git config --global user.email "[correo electrónico protegido]"
 - origen remoto remoto de git
 - git remote add origin https: // vijayabharathib: $ {GH_TOKEN} @ github.com / pineboat / react-continuo-despliegue.git
 - npm ejecutar desplegar

Tenga cuidado con el origen de adición remota de git, es una línea larga. La sintaxis de YAML es ligeramente diferente de JSON. Esta página puede ayudar. Ahora es el momento de desglosarlo. Es posible que haya descubierto la mayoría de esos mensajes.

Aquí está en inglés simple:

  • Este es un proyecto de nodo. Obtenga la última versión de nodo
  • Como Travis ejecuta la prueba npm de forma predeterminada, le pedimos que haga cosas después de que la prueba sea exitosa
  • Agregue su nombre de usuario y correo electrónico de Git
  • Luego agregue el origen remoto de git para el repositorio
    Use su nombre de usuario y el GH_TOKEN generado como credenciales
  • Finalmente, ejecute el comando npm run deploy
    Si recuerda, esto ejecutará npm run predeploy antes de ejecutar npm run deploy

Comprometerse y ver la construcción de Travis CI

Mantenga abierta su página de depósito de Travis CI. En su terminal, agregue cambios, comprométalos y empújelos a GitHub.

En caso de que necesite un recordatorio, aquí está la lista de comandos:

git add --todos
git commit -m "agregar configuración .travis.yml para compilación automática" git push origin master

Si cambia a la página de Travis CI, verá que la página cobra vida una vez que finalice el git push o en unos segundos. La compilación se inicia automáticamente y sabrá si tiene éxito.

Aquí está mi página de Travis CI que muestra un buen estado verde.

El registro que se muestra no es inferior a 2500 líneas. Me alegro de que Travis-CI muestre solo lo que necesitamos ver.

Una clara indicación de los pasos seguidos como se muestra a continuación en la imagen:

Verificación puntual, ¿realmente lo logramos?

Aquí es donde las pruebas automatizadas que se ejecutan en producción pueden ser útiles.

Pero eso es para otro día. Selenium WebDriver puede esperar hasta que terminemos este cableado. Verifiquemos manualmente si Travis CI realmente publicó en las páginas de GitHub.

Otra prueba, esta vez con cambios en el código

La última vez, no pudimos ver ninguna diferencia en nuestra aplicación después de la implementación. Eso es porque no hicimos ninguno. Por lo tanto, no había forma de saber si la compilación fue exitosa. Puedes cargar la rama gh-pages y mirar los commits, pero estoy divagando.

Ahora, hagamos algunos pequeños cambios. Es hora de recuperar la rueda React en el tiempo.

Solo haremos dos cambios.

Dentro del archivo src / App.css, hay una sección para animación llamada @keyframes App-logo-spin. Cambia ese 360deg a -360deg. Esto es para girar la rueda en sentido antihorario.

Cargue el archivo src / logo.svg y cambie el color de relleno de # 61DAFB a # DA61FB. Si su servidor se ejecuta a través de npm start, ya puede ver una rueda morada que se ejecuta en sentido antihorario. Si no es así, agregue los cambios al alijo, confirme y empújelos al repositorio. Observe si la compilación es exitosa en Travis-CI y luego diríjase a su página de Github.

Cargue your_user_name.github.io/repository_name. Deberías ver la rueda morada en lugar de la azul.

Por desgracia, no veo esa rueda morada. Todavía veo el azul predeterminado.

Repara el GH_TOKEN faltante

Aunque Travis CI informó que todo está bien, no lo está. Si abre la rama gh-pages, verá la confirmación original que realizamos desde la terminal local. No hay otros compromisos. Eso significa que los comandos after_success no tuvieron tanto éxito.

Si expande la sección npm run deploy en el registro de compilación de Travis, verá algunos errores de autenticación. Esto se debe a que no le hemos dado permiso a Travis CI para escribir en nuestro repositorio.

Puede crear un nuevo token desde la página de tokens de acceso personal desde GitHub.com. Recuerde dar acceso solo al repositorio público. Solo una marca de verificación contra public_repo servirá. No te pierdas esto. Una vez que genere un token, cópielo. GitHub advierte correctamente que no podrá volver a verlo.

Dirígete a Travis CI, haz clic en Más opciones para tu repositorio y elige la configuración. Mostrará varias secciones, pero las variables de entorno son las que debe buscar.

Nombre el token como GH_TOKEN y pase el token bajo el campo de valor. Haga clic en agregar. No active el valor de visualización en los registros, ya que podría ser visible para las personas si envía los registros. El token es equivalente a su contraseña.

Eso es todo, ahora Travis-CI puede escribir en nuestro repositorio.

Vuelva a la pestaña Actual del repositorio y haga clic en Reiniciar compilación. Una vez que finaliza la compilación, puede verificar los registros y la rama gh-pages en GitHub. Deberías ver una nueva confirmación.

Felicidades! Esa es nuestra primera implementación automatizada. ¿Qué tal el sitio web github.io en sí? Ninguna cantidad de actualización traería la muy necesaria rueda morada. No pierdas la esperanza todavía.

Pídale al trabajador de servicio que tome un descanso

Todavía la rueda está sangrando de azul. Pero la rama gh-pages en el repositorio muestra una segunda confirmación. Comparemos index.html en el repositorio y en la fuente de la página web. Están apuntando a diferentes archivos CSS y JavaScript. El sufijo hash es nuestra pista.

Esto parece ser el resultado de un enérgico trabajador de servicio de JavaScript. Ha almacenado en caché la página para su uso sin conexión. Pero esta conclusión necesita más investigación. Mientras tanto, detengamos al trabajador del servicio y limpiemos el almacenamiento.

Si está en Chrome, puede acceder a las Herramientas para desarrolladores desde el menú o presionando F12. La pestaña Aplicación en Chrome DevTools tiene la sección Borrar almacenamiento. Verifique todas las entradas y finalmente haga clic en Borrar datos del sitio.

Actualizar y boom! Aquí está nuestra rueda inversa en púrpura brillante. Ahora es tiempo de celebración.

Nota: debe haber una mejor manera de limpiar este almacenamiento automáticamente. Sería un dolor si tenemos que parar y limpiar el trabajador de servicio y el almacenamiento cada vez para obtener los cambios en línea. Ese es un tema para más investigación.

Etapa 4: insignia de honor de Travis CI

Hay una tarea final frente a nosotros. Esto es para obtener una brillante insignia de estado de compilación de Travis CI en el archivo README.md de nuestro repositorio.

Abra Travis CI y haga clic en la construcción: pase de insignia. Mostrará un cuadro de diálogo con opciones para portar la imagen. Deja la rama como maestro. Seleccione Markdown en lugar de URL de imagen. Copia el texto que te dan.

Péguelo en el archivo README.old.md, que nos dejó crear-reaccionar-aplicación anteriormente. Escribe tu propio contenido.

Puede eliminar el archivo README.md predeterminado del repositorio y cambiar el nombre de README.old.md a README.md.

Agregue los cambios a la puesta en escena de Git, confirme y envíe a la nube. Ahora el repositorio debería mostrar el lote que siempre quiso. Aquí está la URL que se muestra para nuestro proyecto favorito.

https://travis-ci.org/pineboat/react-continuous-deployment.svg?branch=master

Puede agregar esa url a README.md en la parte superior. Aquí está la imagen:

¡Hemos terminado aquí! Tiempo para celebrar.

Me gustaría dejarte con una pregunta. Si está trabajando en equipos grandes utilizando un flujo de trabajo similar, ¿cuáles son los desafíos que enfrenta y cómo los resolvería? Escribe un comentario y házmelo saber.

Muchas Gracias Por Leer. Espero que hayas encontrado útil.

Esto fue publicado originalmente en pineboat.in.

Aplaudir muestra cuánto apreciaste este artículo.