Implementación de la aplicación angular en páginas de GitHub con Travis CI.

Bienvenido, les saluda Luis y para hoy les traigo este nuevo artículo.

Travis CI puede hacer su vida mucho más fácil, especialmente si está tratando de implementar y Angular aplicación para Páginas de GitHub. En este tutorial, aprenderá cómo configurar dicha canalización de integración continua y despliegue continuo para Angular utilizando Travis CI y GitHub Pages.

El objetivo de este tutorial es configurar las herramientas mencionadas para que cada solicitud de extracción resulte en pruebas automatizadas que revelarán cualquier error en el código. En este caso, Travis CI se configurará de modo que cualquier solicitud de extracción para dominar o desarrollar rama dará como resultado la activación de dichas pruebas, aunque esto se puede configurar para cualquier rama según sea necesario. El segundo trabajo automatizado será la implementación en el servidor de páginas de GitHub. Esta parte incluirá la construcción de nuestra aplicación Angular en modo de producción y la instalación en el servidor para garantizar que todo funcione sin problemas.

Prerrequisitos

• Cuenta de GitHub: la usaremos como repositorio de código y servidor de implementación (páginas de GitHub)
• Aplicación angular: cualquier aplicación servirá, puede generar una nueva si no se siente muy seguro. He usado la aplicación Angular 7 para este tutorial.
• Aproximadamente 10 minutos de su tiempo

1. Creando el archivo travis.yml

Comencemos creando un archivo de configuración para nuestro software de automatización. En el directorio del proyecto Angular crea un archivo llamado .travis.yml. A continuación, agregue la siguiente configuración:

dist: trusty
sudo: falselanguage: node_js
node_js:
  - "10"branches:
  only:
    - develop
    - masternotifications:
  email: falseaddons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stablecache:
  directories:
    - ./node_modulesinstall:
  - npm installscript:
  - npm run test -- --watch=false --no-progress --
    browsers=ChromeHeadlessNoSandboxbefore_deploy:
  - npm run build -- --prod --base-href /IP3/
  - cp dist/IP3/index.html dist/IP3/404.htmldeploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist/IP3
  on:
    branch: master

Ahora analicemos lo que realmente está sucediendo allí. Importante – el nombre de IP3 que ve en el archivo de configuración es solo el nombre de mi proyecto Angular. Debe cambiarlo por el nombre de su proyecto (a menos que su proyecto también se llame IP3 :)).

• branches – aquí especificamos el código desde el que se deben probar las ramas. En este caso, he especificado usar solo las ramas master y desarrollar, aunque hay más opciones disponibles.
• notifications – este es solo un pequeño complemento que evitará que Travis envíe spam a su cuenta de correo electrónico con mensajes sobre compilaciones terminadas.
• addons – las aplicaciones adicionales que serán necesarias para ejecutar las pruebas. En nuestro caso, será la última versión estable de Google Chrome.
• cache – un directorio que se supone que debe almacenarse en caché, lo que aumentará significativamente el rendimiento.
• install – el comando de instalación que se utilizará al configurar las dependencias. También puedes usar hilo si lo prefieres.
• script – el comando que disparará la prueba por nosotros. Es importante agregar la bandera –watch = false, para que el comando salga después de ejecutar las pruebas y no permanezca en el ciclo.
• before_deploy – secuencia de comandos que se ejecuta antes del proceso de implementación. En nuestro caso, está compilando la aplicación Angular en modo de producción (y configurando el base-href que es opcional). Lo segundo es duplicar el archivo index.html y cambiarle el nombre a 404.html, que interceptará cualquier error 404 que arroje el servidor de páginas de GitHub.
• deploy – aquí especificamos la información sobre nuestro servidor de implementación. En nuestro caso son las páginas de GitHub, por lo que lo configuramos como proveedor: páginas. El github_token es el token único que configuraremos en el sitio web de Travis y que le permitirá acceder a nuestro servidor de implementación en nuestro nombre. El último es el en línea donde decimos qué rama debe usarse como fuente de compilación. Cualquier código enviado a esta rama también activará el proceso de implementación en Travis.

2. Configuración de Travis CI

Hemos configurado todo en el código, ahora es el momento de saltar al panel de configuración de Travis CI. Empiece por iniciar sesión en Sitio web de Travis. Puede usar su cuenta de GitHub, que probablemente sea mucho más fácil y rápida de usar. Luego seleccione el proyecto apropiado, en mi caso es el IP3y luego ir a settings lengüeta.

Allí lo que nos interesa es el Environment Variables sección. Allí debemos proporcionar el token de acceso de GitHub que permitirá a Travis acceder a nuestro repositorio. Para hacer esto, es mejor usar el oficial Guía de GitHub. Después de generar uno, péguelo en value ingrese y escriba el token name, en nuestro caso GITHUB_TOKEN.

Y eso es todo para la configuración de Travis en el panel de configuración. También hay un par de opciones más que puede cambiar, pero por la simplicidad de este tutorial no profundizaremos demasiado en eso.

3. Configuración de GitHub

La última parte de este tutorial será configurar nuestro repositorio de GitHub para hacer uso del servicio de Pages. Para hacer esto, vaya al repositorio de su proyecto y luego a Settings lengüeta. Allí encontrará la configuración para el servicio de páginas similar a esto:

La parte crucial es seleccionar el correcto Source rama. Recomiendo usar las páginas gh predeterminadas. Descargo de responsabilidad: Travis CI siempre forzará los cambios realizados durante la fase de implementación, por lo que si no desea perder todo su historial de Git, no use ninguna de las ramas principales, como master o desarrollar.

4. Prueba

Ahora creemos una nueva rama, introduzcamos algunos cambios en ella y abramos una solicitud de extracción para que Travis ejecute las pruebas. Después de fusionar la solicitud de extracción, la compilación se ejecutará e implementará nuestra aplicación en las páginas de GitHub. Los pasos son:

• En la línea de comando, cree una nueva rama: git checkout -b new-branch master
• Realice algún cambio en cualquier archivo. Puede cambiar algo en app.component.html si no está seguro de qué hacer.
• Confirma los cambios con git add . y entonces git commit -m "Update the app template"
• Enviar al repositorio: git push origin new-branch
• Usando GitHub, cree un nuevo Pull Request a master rama.

Lo último es esperar a que Travis ejecute con éxito nuestras pruebas y, después de eso, fusionar la nueva rama con la maestra para activar la construcción de implementación. Después de eso, nuestra aplicación implementada debería estar disponible en la dirección que se muestra en la pestaña Configuración de GitHub.

Resumen

Espero que haya encontrado útil esta publicación. Si es así, no dudes en seguirnos en las redes sociales si así lo deseas 🙂