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