Automatizacion con GitLab Cl

Mi .gitlab-ci.yml

image: node:11.1.0

stages:
  - install
  - test

install-dependencies:
  stage: install
  script:
    - npm install
  artifacts:
    expire_in: 1hr
    paths:
      - node_modules/
    cache:
      paths:
        - node_modules/

test-apps:
  stage: test
  dependencies:
    - install-dependencies
  before_script:
    - apt-get update && apt-get install -y apt-transport-https
    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    - sh -c 'echo "deb https://dl.google.com/linux/chrome/deb/stable main" >> /etc/app/sources.list.d/google.list'
    - apt get update && apt-get install -y google-chrome-stable
  script:
    - npm run test:ci

En el siguiente enlace se puede ver la configuración completa del .gitlab-ci.yml, realizada por el profesor David

https://gitlab.com/platzi-gitlab-live/platzi-devops/blob/master/.gitlab-ci.yml

Precisamente son los temas que aburren con la elaboración de contenidos de cursos, de repente en medio de un curso aparece contenido como éste que por ejemplo en mi caso me deja completamente perdido. Igual pasa en otros cursos.

Hola a todos,

A continuacion le paso las indicaciones para tener el mismo proyecto que se utiliza en el curso:

1. Descarga Node.js preferentemente la version estable. **Link **-> https://nodejs.org/es/. La version que se publica el comentario es la version 10.15.3 LTS.

2. Para verificar si tiene instalado Node.js, ejecute este comando en su terminal node -v y para confirmar que tiene npm instalado, puede ejecutar este comando en su terminal: npm -v

3. Descargar Angular, ejecute este comando en su terminal npm install -g @angular/cli. La version que se descarga desde que se publica el comentario es la version 7.3.8.

4. Crear el proyecto Angular, ejecute este comando en su terminal ng new ProyectoGitlabCurso. Cabe aclara que el nombre del proyecto (ProyectoGitlabCurso) pueden cambiarlo a su gusto.

5. Abrir el proyecto con un editor de codigo a su gusto y modificar el archivo karma.conf.js (ubicado en la carpeta /src) la siguiente porcion de codigo:

customLaunchers:{ ChromeHeadlessNoSandbox:{ base: 'ChromeHeadless', flags: ['--no-sandbox'] } },

6. Crear el archivo .gitlab-ci.yml en el raiz del proyecto para que GitLab lo detecte. El codigo del archivo es el siguiente:

`image: node:11.1.0
stages:

• install
• test
  install-dependencies:
  stage: install
  script:
  - npm install
  artifacts:
  expire_in: 1hr
  paths:
  - node_modules/
  cache:
  paths:
  - node_modules/
  test-apps:
  stage: test
  variables:
  CHROME_BIN: google-chrome
  dependencies:
  - install-dependencies
  before_script:
  - apt-get update && apt-get install -y apt-transport-https
  - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
  - sh -c ‘echo “deb https://dl.google.com/linux/chrome/deb/ stable main” >> /etc/apt/sources.list.d/google.list’
  - apt-get update && apt-get install -y google-chrome-stable
  script:
  - npm run test:ci`
  7. Verificar el codigo del archivo .gitlab-ci.yml en la siguiente Link https://gitlab.com/<Usuario>/<Proyecto>/-/ci/lint . Cabe aclarar que <Usuario> debera ser reemplazo por el usuario logueado y <Proyecto> en el cual se esta trabajando.

8. Subir los cambios a GitLab ejectando este comando en su terminal:
git status git add -A git commit -m "Subiendo el archivo .gitlab-ci.yml" git push

**9. ** Ingresar al Proyecto GitLab a la opcion CI/CD -> Pipelines verificando que se corra la configuracion realizada.

David, tengo una duda, cuando generas el archivo .gitlab-ci.yml y lo inicializas con la etiqueta image. Eso quiere decir literal que gitlab ci generará una imagen de docker?

Así me funcionó en el 2022

image: node:17.9.0-slim
stages:
  - install
  - test

install-dependencies:
  stage: install
  script:
    - npm install
  artifacts:
    expire_in: 1hr
    paths:
      - node_modules/
  cache:
    paths:
      - node_modules/
  
test-apps:
  stage: test
  variables:
    CHROME_BIN: google-chrome
  dependencies:
    - install-dependencies
  before_script:
    - apt-get update && apt-get install -y apt-transport-https wget gnupg
    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    - sh -c 'echo "deb https://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
    - apt-get update && apt-get install -y google-chrome-stable
  script:
    - npm run test:ci

como sería si deseo hacer deploy en azure teniendo mi repo en gitlab

¿Por que ya no se puede expandir la pantalla?, estaba mejor antes con esa opción para ver el video

Para validar el archivo .gitlab-ci.yml puedes hacerlo de dos formas

1. usando GitLab

   • Navega a CI/CD > Pipelines o CI/CD > Jobs en tu proyecto
   • Despues has click en CI lint
   • Pega tu codigo en el editor
   • preciona el boton Validate

2. usando la extension de GitLab en vscode

   • Instala la extension gitlab.gitlab-workflow
   • Abre el command palette (ctrl + shift + p o cmd + shift + p)
   • ejecuta el comando GitLab: Validate GitLab CI config

Mi aporte a la comunidad.
Así quedó y funcionó mi .gitlab-ci.yml para ésta clase.

image: node:14.13.1
stages:
  - install
  - test

install-dependencies:
  stage: install
  script:
    - npm install
  artifacts:
    expire_in: 1hr
    paths:
      - node_modules/
  cache:
    paths:
      - node_modules/

test-apps:
  stage: test
  variables:
    CHROME_BIN: google-chrome
  dependencies:
    - install-dependencies
  before_script:
    - apt-get update && apt-get install -y apt-transport-https
    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
    - sh -c 'echo "deb https://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
    - apt-get update && apt-get install -y google-chrome-stable
  script:
    - npm run test:ci```

Ejemplos del archivo .gitlab-ci.yml
https://docs.gitlab.com/ee/ci/examples/README.html

Bueno, me enredo un poco jaj pero trataré de hacer un resumen de lo que entendí:

en Karma.conf.js que es para hacer test en JavaScript:

• customLauncer = lanzador personalizado
• no se que es lo de NoSandbox si alguien me podría explicar
• Se hace que el launcher sea: Chrome Headless por lo que leí es Chrome sin sin interfaz gráfica (https://es.wikipedia.org/wiki/Navegador_sin_interfaz_gráfica)

en package.json es un formato ligero de intercambio de datos:

• se agrega la “opción” test:ci que ejecute ng test y el resto no lo entiendo muy bien.

en .gitlab-ci.yml archivo para CI de GitLab:

• que vamos a trabajar con node.11.1.0
• Hay dos etapas: install y test
• Para install ejecute “npm install” e incluya node_moudles/
• Para test instale dependencias, por consola instale Chrome
• y ejecute la opción test:ci que hicimos en package.json

Entiendo que esta configuración es propia para node, pero donde ´puedo encontrar la documentación para proyectos Java?

Qué diferencias habría en un proyecto de react con jest?

Si a la fecha no encuentras karma.conf.js es debido a que actualmente no existe de forma predeterminada y debes hacer un downgrade de Angular y reiniciar lo ya hecho… Actualmente estoy usando [email protected] y parece funcionar bien

Adjunto referencias

https://stackoverflow.com/questions/43344600/how-to-install-a-specific-version-of-angular-with-angular-cli
Proyecto de otro alumno (Angular version on README)
https://gitlab.com/platzi-gitlab25/platzi-devops

Citando otro alumno en otra clase (Nelson David)

Para el año 2023, les cuento que me enfrente a una incompatibildiad entre la ultima version de nodejs y la que descargaba de angular npm, por tanto me toco bajarme de version en nodejs para pasar rapido el ejerrciio. Por tanto en el momento que lo vayan a a hacer validen que la version de NodeJS y la version de NPM sea compatible con la version de Angular que se esta descargando. Al final trabaje con estas versiones:

Angular CLI: 15.2.6
Node: 14.21.3
Package Manager: npm 6.14.18
OS: win32 x64

y por ultimo importante validar donde queda instalado ng.cmd en mi caso quedo instalado en un subdirectorio .\node_modules.bin y me toco adicionarlo en la variabled e ambiente PATH para que me reconociera el comando ng sin inconvenientes

— Edite algunos detalles para mejor comprensión

Para la configuración del archivo package.json
"test:ci": "ng test --watch=false --browsers=ChromeHeadlessNoSandbox"

Para la configuracion del archivo Karma.js
browsers: ['ChromeHeadlessNoSandbox'], customLaunchers: { ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', flags: ['--no-sandbox'] } },

Buen curso, hasta el momento esta es la peor clase, porque entendí muy poco… falto aclarar cada fila del archivo de configuración

En mi caso fue bastante confuso el tema debido a que se deben tener conocimientos previos sobre Cubernets, TDD y Herramientas según el lenguaje que cada uno maneje. comparto ejercicio practico de pruebas automatizadas con PHPUnit:

Ejemplo de .gitlab-ci.yml

<# Select image from https://hub.docker.com/_/php/
#image: php:latest
image: php:7.3

# Select what we should cache between builds
cache:
  paths:
  - vendor/

before_script:
  # Install git, the php image doesn't have installed
  - apt-get update
  - apt-get install curl
  # Install composer
  - curl -s https://getcomposer.org/installer | php
  - mv composer.phar /usr/local/bin/composer
  # Install all project dependencies
  - composer install
  - composer require --dev phpunit/phpunit
  - apt-get update
  - composer dump-autoload

# We test PHP7 with MySQL, but we allow it to fail
test:
  image: php:7.3
  script:
    #RUN ONLY test/UserTest.php
    - echo "Testing test/UserTest.php..."
    - php ./vendor/phpunit/phpunit/phpunit test/UserTest.php --color 
    #RUN ALL TESTs IN TEST DIRECTORY
    - echo "Testing All Test in /test/ folder..."
    - php ./vendor/phpunit/phpunit/phpunit test --color
  allow_failure: true
>

A los que les salga error, reemplazar “–no-sandbox” por “–disable-extensions” en la parte de flags, me ayudó.

Si tienes errores al correr los test con chromeHeadless visita esta pagina. https://medium.com/@pansakornphothidaen/การทำ-angular-testing-ผ่าน-puppeteer-headless-browser-2a7d8e4bd0fa

Hola a todos,
si quiero realizar las pruebas con selenium, como debiese ser la configuración?

gracias.

Saludos

Yo:

after_script invalida comandos que son ejecutados después de un job
before_script invalida comandos que son ejecutados antes de un job

Sabiendo que la imagen de node 11.1.0 esta basada en debian 9, me sirvieron estos comandos:

  before_script:
    - apt-get update -y && apt install wget -y
    - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    - apt install -y ./google-chrome-stable_current_amd64.deb

Como siempre la mejor forma de probar los dockerfiles es corriendo uno, y probando los comandos manualmente, asi vas a la fija:

docker run --rm -it node:11.1.0 /bin/sh

Automatizacion de CI con GitLab-YML

Descarga las ramas creadas en el repositorio
git remote update origin --prune

Una vez se descargan las referencias nos cambiamos
git checkout 1-generar-integracion-con-gitlab-ci

En GitLab:

• un pipeline tiene uno o muchos stages (satges corren en orden)
• un satage tiene uno o mas Jobs o scripts (los jobs corren en paralelo)

La configuración que hace David, es solo para un proyecto de angular o sirve para cualquier tipo de proyecto? yo estoy usando una proyecto en React y no tengo el archivo karma para poder setear el browser

Me perdi cuando llegamos de nuevo al código 😦

ese karma.conf.js supongo que es parte/generado por ser una app angular o toy perdido?

Alguien sabe donde podria aprender mas sobre los runners y la configuracion de los pipelines? Quiero hacer un pipeline para desplegar una app de .Net Core en staging

Me gustaria recomendar esta extension de vscode para checar la ortografia, se llama code spell checker:
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker