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