Publicar aplicaciones Angular en GitLab Pages

En este post vamos a ver un sencillo ejemplo para publicar una aplicación angular en GitLab Pages sin necesidad de costes adicionales, todo desde una cuenta gratuita de GitLab. Para la realización de este post he usado como ejemplo mi proyecto MedicalTests publicado en mi cuenta de GitLab.

GitLab Pages

La plataforma GitLab tiene muchas otras herramientas además del control de versiones en repositorios git, también nos proporciona herramientas para gestionar tareas de CI/CD (Continuous Integration y Continuous Delivery), estas tareas pueden ser la de ejecutar tests, generar versiones de nuestro software o prepararlas para su entrega. En este caso vamos a hacer un uso distinto de esta herramienta combinandola con GitLab Pages, otra herramienta de GitLab que nos va a permitir alojar websites estáticos.

El fichero .gitlab-ci.yml

La configuración de GitLab CI/CD se controla desde un fichero llamado “.gitlab-ci.yml”, a continuación vemos un ejemplo de la estructura de este fichero:

image: alpine:latest
pages:
  stage: deploy
  script:
  - echo 'Bienvenidos a mi blog www.alejandromoran.com!'
  artifacts:
    paths:
    - public
  only:
  - master

Esta congfiguración permitirá que se publique el contenido del directorio “public” directamente en GitLab pages. Si ponemos un fichero index.html en ese directorio “public” podremos navegar a la dirección “https://tunombredeusuario.gitlab.io/nombredeproyecto/index.html” y ver nuestro fichero online.

Vamos a por Angular

En este punto tenemos casi todo listo. El  script previamente mostrado es practicamente todo lo que necesitamos, ahora deberíamos construir nuestro proyecto con ng build y copiar el contenido del directorio dist en el directorio público de GitLab Pages. Pero… esto deberiamos hacer cada vez que queramos desplegar nuestro proyecto así que debemos automatizarlo para no hacerlo de forma manual cada vez.

La sección script: del código mostrado anteriormente puede contener instrucciones para construir nuestro proyecto así que lo único que necesitamos es añadirlas y preparar nuestra construcción:

script:
- npm install -g @angular/cli@6.2.1
- npm install
- ng build
- mv dist/* public/

Con estos pasos instalaremos la herramientas Angular CLI necesaria y posteriormente instalaremos el resto de librerias utilizadas en nuestro proyecto. A continuación construiremos el proyecto tal cual lo hacemos en nuestras máquinas con ng build, finalmente moveremos todo el contenido de nuestro proyecto compilado en la carpeta dist al directorio publico de GitLab Pages.

Nota: La máquina Docker por defecto de GitLab no cuenta con NPM y por eso necesitamos hacer uso de una máquina que si lo incluya.

image: node:8.12.0

El fichero .gitlab-ci.yml final

image: node:8.12.0

pages:
  cache:
    paths:
    - node_modules/

  stage: deploy
  script:
  - npm install -g @angular/cli@6.2.1
  - npm install
  - ng build --base-href https://alejandromoran.gitlab.io/MedicalTests/
  - mv dist/* public/
  artifacts:
    paths:
    - public
  only:
  - master
  - pages

Este fichero incluye la opción de cachear el directorio node_modules y así evitaremos descargar todas las dependencias en cada despliegue de nuestra aplicación. Además se ha añadido la restricción para que este despliegue sea efectivo únicamente si se realiza desde las ramas master o pages.

Fuente: https://medium.com/@atiaxi/publishing-a-standalone-angular-app-on-gitlab-pages-b58458d2c94

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.