Microsoft Azure

Continuous Delivery utilizando Azure DevOps

Hola, en este artículo veremos cómo automatizar el despliegue de una aplicación web utilizando Azure Devops, Git y en un App Service de MS Azure.

Prerrequisitos:

Disclaimer: Dada la constante actualización de las tecnologías de Cloud Computing algunos pasos pueden ser diferentes al momento de leer el artículo, haré el esfuerzo por mantenerlo actualizado, pero podría haber algunas diferencias entre lo que se muestre a continuación y la consola de Azure al momento de la implementación.

Creación del sitio web

Vamos a comenzar creando la aplicación:

  1. Ingresar a Visual Studio Code, crearemos un archivo html con una estructura básica y lo nombrearemos index.html.
<!DOCTYPE html>
<html lang="en">
<head>
    <!--Created by Victor Villar-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Victor Villar Demo</title>
</head>
<body>
    <h1>Hello from Visual Studio Code </h1>
    <h2>Learning about Azure DevOps</h2>
</body>
</html>

Creación del repositorio de Azure DevOps

  1. Ir hacia el portal de Azure DevOps (https://azure.microsoft.com/en-us/services/devops/) En caso de no estar registrados nos registramos (utilizar el mismo correo con el que se tiene acceso a Azure) o sino ingresamos nuestras credenciales.
  2. En la parte superior derecha dar click en Create Project, en advanced asegurarse de que esté seleccionada la opción Git. Dar click en Create.
  3. En las pestañas de la izquierda ir hacia la opción Repos
  4. Vamos a hacer un push de nuestro archivo html utilizando los comandos que nos aparecen en la pantalla. Previo a ello tenemos que abrir el programa de Git Bash y dirigirnos a la carpeta donde se encuentra el archivo html y digitamos los siguientes comandos
  5. git init
    git add .
    git commit -m “first commit”
    git remote add origin https://victorhugovillar@dev.azure.com/victorhugovillar/demovvillar/_git/demovvillar
    git push -u origin –all
  6. Si regresamos a Azure DevOps y hacemos un refresh en la página de Repos>Files veremos el código que acabamos de subir.
  7. Ahora que tenemos listo nuestro repositorio iremos hacia Azure y crearemos un App Service para alojar nuestra página web ingresando a portal.azure.com. Click en All Services y después en App Services.
  8. Damos click en Add en la parte superior y depues rellenamos los siguientes valores
    • Subscription: <Nuestra suscripción>
    • Resource group: Create new > rg-vvillar
    • Name: as-demovvillar
    • Publish: Code
    • Runtime Stack: .NET Core 2.2
    • Operating system: Windows
    • Region: Brazil South
    • Windows Plan: Create new > asp-vvillardemo
    • Sku and size: Standard S1
    Damos click en Review and Create y despues en Create

Creación del pipeline de Azure DevOps

  1. Regresamos hacia Azure Devops y vamos a la pestaña de la izquierda llamada Pipelines > Builds y damos click en New Pipeline
  2. Seleccionar Azure Repos Git
  3. Seleccionar el repositorio creado
  4. Como la aplicación de demo solo consta de un archivo HTML seleccionamos HTML, si tuviéramos otro tipo de proyecto escogemos aquí de que tipo de proyecto vamos a realizar el build.
  5. Nos aparece una ventana con el archivo YAML de las configuraciones que fuimos realizando en los pasos previos. Dar click en Save and run
  6. Dejamos el valor seleccionado: Commit directly to the master Branch y dar click en Save and run
  7. Esperamos a que el job del build compile la aplicación y todos los pasos aparezcan con un check de color verde
  8. Ahora vamos a generar el pipeline para el release, para ello ir a Pipelines> Releases y damos click en New Pipeline
  9. En la ventana emergente de la izquierda seleccionar Azure App Service Deployment
  10. Cerramos la ventana emergente y damos click sobre +Add an Artifact, seleccionamos Build, escogemos nuestro Build y damos click en Add
  11. Damos click en la parte superior donde aparece la figura de un rayo y en la primera opción la dejamos como Enabled y cerramos la ventana.
  12. Dar click en el recuadro de Stage 1 sobre el enlace “1 job, 1 task”, en la primera casilla seleccionamos nuestra suscripción, damos click en Authorize (en caso de requerir autenticación agregamos nuestro usuario de Azure) y en la tercera casilla seleccionamos nuestro App Service, en la parte superior derecha damos click en Save y damos click en OK
  13. Para gatillar el proceso vamos a nuestro código, agregamos una línea en el body
  14. <h3>CD from Azure DevOps</h3>
    Guardamos los cambios
  15. Regresamos a Git Bash y ejecutamos los comandos
  16. git pull
    :wq
    git add .
    git commit -m “new commit”
    git push -u origin -all
  17. Si regresamos a Visual Studio Code y realizamos un nuevo commit se gatillará un proceso para que se cree un release
  18. Regresar a Azure y en el App Service en la parte superior dar click en Browse, veremos el sitio web con los nuevos cambios

Leave a Reply

avatar
  Subscribe  
Notify of