Configuración de GitLab Pages para deploy automático de Angular
Contenido del curso
Felipe Hernández
Edgar Moises Valdez Faria
Gonzalo Amador Hernández
Omar D
Omar Daniel Centeno
Jose Vivas
Kimberly Garcés Pérez
Oswaldo Peralta
Walter Ugalde A
Diego Forero
Team Platzi
Samir Jimenez Vivas
José Ángel Navarro Almendárez
Miguel Angel Cáceres Valdivia
Edgar Moises Valdez Faria
Gonzalo Amador Hernández
Kristopher Ortega
Anderson Gil Petit
Sergio Alexander Florez Galeano
Gonzalo Amador Hernández
Walter Lensinas
Emilio Martin Ustares Siles
Sergio Alexander Florez Galeano
Sergio Alexander Florez Galeano
Juan Jose Vega
Sergio Alexander Florez Galeano
Gonzalo Amador Hernández
Alejandra Galeano
John Andrey Serrano
John Andrey Serrano
Enrique Alexis Lopez Araujo
Daniel Alfredo García Serna
Juan Esteban Galvis
Gonzalo Amador Hernández
Miguel Angel Cáceres Valdivia
Kristopher Ortega
Se podría optimizar el pipeline, dentro del mismo agregar una variable BASE_HREF=/platzi-devops/ y dentro del package.json hacer uso de esa variable adicionando el flag —base-href
ng build —base-href=$BASE_HREF
Gracias por el aporte
Super Aporte!!!!!
Deberíamos crear un grupo de telegram para DevOps ya que no hay :/
¡Hola!
Seguro que si se lo propones al team@platzi.com podrán crear un grupo como los otros que hay para otras áreas de estudio.
¡Nunca pares de aprender! :gree
he configurado mi gitlab-ci para que haga deploy con firebase hosting. Quedo asi y solo hara deploy si hay cambios en master.
image: node:16.14.2 stages: - install - test - deploy 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 deploy-functions: stage: deploy dependencies: - install-dependencies before_script: - npm i -g firebase-tools script: - npm run build - firebase deploy --token $FIREBASE_TOKEN only: refs: - master
Esto ha sido genial !
Comparto la configuración realizada
image: node:11.1.0 stages: - install - build - test - deploy 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 build-app: stage: build variables: BUILD_CONFIGURATION: 'production' dependencies: - install-dependencies script: - npm run build artifacts: expire_in: 1hr paths: - dist/ pages: stage: deploy dependencies: - build-app script: - mkdir public - mv ./dist/nom-proyecto/* ./public/ artifacts: paths: - public environment: name: production only: - branches
A los que le aparezca el error 404, solo deben resolver el WIP status y luego mergear a Master. Una vez que el merge termine y el pipeline cumpla su ciclo podràn ver la pàgina de deployment de Angular correctamente
En el caso que mi deploy sea en otro servidor como heroku, digital oceam, aws, azure, que cosas cambiaria ..?
Hola, eso se ve más adelante en el curso.
failed pipeline.
Todos mis pipelines me fallan y lo peor es que no sé porque si hago lo que dice el profe. Será que si tengo que meter mis datos bancarios??
Intenta entrando al log del pipeline y si hay algun error.
Lo mas probable es que si sea ingresar los datos bancarios, no hace mucho que gitlab agrego esa medida debido a que habia muchos usuarios que usaban el servicio para minar.
Hola, yo tambien tuve el mismo error y lo resolvi instalando en mi equipo un runner, el siguiente video me ayudo mucho: instalar runner Adicionalmente si usas Windows debes instalar WSL2 y tambien docker. Saludos espero que te sea de mucha ayuda.
Buenas ¿Se puede usar Gitlab pages para deployar APIs (Backend)?
no, solo funciona para archivos estaticos
Gonzalo que alternativas son las que hay?
En el caso de tener un proyecto hecho en Angular 6,las configuraciones servirían exceptuando la variable "$BUILD_CONFIGURATION"?
Les ha pasado que al entrar a ver el log del job de install-dependencies se queda la pantalla cargando? No he podido ver ese log:
agrega el keyword. only en ese job y setealo en - branches
only: - branches
Puede ser que la pregunta sea temprano, pero ¿alguno a hecho un pipeline de este tipo pero a un servidor propio?
Tengo en el trabajo un gitlab community edition y algunos servidores windows server. Me gustaría poder automatizar el proceso de deployment, por lo menos, a testing. Hay un desarrollo donde se esta usando angular 9 y me gustaria desplegarlo mas automatizado.
Alguien lo hizo con django?
Tengo página de error 404, alguien tiene alguna idea de que puedo tener mal? https://gitlab.com/xergioalex-projects/my-gitlab-project.
Debería cargar aquí: https://xergioalex-projects.gitlab.io/my-gitlab-project/
Parece ser que le demora entre 15 minutos a 1 hora a gitlab dejar disponible el proyecto:
Cómo detalles importantes a tener en cuenta deben revisar que el "outputPath": "dist/my-gitlab-project" del archivo angular.json sea igual al path que ponen en - mv ./dist/my-gitlab-project/* ./public/ dentro del archivo .gitlab-ci.yml.
Parce muchas gracias, no encontraba el error hasta que revise el angular.json y tenía diferente el nombre.
Les ha pasado que al entrar a ver el log del job de install-dependencies se queda la pantalla cargando? No he podido ver ese log :(
En el job usa el keyword llamado only
my-job: satge: my-stage only: - branches
A mi me paso igual pero yo hice el ejemplo con creat-react-app aparemente lo solucione pero ahora me quedo en blanco.
Si algien esta haciendo el curso con react se necesita agregar una variable en el ci de gitlab.
variables: PUBLIC_URL: "/platzi-devops" # slash is important
Vamos bien hasta el momento!, les dejo el link del repositorio a gitlab: Repositorio !imagen
📚 Nombre de la clase
Configuración de GitLab Pages para despliegue
🎯 Idea principal
GitLab Pages permite automatizar el despliegue de sitios estáticos mediante pipelines CI/CD, convirtiendo cada cambio en una actualización publicada. La clave está en configurar correctamente el pipeline para generar y servir los archivos del sitio. Esto elimina procesos manuales de publicación. El objetivo es tener un flujo de despliegue continuo, simple y confiable.
⚡ Síntesis en 10 segundos
🔑 Puntos clave
.gitlab-ci.ymlpublic/) para servir contenido🧠 Conceptos importantes
public/: ubicación de archivos a servir🧩 Modelo mental de la clase
Código → Build → Carpeta pública → Deploy → Sitio activo
Idea clave: Si automatizas el build y el deploy, publicar se vuelve automático.
🚀 Acciones inmediatas
public/ en el proyecto💼 Aplicación profesional
Impacto real: despliegue continuo sin esfuerzo manual.
🔥 Hacks para la comunidad
📝 Reflexión estratégica
El despliegue manual es una fricción innecesaria en equipos modernos. Automatizarlo libera tiempo y reduce errores.
Los equipos que despliegan sin esfuerzo avanzan más rápido.
Me podrían decir donde esta esa carpeta dist? en el pipeline todo funciono menos lo de esa carpeta
el directorio dist es generado por el comando ng build que el job llamado build-app ejecuta.
si no te funciona talvez no estas creando el artifact para el siguiente stage lo consuma.
o quizas el siguiente este no hace pull de el, debes agregar el keyword llamado dependencies para que haga uso del artifact previamente creado
Mi codigo de .girlab-ci.yml en el job de pages, es el siguiente:
pages: stage: deploy dependencies: - build-app script: - mkdir public - mv ./dist/Morpheus/* ./public/ artifacts: paths: - public environment: name: production only: - branches
Al ejecutar el pipeline me genera el siguiente error en la imagen adjunta:
El error indica que el directorio o archivo no existe, alguien me podria ayudar por que se genera el error. Muchas Gracias de antemano.
¿Se puede usar Gitlab CI para deployar APIs (Backend)? Creo que no funcionaria de la misma manera para con Gitlab Pages o si? Que alternativa es la que hay?