Configurar un pipeline Jenkins para una aplicación Angular

Vamos a configurar un pipeline de Jenkins para desplegar una aplicación Angular en un contenedor Docker. Como casi siempre vamos a utilizar versiones LTS (Long Term Service). En el momento de escribir este articulo las versiones LTS que tenemos son las siguientes:

En que lo vamos a utilizar

• Ubuntu server 22.04 LTS.
• Jenkins Server 2 LTS
• OpenJDK 17
• Node 18 LTS
• Angular 15
• Docker 20.10

Instalación Angular en el servidor

Lo primero que vamos a hacer es instalar node en el servidor de Jenkins

• Agrega la llave de Nodejs, y ejecuta el instalador de paquetes apt. Siempre consulta la llave correcta tomada de la pagina oficial de node.

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

• Verifica que se haya instalado correctamente node

$ node -v
v18.16.0

• Ahora instalamos Angular 15, y verificamos su instalación. (si no le pones la versión instalas la ultima versión que tenga en el npm)

$ sudo npm install -g @angular/cli@15.2.8
...
$ ng version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    
Angular CLI: 15.2.8
Node: 18.16.0
Package Manager: npm 9.6.6
OS: linux x64

Angular: 16.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.1
@angular-devkit/build-angular   16.0.1
@angular-devkit/core            16.0.1
@angular-devkit/schematics      15.2.8 (cli-only)
@schematics/angular             15.2.8 (cli-only)
rxjs                            7.8.1
typescript                      5.0.4

• Para este articulo vamos crear una app de prueba, y la vamos a subir a un repositorio para que de alli lo tome Jenkins.

$ ng new angular-app-jenkins
...
Successfully initialized git.

$ cd angular-app-jenkins
$ git init 
$ git add .
$ git commit -am "Version inicial"
$ git remote add origin https://gitlab.com/luidasa/angular-app-jenkins

• Creamos el archivo Dockerfile en el proyecto de Angular, para tener las instrucciones de empaquetamiento.

### STAGE 1:BUILD ###
# Defining a node image to be used as giving it an alias of "build"
# Which version of Node image to use depends on project dependencies 
# This is needed to build and compile our code 
# while generating the docker image
FROM node:18.16-alpine AS build
# Create a Virtual directory inside the docker image
WORKDIR /dist/src/app
# Copy files to virtual directory
# COPY package.json package-lock.json ./
# Run command in Virtual directory
# Install npm 9.6.6 que es al momento de escribir este articulo la versión mas reciente.
RUN npm install -g npm@9.6.6
RUN npm cache clean --force
# Copy files from local machine to virtual directory in docker image
COPY . .
RUN npm install
RUN npm run build --omit=dev


### STAGE 2:RUN ###
# Defining nginx image to be used
FROM nginx:latest AS ngi
# Copying compiled code and nginx config to different folder
# NOTE: This path may change according to your project's output folder 
COPY --from=build /dist/src/app/dist/domain-app-name /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
# Exposing a port, here it means that inside the container 
# the app will be using Port 80 while running
EXPOSE 80

• Creamos el archivo Jenkinsfile en el proyecto de Angular

/* Requires the Docker Pipeline plugin */
pipeline {
    agent any
    environment {
      VERSION = '1.0'
    }    
    stages {
      stage('build') {
        steps {
          git url: 'https://gitlab.com/luidasa/angular-app-jenkins.git', branch: 'master', credentialsId: 'gitlab-luidasa'
          sh '/usr/bin/ng build --prod'
        }
      }
      stage('build image') {
        steps {
          sh 'docker build -t luidasa/angular-app-jenkins:${VERSION}.${BUILD_NUMBER} .'
        }
      }
      stage('push image to hub') {
        steps {
          withDockerRegistry([credentialsId: "dockerhub", url: ""]) {
            sh 'docker push luidasa/angular-app-jenkins:${VERSION}.${BUILD_NUMBER}'
          }
        }
      }
    }
}

• Por ultimo, configuramos jenkins