Configuración de GitLab CI para proyectos Angular
Contenido del curso
Sergio Alexander Florez Galeano
Ricardo Andres Romero Gomez
Deyvi Rosado Diaz
Jefferson Martínez
Nelson Aranda
Dany Pascual Gomez Sanchez
Jonatan Lazo
Carlos Mario Mora Restrepo
Miguel Alexander Mejía
Matías Daniel Cravero
Daniela Gonzales
Arturo Escamilla García
Gonzalo Amador Hernández
Miguel Angel Escurra
Pablo Aquino
Carlos Andrés Moreno Jimenez
Andresa Helena Rivera Ceballos
Erik Elyager
Gonzalo Amador Hernández
Juan Esteban Galvis
Said Morales Lemus
Oscar Barajas Tavares
Team PlatziMiguel Alexander Mejía
David Behar
Jose SRE
Kenet Andrés Chungandro Montenegro
Pablo Aquino
fabian miliani
Juan Pablo Gómez García
santiago Ceballos
Gonzalo Amador Hernández
Gonzalo Amador Hernández
Marcelo Javier Pedernera
Enrique Alexis Lopez Araujo
Gonzalo Amador Hernández
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
No usen este código porque tiene varios errores. En los sig stages: 1)
" cache: paths: - node_modules/ " tiene una separación demás, así q no les toma el sintaxis en el sig stage.
El correcto es:
Añade la versión mas reciente de Node al 14/03/2022 usé la versión 16.10
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
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 **-> . 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:
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.
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.
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?
Yo creo que mas que generarla, es indicarle cual es la imagen que descargara para crear el contenedor del proyecto.
Saludos, lo que significa es que el ejecutor que se lanzará utilizará la imagen especificada para realizar los stage que hayas configurado, en lo personal, con proyectos grandes me gusta utilizar:
image: docker:latest
para el documento porque en cada stage puedes sobre escribir esta imagen por una específica.
Te dejo un ejemplo, el general utiliza la imagen docker:latest pero para los stage utiliza la imagen gradle:alpine
image: docker:latest services: - docker:dind variables: DOCKER_DRIVER: overlay stages: - coverage - mutation - build - package gradle-build: image: gradle:alpine stage: build variables: GRADLE_OPTS: "-Dorg.gradle.daemon=false" before_script: - export GRADLE_USER_HOME=`pwd`/.gradle script: gradle bootJar artifacts: paths: - build/libs/*.jar expire_in: 1 week gradle-test: image: gradle:alpine stage: coverage script: gradle test jacocoTestCoverageVerification gradle-mutation: image: gradle:alpine stage: mutation script: gradle pitest
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
usando GitLab
CI/CD > Pipelines o CI/CD > Jobs en tu proyectousando la extension de GitLab en vscode
command palette (ctrl + shift + p o cmd + shift + p)GitLab: Validate GitLab CI configMi 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
En las versiones más recientes de Angular, específicamente a partir de la versión 15, el archivo karma.conf.js ya no se genera por defecto al crear un nuevo proyecto. Esto se debe a que Angular CLI ahora construye la configuración completa de Karma en memoria, basándose en las opciones especificadas en el archivo angular.json.
Angular
Para personalizar la configuración de Karma, puedes generar manualmente el archivo karma.conf.js ejecutando el siguiente comando en la raíz de tu proyecto:
>ng generate config karma
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
Durante el curso se sigue profundizando en el tema en esta clase y esta lectura, espero te sirvan.
Tambien puedes checar la docu oficial:
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:
en package.json es un formato ligero de intercambio de datos:
en .gitlab-ci.yml archivo para CI de GitLab:
Entiendo que esta configuración es propia para node, pero donde ´puedo encontrar la documentación para proyectos Java?
https://docs.gitlab.com/ee/ci/examples/ Puedes encontrar recursos con los distintos lenguajes que puedes utilizar con GitLab
Aqui tienes por ejemplo un gitlab-ci.yml funcional para SpringBoot que mide:
coverage (jacoco) mutation (pitest) Construye la imagen docker y la publica en el registry de gitlab.
image: docker:latest services: - docker:dind variables: DOCKER_DRIVER: overlay stages: - coverage - mutation - build - package gradle-build: image: gradle:alpine stage: build variables: GRADLE_OPTS: "-Dorg.gradle.daemon=false" before_script: - export GRADLE_USER_HOME=`pwd`/.gradle script: gradle bootJar artifacts: paths: - build/libs/*.jar expire_in: 1 week gradle-test: image: gradle:alpine stage: coverage script: gradle test jacocoTestCoverageVerification gradle-mutation: image: gradle:alpine stage: mutation script: gradle pitest docker-build: stage: package script: - docker build -t registry.gitlab.com/msgoon6-scholar/schollar-service . - docker login -u msgoon6-registry-ci -p ******************** registry.gitlab.com - docker push registry.gitlab.com/msgoon6-scholar/schollar-service
Qué diferencias habría en un proyecto de react con jest?
Tengo la misma duda pero para testear una API con node-express-Jest Como configuraría Jest?
Como le haría si quiero hacer el CI a un proyecto de symfony?
Mas ejemplos, aquí
buenas tardes. Alguien me podria dar soporte a este problema que se me esta presentando cuando gitlab realiza los test
Running with gitlab-runner 13.0.0-rc2 (926834bc) on docker-auto-scale 72989761 Preparing the "docker+machine" executor 00:42 Using Docker executor with image node:12.13.1 ... Pulling docker image node:12.13.1 ... Using docker image sha256:7be6a8478f5f667ef8eef2c29dbd55a5132243755f56eb17d2260592a1eb3c1f for node:12.13.1 ... Preparing environment 00:05 Running on runner-72989761-project-18759178-concurrent-0 via runner-72989761-srm-1590397645-7b821558... Getting source from Git repository 00:01 $ eval "$CI_PRE_CLONE_SCRIPT" Fetching changes with git depth set to 50... Initialized empty Git repository in /builds/factox/pro-dep/.git/ Created fresh repository. From https://gitlab.com/factox/pro-dep * [new ref] refs/pipelines/149264851 -> refs/pipelines/149264851 * [new branch] 5-generar-integracion-con-gitlab-ci -> origin/5-generar-integracion-con-gitlab-ci Checking out 3b581168 as 5-generar-integracion-con-gitlab-ci... Skipping Git submodules setup Restoring cache 00:02 Downloading artifacts 00:17 Downloading artifacts for install-dependencies (565985262)... Downloading artifacts from coordinator... ok id=565985262 responseStatus=200 OK token=QzUuE-fR Running before_script and script 01:51 $ apt-get update && apt-get install -y apt-transport-https Ign:1 http://deb.debian.org/debian stretch InRelease Get:2 http://security.debian.org/debian-security stretch/updates InRelease [94.3 kB] Get:3 http://deb.debian.org/debian stretch-updates InRelease [91.0 kB] Get:4 http://deb.debian.org/debian stretch Release [118 kB] Get:5 http://deb.debian.org/debian stretch Release.gpg [2410 B] Get:6 http://security.debian.org/debian-security stretch/updates/main amd64 Packages [527 kB] Get:7 http://deb.debian.org/debian stretch-updates/main amd64 Packages [27.9 kB] Get:8 http://deb.debian.org/debian stretch/main amd64 Packages [7083 kB] Fetched 7944 kB in 1s (4397 kB/s) Reading package lists... Reading package lists... Building dependency tree... Reading state information... The following NEW packages will be installed: apt-transport-https 0 upgraded, 1 newly installed, 0 to remove and 44 not upgraded. Need to get 171 kB of archives. After this operation, 243 kB of additional disk space will be used. Get:1 http://security.debian.org/debian-security stretch/updates/main amd64 apt-transport-https amd64 1.4.10 [171 kB] debconf: delaying package configuration, since apt-utils is not installed Fetched 171 kB in 0s (2443 kB/s) Selecting previously unselected package apt-transport-https. (Reading database ... 29962 files and directories currently installed.) Preparing to unpack .../apt-transport-https_1.4.10_amd64.deb ... Unpacking apt-transport-https (1.4.10) ... Setting up apt-transport-https (1.4.10) ... $ wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - Warning: apt-key output should not be parsed (stdout is not a terminal) OK $ 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 E: Malformed entry 1 in list file /etc/apt/sources.list.d/google-chrome.list (Component) E: The list of sources could not be read. $ npm run test:ci > proyect11@0.0.0 test:ci /builds/factox/pro-dep > ng test --watch=false --browsers=ChromeHeadlessNoSandbox Compiling @angular/core : es2015 as esm2015 Compiling @angular/core/testing : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015 Compiling @angular/platform-browser : es2015 as esm2015 Compiling @angular/platform-browser-dynamic : es2015 as esm2015 Compiling @angular/platform-browser/testing : es2015 as esm2015 Compiling @angular/compiler/testing : es2015 as esm2015 Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015 Compiling @angular/common/testing : es2015 as esm2015 Compiling @angular/router : es2015 as esm2015 Compiling @angular/router/testing : es2015 as esm2015 25 05 2020 09:10:04.523:INFO [karma-server]: Karma v4.3.0 server started at http://0.0.0.0:9876/ 25 05 2020 09:10:04.526:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited 25 05 2020 09:10:04.534:INFO [launcher]: Starting browser ChromeHeadless 25 05 2020 09:11:04.537:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing. 25 05 2020 09:11:06.542:WARN [launcher]: ChromeHeadless was not killed in 2000 ms, sending SIGKILL. 25 05 2020 09:11:08.543:WARN [launcher]: ChromeHeadless was not killed by SIGKILL in 2000 ms, continuing. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! proyect11@0.0.0 test:ci: `ng test --watch=false --browsers=ChromeHeadlessNoSandbox` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the proyect11@0.0.0 test:ci script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2020-05-25T09_11_08_608Z-debug.log Running after_script 00:01 Uploading artifacts for failed job 00:02 ERROR: Job failed: exit code 1```
Hola, pudiste resolver este problema?
¿Donde puedo probar mi archivo .gitlab-ci.yml y saber si esta bien?
puedes usar la herramienta llamada ** CI Lint tool** integrada en GitLab,:
CI/CD > Pipelines o CI/CD > Jobs en tu proyectotambien puedes instalar la extencion de vscode llamada gitlab.gitlab-workflow:
Una vez instalada puedes usar el command palette y ejecutar el comando
GitLab: Validate GitLab CI config
y automaticamente validara tu archivo .gitlab-ci.yml
Este archivo de configuración se escribe con cualquier editor?
Hola la respuesta es si, puedes usar cualquier editor, a mi me gusta mas usarlo con vscode, pero es a tu preferencia! ✅
Usa vscode con la extencion de GitLab GitLab Workflow :