Tutorial: Creación de una canalización de varias fases con Azure DevOps

Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019

Puede utilizar una canalización multietapa de Azure DevOps para dividir su proceso de CI/CD en etapas que representen diferentes partes de su ciclo de desarrollo. El uso de una canalización multietapa te da más visibilidad en tu proceso de implementación y facilita la integración de aprobaciones y comprobaciones.

En este artículo, creará dos instancias de App Service y creará una canalización de YAML con tres fases:

• Creación: cree el código fuente y genere un paquete
• Desarrollo: implemente el paquete en un sitio de desarrollo para pruebas
• Ensayo: implemente en una instancia de Azure App Service con una comprobación de aprobación manual

En un escenario del mundo real, puede tener otra etapa para implementar en producción dependiendo de su proceso DevOps.

El código de ejemplo en este ejercicio es para una aplicación web .NET para un juego espacial ficticio que incluye una tabla de clasificación para mostrar las puntuaciones más altas. Se implementará tanto en las instancias de desarrollo como en las de producción de Azure Web App para Linux.

Requisitos previos

• Una cuenta de GitHub en la que pueda crear un repositorio. cree una de forma gratuita.
• Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
• Una organización y proyecto de Azure DevOps. cree una de forma gratuita.
• Tener capacidad para ejecutar canalizaciones en agentes hospedados por Microsoft. Puede comprar un trabajo paralelo o solicitar un nivel gratuito.

Bifurcación del proyecto

Bifurque el siguiente repositorio de ejemplo en GitHub.

https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy

Creación de las instancias de App Service

Para poder implementar la canalización, primero debe crear una instancia de App Service en la que hacer la implementación. Usará la CLI de Azure para crear la instancia.

1. Inicie sesión en Azure Portal.

2. En el menú, seleccione Cloud Shell y la experiencia Bash.

3. Genere un número aleatorio que haga que el nombre de dominio de la aplicación web sea único. La ventaja de tener un valor único es que la instancia de App Service no tendrá un conflicto de nombre con otros alumnos que completen este tutorial.

   webappsuffix=$RANDOM    
   

4. Abra un símbolo del sistema y utilice un comando az group create para crear un grupo de recursos denominado tailspin-space-game-rg que contenga todas sus instancias de App Service. Actualice el valor location para usar la región más cercana.

   az group create --location eastus --name tailspin-space-game-rg
   

5. Use el símbolo del sistema para crear un plan de App Service.

   az appservice plan create \
     --name tailspin-space-game-asp \
     --resource-group tailspin-space-game-rg \
     --sku B1 \
     --is-linux
   

6. En el símbolo del sistema, cree dos instancias de App Service, una para cada instancia (desarrollo y ensayo) con el comando az webapp create.

   az webapp create \
     --name tailspin-space-game-web-dev-$webappsuffix \
     --resource-group tailspin-space-game-rg \
     --plan tailspin-space-game-asp \
     --runtime "DOTNET|6.0"
   
   az webapp create \
     --name tailspin-space-game-web-staging-$webappsuffix \
     --resource-group tailspin-space-game-rg \
     --plan tailspin-space-game-asp \
     --runtime "DOTNET|6.0"
   

7. Con el símbolo del sistema, enumere ambas instancias de App Service para comprobar que se ejecutan con el comando az webapp list.

   az webapp list \
     --resource-group tailspin-space-game-rg \
     --query "[].{hostName: defaultHostName, state: state}" \
     --output table
   

8. Copie los nombres de las instancias de App Service para utilizarlos como variables en la siguiente sección.

Creación de un proyecto y variables de Azure DevOps

Configure su proyecto Azure DevOps y una canalización de compilación. También agregará variables para su entorno de desarrollo e instancias de ensayo.

La canalización de compilación:

• Incluye un desencadenador que se ejecuta cuando hay un cambio de código en la rama
• Define dos variables, buildConfiguration y releaseBranchName.
• Incluye una etapa llamada compilación que compila la aplicación web
• Publica un artefacto que utilizarás en una etapa posterior

Adición de la fase de compilación

1. Inicie sesión en su organización de Azure DevOps y vaya a su proyecto.

2. Ve a Canalizaciones y selecciona Nueva canalización o Crear canalización si vas a crear tu primera canalización.

3. Siga los pasos del asistente y seleccione primero GitHub como ubicación del código fuente.

4. Puede que se le redirija a GitHub para iniciar sesión. Si es así, escriba sus credenciales de GitHub.

5. Cuando vea la lista de repositorios, seleccione el repositorio.

6. Es posible que se le redirija a GitHub para instalar la aplicación Azure Pipelines. Si es así, seleccione Aprobar e instalar.

7. Cuando aparezca la pestaña Configurar, seleccione Canalización de inicio.

8. Sustituya el contenido de azure-pipelines.yml por este código.

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
     releaseBranchName: 'release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         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: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '**/*.csproj'
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   

9. Cuando esté listo, seleccione Guardar y ejecutar.

Adición de variables de instancia

1. En Azure DevOps, vaya a Canalización>Biblioteca.

2. Seleccione + Grupo de variables.

3. En Propiedades, añada Lanzamiento para el nombre del grupo de variables.

4. Cree dos variables para hacer referencia a sus nombres de host de desarrollo y de almacenamiento provisional. Sustituya el valor 1234 por el valor correcto para su instancia.

   Nombre de la variable	Valor de ejemplo
   WebAppNameDev	tailspin-space-game-web-dev-1234
   WebAppNameStaging	tailspin-space-game-web-staging-1234

5. Seleccione Guardar para guardar las variables.

Incorporación de la fase de desarrollo

A continuación, actualizará su canalización para promover su compilación a la fase Desarrollo.

1. En Azure Pipelines, vaya a Canalizaciones>Canalizaciones.

2. Seleccione Editar en el menú contextual para editar su canalización.

   

3. Actualice azure-pipelines.yml para incluir una fase de desarrollo. En la fase de desarrollo, su canalización:

   • Se ejecutará cuando la etapa de compilación se ejecute correctamente debido a una condición

   • Descargar un artefacto de drop

   • Implementar en Azure App Service con una conexión de servicio Azure Resource Manager.

     trigger:
     - '*'
     
     variables:
       buildConfiguration: 'Release'
       releaseBranchName: 'release'
     
     stages:
     - stage: 'Build'
       displayName: 'Build the web application'
       jobs: 
       - job: 'Build'
         displayName: 'Build job'
         pool:
           vmImage: 'ubuntu-20.04'
           demands:
           - npm
     
         variables:
           wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
           dotnetSdkVersion: '6.x'
     
         steps:
         - task: UseDotNet@2
           displayName: 'Use .NET SDK $(dotnetSdkVersion)'
           inputs:
             version: '$(dotnetSdkVersion)'
     
         - task: Npm@1
           displayName: 'Run npm install'
           inputs:
             verbose: false
     
         - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
           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: $(wwwrootDir)
     
         - task: DotNetCoreCLI@2
           displayName: 'Restore project dependencies'
           inputs:
             command: 'restore'
             projects: '**/*.csproj'
     
         - task: DotNetCoreCLI@2
           displayName: 'Build the project - $(buildConfiguration)'
           inputs:
             command: 'build'
             arguments: '--no-restore --configuration $(buildConfiguration)'
             projects: '**/*.csproj'
     
         - task: DotNetCoreCLI@2
           displayName: 'Publish the project - $(buildConfiguration)'
           inputs:
             command: 'publish'
             projects: '**/*.csproj'
             publishWebProjects: false
             arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
             zipAfterPublish: true
     
         - publish: '$(Build.ArtifactStagingDirectory)'
           artifact: drop
     
     - stage: 'Dev'
       displayName: 'Deploy to the dev environment'
       dependsOn: Build
       condition:  succeeded()
       jobs:
       - deployment: Deploy
         pool:
           vmImage: 'ubuntu-20.04'
         environment: dev
         variables:
         - group: Release
         strategy:
           runOnce:
             deploy:
               steps:
               - download: current
                 artifact: drop
               - task: AzureWebApp@1
                 displayName: 'Azure App Service Deploy: dev website'
                 inputs:
                   azureSubscription: 'your-subscription'
                   appType: 'webAppLinux'
                   appName: '$(WebAppNameDev)'
                   package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
     

4. Cambie la tarea AzureWebApp@1 para utilizar su suscripción.

   1. Seleccione Configuración para la tarea.

      

   2. Actualice el valor your-subscription de Suscripción a Azure para utilizar su propia suscripción. Es posible que tenga que autorizar el acceso como parte de este proceso. Si tiene un problema al autorizar el recurso en el editor de YAML, un enfoque alternativo consiste en crear una conexión de servicio.

      

   3. Establezca el Tipo de aplicación en Web App en Linux.

   4. Seleccione Agregar para actualizar la tarea.

5. Guarde y ejecute la canalización.

Incorporación de la fase de ensayo

Por último, promoverá la fase de desarrollo al almacenamiento provisional. A diferencia de la fase de desarrollo, que desea tener más control en el entorno de puesta en escena que va a agregar una aprobación manual.

Creación del entorno de ensayo

1. En Azure Pipelines, seleccione Entornos.

2. Seleccione Nuevo entorno.

3. Cree un nuevo entorno con el nombre almacenamiento provisional y Recurso configurado como Ninguno.

4. En la página del entorno de ensayo, seleccione Aprobaciones y comprobaciones.

   

5. Seleccione Aprobaciones.

6. En Aprobaciones, seleccione Agregar usuarios y grupos y, a continuación, seleccione su cuenta.

7. En Instrucciones para aprobadores, escriba Aprobar este cambio cuando esté listo para el almacenamiento provisional.

8. Seleccione Guardar.

Agregar una nueva fase a la canalización

Agregará una nueva fase, Staging a la canalización que incluye una aprobación manual.

1. Edite su archivo de su canalización y agregue la sección Staging.

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
     releaseBranchName: 'release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         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: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '**/*.csproj'
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   
   - stage: 'Dev'
     displayName: 'Deploy to the dev environment'
     dependsOn: Build
     condition:  succeeded()
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-20.04'
       environment: dev
       variables:
       - group: Release
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: dev website'
               inputs:
                 azureSubscription: 'your-subscription'
                 appType: 'webAppLinux'
                 appName: '$(WebAppNameDev)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
   
   - stage: 'Staging'
     displayName: 'Deploy to the staging environment'
     dependsOn: Dev
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-20.04'
       environment: staging
       variables:
       - group: 'Release'
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: staging website'
               inputs:
                 azureSubscription: 'your-subscription'
                 appType: 'webAppLinux'
                 appName: '$(WebAppNameStaging)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
   

2. Cambie la tarea AzureWebApp@1 en la fase de almacenamiento provisional para utilizar su suscripción.

   1. Seleccione Configuración para la tarea.

      

   2. Actualice el valor your-subscription de Suscripción a Azure para utilizar su propia suscripción. Es posible que tenga que autorizar el acceso como parte de este proceso.

      

   3. Establezca el Tipo de aplicación en Web App en Linux.

   4. Seleccione Agregar para actualizar la tarea.

3. Vaya a la ejecución de la canalización. Observe cómo se ejecuta la compilación. Cuando llega a Staging, la canalización espera la aprobación manual de lanzamiento. También recibirá un correo electrónico informándole de que tiene una canalización pendiente de aprobación.

   

4. Revise la aprobación y permita que se ejecute la canalización.

   

Limpieza de recursos

Si no va a seguir usando esta aplicación, elimine el grupo de recursos en Azure Portal y el proyecto de Azure DevOps con los pasos siguientes:

Para limpiar el grupo de recursos:

1. Abra Azure Portal e inicie sesión.

2. En la barra de menús, seleccione Cloud Shell. Cuando se le solicite, seleccione la experiencia de Bash.

   

3. Ejecute el siguiente comando az group delete para eliminar el grupo de recursos que ha usado, tailspin-space-game-rg.

   az group delete --name tailspin-space-game-rg
   

Para eliminar el proyecto de Azure DevOps, incluida la canalización de compilación, consulte Eliminación de proyecto.

Contenido relacionado

• Conceptos clave para los nuevos usuarios de Azure Pipelines
• Implementación en App Service mediante Azure Pipelines