Ejercicio: Implementación de la aplicación web en Azure App Service

  • 13 minutos

En este módulo, creará una canalización de varias fases para compilar e implementar la aplicación en Azure App Service. Aprenderá a:

  • Cree una instancia de App Service para hospedar la aplicación web.
  • Cree una canalización de varias fases.
  • Implementación en Azure App Service.

Creación de la instancia de App Service

  1. Inicie sesión en Azure Portal.

  2. Seleccione App Services en el panel izquierdo.

  3. Seleccione Crear>aplicación web para crear una nueva aplicación web.

  4. En la pestaña Datos básicos, especifique los valores siguientes.

    Configuración Importancia
    Detalles del proyecto
    Suscripción tu suscripción
    Grupo de recursos Seleccione Crear nuevo y, a continuación, escriba tailspin-space-game-rg y seleccione Aceptar.
    Detalles de instancia
    Nombre Proporcione un nombre único, como tailspin-space-game-web-1234. Este nombre debe ser único en Azure. Se convierte en parte del nombre de dominio. En la práctica, elija un nombre que describa el servicio. Anote el nombre para más adelante.
    Publicar Código
    Pila de tiempo de ejecución .NET 8 (LTS)
    Sistema operativo Linux
    Región Seleccione una región, preferiblemente una cercana.
    Planes de precios
    Plan de Linux Acepte el predeterminado.
    Plan de precios Seleccione el plan de tarifa Básico B1 en el menú desplegable.

  5. Seleccione Revisar y crear, revise el formulario y, a continuación, seleccione Crear. La implementación tardará un poco en completarse.

  6. Una vez finalizada la implementación, seleccione Ir al recurso. App Service Essentials muestra los detalles relacionados con la implementación.

    Captura de pantalla que muestra los detalles de implementación, incluida la dirección URL de implementación.

  7. Seleccione la dirección URL para comprobar el estado de App Service.

    Captura de pantalla de un explorador web que muestra la página principal predeterminada de App Service.

Importante

En la página Limpieza del entorno de Azure DevOps de este módulo se explica cómo anular la instancia de App Service después de que haya terminado con él. La limpieza ayuda a garantizar que no se le cobra por los recursos de Azure después de completar este módulo. Asegúrese de seguir los pasos de limpieza incluso si no completa este módulo.

Creación de una conexión de servicio

Importante

Asegúrese de que ha iniciado sesión en Azure y Azure DevOps en la misma cuenta de Microsoft.

  1. En Azure DevOps, vaya al proyecto Space Game - web - Release .

  2. En la esquina inferior izquierda de la página, seleccione Configuración del proyecto.

  3. En Canalizaciones, seleccione Conexiones de servicio.

  4. Seleccione Crear conexión de servicio y, después, Seleccione Azure Resource Manager y, luego, Siguiente.

  5. Seleccione Entidad de servicio (automática) y, después, Siguiente.

  6. Rellene los campos obligatorios como se indica a continuación: Si se le solicita, inicie sesión en su cuenta Microsoft.

    Campo Importancia
    Nivel de ámbito Suscripción
    Suscripción Su suscripción de Azure
    Grupo de recursos tailspin-space-game-rg
    Nombre de conexión de servicio Resource Manager- Tailspin - Space Game

  7. Asegúrese de que la opción Conceder permiso de acceso a todas las canalizaciones está seleccionada.

  8. Seleccione Guardar.

Incorporación de la fase de compilación a la canalización

Una canalización de varias fases permite definir fases distintas a las que pasa el cambio a medida que se promueve a través de la canalización. Cada fase define el agente, las variables y los pasos necesarios para llevar a cabo esa fase de la canalización. En esta sección, definirá una fase para realizar la compilación. Defina una segunda fase para implementar la aplicación web en App Service.

Para convertir la configuración de compilación existente en una canalización de varias fases, agregue una stages sección a la configuración y, a continuación, agregue una o varias stage secciones para cada fase de la canalización. Las fases se dividen en trabajos, que son una serie de pasos que se ejecutan secuencialmente como una unidad.

  1. En el proyecto de Visual Studio Code, abra azure-pipelines.yml y reemplace su contenido por este código:

    trigger:
- '*'

variables:
  buildConfiguration: '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

  2. Desde el terminal integrado, ejecute los siguientes comandos para almacenar provisionalmente, confirmar y, a continuación, insertar los cambios en la rama remota.

    git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline

  3. En Azure Pipelines, navega a tu pipeline para ver los registros.

  4. Una vez finalizada la compilación, seleccione el botón Atrás para volver a la página de resumen y comprobar el estado de la canalización y el artefacto publicado.

    Captura de pantalla de Azure Pipelines que muestra el resumen del trabajo.

Creación del entorno de desarrollo

Un entorno es una representación abstracta del entorno de implementación. Puede usar entornos para definir criterios específicos para la versión, como qué canalización está autorizada para implementar en el entorno. También puede usar entornos para configurar aprobaciones manuales para usuarios o grupos específicos que aprueben antes de reanudar la implementación.

  1. En Azure Pipelines, seleccione Entornos.

    Captura de pantalla de Azure Pipelines que muestra la ubicación de la opción de menú Entornos.

  2. Selecciona Crear entorno.

  3. En Nombre, escriba dev.

  4. Deje los campos restantes en sus valores predeterminados.

  5. Seleccione Crear.

Guarda el nombre de la aplicación web en una variable de canalización

La fase Implementar que estamos creando usa el nombre para identificar a qué instancia de App Service se va a implementar; por ejemplo, tailspin-space-game-web-1234.

Aunque podría codificar de forma rígida este nombre en la configuración de la canalización, definirlo como una variable hace que la configuración sea más reutilizable.

  1. En Azure DevOps, seleccione Canalizaciones y luego Biblioteca.

    Captura de pantalla de Azure Pipelines que muestra la ubicación del menú Biblioteca.

  2. Seleccione + Grupo de variables para crear un nuevo grupo de variables.

  3. Escriba Release para el nombre del grupo de variables.

  4. Seleccione Agregar en Variables para agregar una nueva variable.

  5. Escriba WebAppName para el nombre de la variable y el nombre de la instancia de App Service para su valor: por ejemplo, tailspin-space-game-web-1234.

  6. Seleccione Guardar.

Incorporación de la fase de implementación a la canalización

Ampliamos nuestra canalización agregando una fase de implementación para implementar Space Game en App Service utilizando las tareas download y AzureWebApp@1 para descargar el artefacto de compilación y, a continuación, implementarlo.

  1. En Visual Studio Code, reemplace el contenido de azure-pipelines.yml por el siguiente código yaml:

    trigger:
- '*'

variables:
  buildConfiguration: '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: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  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: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

    Note la sección resaltada y cómo estamos utilizando las tareas download y AzureWebApp@1. La canalización recupera el $(WebAppName) del grupo de variables que creamos anteriormente.

    Observe también cómo se usa environment para implementar en el entorno de desarrollo .

  2. En el terminal integrado, agregue azure-pipelines.yml al índice. A continuación, confirme el cambio e insértelo en GitHub.

    git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline

  3. En Azure Pipelines, navega a tu pipeline para ver los registros.

  4. Una vez finalizada la compilación, seleccione el botón Atrás para volver a la página de resumen y comprobar el estado de las fases. Ambas fases finalizaron correctamente en nuestro caso.

    Captura de pantalla de Azure Pipelines en la que se muestran las fases de compilación e implementación completadas.

Visualización del sitio web implementado en App Service

  1. Si todavía tiene abierta la pestaña App Service, actualice la página. De lo contrario, vaya a Azure App Service en Azure Portal y seleccione la dirección URL de la instancia: por ejemplo, https://tailspin-space-game-web-1234.azurewebsites.net

    Captura de pantalla que muestra los detalles de la implementación.

  2. El sitio web de Space Game se implementa correctamente en Azure App Service.

    Captura de pantalla del explorador web que muestra el sitio web space Game.

¡Felicidades! Ha implementado correctamente el sitio web de Space Game en Azure App Service mediante Azure Pipelines.