Anterior

Siguientes

Ejercicio: Creación de la canalización

Completado

Hasta este momento, Mara ha definido una configuración de compilación para el sitio web de Space Game. Ahora es su turno. Va a crear una canalización y a generar su primer artefacto de compilación.

Como ya vio, Mara utilizó un archivo YAML para definir la compilación. Cuando cree una canalización, el proceso le pedirá el archivo YAML, pero el proyecto aún carece de este archivo.

Cuando no se proporciona un archivo YAML inicial para el proyecto, Azure Pipelines puede crear uno automáticamente en función del tipo de aplicación. En este caso, compilará una aplicación ASP.NET Core, pero Azure Pipelines también proporciona configuraciones de compilación de inicio para otros tipos de proyecto, como Java, Go, etc.

Creación de la canalización

1. En Azure DevOps, vaya al proyecto.

2. Seleccione Canalizaciones en la página del proyecto o en el panel de la izquierda.

3. Seleccione Crear canalización (o Nueva canalización si no es la primera canalización del proyecto).

4. En la pestaña Conectar, seleccione GitHub.

   Cuando se le solicite, escriba las credenciales de GitHub.

5. En la pestaña Seleccionar, seleccione el repositorio mslearn-tailspin-spacegame-web.

6. Es posible que se le redirija a GitHub para instalar la aplicación de Azure Pipelines. Si es así, desplácese hasta la parte inferior y seleccione Aprobar e instalar.

7. En la pestaña Configurar, seleccione ASP.NET Core.

   Nota:

   Si no ve esta opción, seleccione Mostrar más. No seleccione ASP.NET Core (.NET Framework).

   

8. En la pestaña Revisar, anote la configuración inicial de la compilación.

   

   Se trata de una configuración muy básica que Azure DevOps proporciona en función del tipo de aplicación, ASP.NET Core. La configuración predeterminada usa un agente hospedado por Microsoft.

   Reemplace el texto vmImage: ubuntu-latest por name: Default (o el nombre del grupo de agentes si especificó otro grupo al configurar los secretos del repositorio de Codespaces).

9. En la pestaña Revisar, seleccione Guardar y ejecutar. Para confirmar los cambios en GitHub e iniciar la canalización, elija Confirmar directamente en la rama principal y seleccione nuevamente Guardar y ejecutar. Si se le pide que conceda permiso con un mensaje como This pipeline needs permission to access a resource before this run can continue, elija Ver y siga las indicaciones para permitir el acceso.

Consulta de la ejecución de la canalización

En Trabajos, seleccione Trabajo. Después, haga un seguimiento del proceso de compilación a través de cada uno de los pasos. Para ver el resultado del trabajo como archivo de texto cuando se complete la compilación, puede seleccionar también View raw log (Ver registro sin procesar).

Si la canalización no se inicia rápidamente, compruebe que Codespaces todavía se está ejecutando. Codespaces se apagará después de 30 minutos y es posible que deba reiniciarse.

Si el estado de la canalización permanece En cola y no pasa a En ejecución después de unos instantes, compruebe los trabajos paralelos y solicite una concesión gratuita. Si no tiene acceso a trabajos paralelos, puede iniciar el módulo con Codespaces.

Aquí puede ver los pasos que ha creado la definición de compilación. Prepara la máquina virtual, captura el código fuente más reciente de GitHub y, después, compila la aplicación.

Esta configuración es un inicio fantástico, ya que ahora dispone de un sitio para agregar tareas de compilación. Pero debe actualizarse para satisfacer las necesidades del equipo de Tailspin, como minificar archivos JavaScript y CSS.

Sugerencia

Compruebe su correo electrónico. Puede que ya haya recibido una notificación de compilación con los resultados de la ejecución. Estas notificaciones se pueden usar para informar a los miembros del equipo cuando las compilaciones se completen y si lo han hecho correctamente o con errores.

Incorporación de tareas de compilación

Ahora que ya tiene un proceso de compilación en marcha, puede empezar a agregar tareas de compilación.

Recuerde que está trabajando en la rama main. Para retener su trabajo, ahora creará una rama denominada build-pipeline. La rama proporciona un lugar para experimentar y conseguir que la compilación funcione completamente sin que afecte al resto del equipo.

Se pueden agregar tareas de compilación a azure-pipelines.yml directamente desde Azure Pipelines. Azure Pipelines confirmará los cambios directamente en la rama. Aquí cambiará azure-pipelines.yml de forma local, e insertará o cargará los cambios en GitHub. Hacerlo de esta manera le permite practicar sus aptitudes de Git. Vea la canalización para compilar automáticamente la aplicación cuando inserte cambios.

En la práctica, podría agregar las tareas de compilación una a una, insertar los cambios que procedan y ver la ejecución de la compilación. Aquí se agregarán todas las tareas de compilación que hemos identificado anteriormente al mismo tiempo.

Nota:

Está a punto de ejecutar algunos comandos de Git. No se preocupe si no está familiarizado con Git. Le indicaremos lo que tiene que hacer. También veremos Git con más detalle en módulos posteriores.

1. Vaya al terminal integrado en Visual Studio Code. Asegúrese de ir a la rama main del repositorio y, a continuación, siga los pasos.

2. Para capturar los cambios más recientes de GitHub y actualizar la rama main, ejecute este comando git pull.

   git pull origin main
   

   Podrá ver en la salida que Git captura un archivo llamado azure-pipelines.yml. Esta es la configuración de canalización de inicio que Azure Pipelines ha creado automáticamente. Al configurar la canalización, Azure Pipelines agrega este archivo al repositorio de GitHub.

3. Para crear una rama denominada build-pipeline, ejecute este comando git checkout:

   git checkout -B build-pipeline
   

4. En Visual Studio Code, cambie azure-pipelines.yml tal como se ve aquí:

   trigger:
   - '*'
   
   pool:
     name: 'Default' # Replace Default with the name of your agent pool if you used a different pool
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     displayName: 'Compile Sass assets'
   
   - task: gulp@1
     displayName: 'Run gulp tasks'
   
   - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
     displayName: 'Write build info'
     workingDirectory: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   

   trigger:
   - '*'
   
   pool:
     vmImage: ubuntu-latest
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     displayName: 'Compile Sass assets'
   
   - task: gulp@1
     displayName: 'Run gulp tasks'
   
   - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
     displayName: 'Write build info'
     workingDirectory: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   

   En la sección steps, se ven las tareas de compilación que se asignan a cada uno de los comandos de script que hemos identificado anteriormente.

   Azure Pipelines proporciona tareas de compilación integradas que se asignas a muchas actividades de compilación comunes. Por ejemplo, la tarea DotNetCoreCLI@2 se asigna a la utilidad de la línea de comandos dotnet. La canalización usa DotNetCoreCLI@2 dos veces: una para restaurar (o instalar) las dependencias del proyecto y la otra para compilar el proyecto.

   Recuerde que no todas las actividades de compilación se asignan a una tarea integrada. Por ejemplo, no hay ninguna tarea integrada que ejecute la utilidad node-Sass o que escriba información de compilación en un archivo de texto. Para ejecutar comandos generales del sistema, utilice CmdLine@2 o la tarea script. La canalización usa la tarea script porque es un método abreviado habitual de la tarea CmdLine@2.

   En el paso de compilación que escribe la información sobre la compilación en un archivo, tenga en cuenta estos elementos:

   • $(Build.DefinitionName)
   • $(Build.BuildId)
   • $(Build.BuildNumber)

   Estos elementos son variables integradas que el sistema proporciona para su uso en las canalizaciones:

   • $(Build.DefinitionName) es el nombre de la canalización de compilación. Por ejemplo, "SpaceGame-Web-CI".
   • $(Build.BuildId) es un identificador numérico de la compilación completada, como 115.
   • $(Build.BuildNumber) es el nombre de la compilación completada. Se puede configurar el formato, pero el número de compilación incluye de manera predeterminada la fecha actual, seguida del número de compilación de ese día. Un ejemplo de número de compilación es "20190329.1".

   También puede definir sus propias variables, algo que haremos en breve.

   Puede que también se haya dado cuenta de la tarea UseDotNet@2, que es el primer paso de la compilación. Mara se acordó de que el script de compilación no instalaba las herramientas de compilación necesarias. Aunque el agente de compilación incluye varias versiones del SDK de .NET, esta tarea permite al autor de la canalización especificar fácilmente la versión que debe usar en el agente de compilación.

5. Ejecute los comandos siguientes de Git desde el terminal integrado para agregar azure-pipelines.yml al índice, confirmar el cambio e insertar el cambio en GitHub. Estos pasos son similares a los pasos que se han realizado anteriormente.

   Sugerencia

   Antes de ejecutar estos comandos de Git, recuerde guardar el archivo azure-pipelines.yml.

   git add azure-pipelines.yml
   git commit -m "Add build tasks"
   git push origin build-pipeline
   

   Esta vez, se insertará la rama build-pipeline en GitHub, no la rama main.

   Al insertar la rama en GitHub, se desencadena el proceso de compilación en Azure Pipelines.

6. En Azure Pipelines, vaya a la compilación. Para ello, en el lateral de la página, seleccione Canalizaciones y, después, seleccione la canalización. Verá un mensaje de confirmación en el que se le indicará que la compilación se ejecutará con el código de la rama build-pipeline.

   

   Sugerencia

   Si no ve la compilación de inmediato, espere unos momentos o actualice la página.

7. Seleccione la compilación y elija Trabajos, y lleve a cabo un seguimiento de las tareas de compilación mientras se ejecutan.

   Por ejemplo, esto es lo que sucede cuando la tarea gulp@1 se ejecuta para realizar las tareas de gulp que minifican los recursos de CSS y JavaScript:

   

   Si se produce un error en algún paso, verá el error en la salida para que pueda diagnosticarlo y corregirlo.

   Anteriormente, ha ejecutado una configuración de compilación más mínima. Esta vez, cuando se complete la compilación, verá un conjunto más completo de tareas necesarias para compilar la aplicación.

   

8. Una vez completada la compilación, seleccione cualquiera de los pasos para ver la progresión general de la compilación. Desde ahí, puede ir a los registros de compilación o al cambio relacionado en GitHub.

   

Continuar