Ejercicio: Configuración del entorno de Azure DevOps

En esta sección, se asegurará de que la organización de Azure DevOps esté configurada para completar el resto de este módulo. También creará los entornos de Azure App Service en los que va a realizar la implementación.

Para configurar el sistema, hará lo siguiente:

Adición de un usuario a Azure DevOps

Para completar este módulo, necesita su propia suscripción de Azure. Puede empezar a trabajar con Azure de forma gratuita.

Aunque no necesita una suscripción de Azure para trabajar con Azure DevOps, en este módulo usará Azure DevOps para implementar en los recursos que existen en la suscripción de Azure. Para simplificar el proceso, debe usar la misma cuenta Microsoft para iniciar sesión en la suscripción de Azure y en la organización de Azure DevOps.

Si usa cuentas microsoft diferentes para iniciar sesión en Azure y Azure DevOps, agregue un usuario a su organización de DevOps en la cuenta microsoft que usa para iniciar sesión en Azure. Para obtener más información, consulte Agregar usuarios a su organización o proyecto. Al agregar el usuario, elija el nivel de acceso Básico .

A continuación, cierre sesión en Azure DevOps e inicie sesión de nuevo en la cuenta Microsoft que usa para iniciar sesión en la suscripción de Azure.

Obtención del proyecto de Azure DevOps

Aquí se asegurará de que la organización de Azure DevOps esté configurada para completar el resto de este módulo. Empezará ejecutando una plantilla que cree el proyecto en Azure DevOps.

Los módulos de esta ruta de aprendizaje forman parte de una progresión que sigue al equipo web de Tailspin a través de su recorrido de DevOps. Con fines de aprendizaje, cada módulo tiene asociado un proyecto de Azure DevOps.

Ejecución de la plantilla

Ejecute una plantilla que configura la organización de Azure DevOps.

1. Obtenga y ejecute el proyecto ADOGenerator en Visual Studio o el IDE que prefiera.

2. Cuando se le pida que escriba el número de plantilla de la lista de plantillas, escriba 33 para Ejecutar pruebas no funcionales en Azure Pipelines y presione Entrar.

3. Elija el método de autenticación. Puede configurar y usar un token de acceso personal (PAT) o usar el inicio de sesión del dispositivo.

   Nota:

   Si configura un PAT, asegúrese de autorizar los ámbitos necesarios. En este módulo, puede usar el acceso completo, pero en una situación real, debe asegurarse de conceder solo los ámbitos necesarios.

4. Escriba el nombre de la organización de Azure DevOps y presione Entrar.

5. Si se le solicita, escriba el PAT de Azure DevOps y presione Entrar.

6. Escriba un nombre de proyecto como Space Game - web - Pruebas no funcionales y presione Entrar.

7. Una vez creado el proyecto, vaya a la organización de Azure DevOps en el explorador (en https://dev.azure.com/<your-organization-name>/) y seleccione el proyecto.

Bifurcar el repositorio

Si aún no lo ha hecho, cree una bifurcación del repositorio mslearn-tailspin-spacegame-web-deploy .

1. En GitHub, vaya al repositorio mslearn-tailspin-spacegame-web-deploy .

2. Seleccione Bifurcar en la parte superior derecha de la pantalla.

3. Elija su cuenta de GitHub como propietario y, a continuación, seleccione Crear un fork.

Establecimiento de la visibilidad del proyecto

La bifurcación del repositorio Space Game en GitHub inicialmente se establece en pública mientras que el proyecto creado por la plantilla de Azure DevOps se establece en privado. Cualquier persona puede acceder a un repositorio público en GitHub, mientras que a un repositorio privado solo puede acceder usted y personas con las que decida compartirlo. Del mismo modo, en Azure DevOps, los proyectos públicos proporcionan acceso de solo lectura a los usuarios no autenticados, mientras que los privados requieren que los usuarios tengan acceso y se autentiquen para acceder a los servicios.

En este momento, no es necesario modificar ninguna de estas configuraciones para los fines de este módulo. Sin embargo, para sus proyectos personales, debe determinar la visibilidad y el acceso que desea conceder a otros usuarios. Por ejemplo, si el proyecto es de código abierto, podría elegir que tanto el repositorio de GitHub como el proyecto de Azure DevOps fueran públicos. Si el proyecto es de su propiedad, normalmente tanto el repositorio de GitHub como el proyecto de Azure DevOps son privados.

Más adelante encontrará los siguientes recursos útiles para determinar qué opción es mejor para su proyecto:

• Uso de proyectos privados y públicos
• Cambio de la visibilidad del proyecto a público o privado
• Configuración de la visibilidad del repositorio

Configuración del proyecto de forma local

Aquí se carga el proyecto de Space Game en Visual Studio Code, se configura Git, se clona el repositorio localmente y se establece el repositorio remoto principal para poder descargar el código de inicio.

Apertura del terminal integrado

Visual Studio Code incluye un terminal integrado. Aquí puede editar archivos y trabajar desde la línea de comandos.

1. Inicie Visual Studio Code.

2. En el menú Ver , seleccione Terminal.

3. En la lista desplegable, seleccione Git Bash. Si está familiarizado con otro shell de Unix que prefiere usar, seleccione ese shell en su lugar.

   

   En la ventana del terminal, puede elegir cualquier shell que esté instalado en el sistema. Por ejemplo, puede elegir Git Bash o PowerShell u otro shell.

   Aquí usará Git Bash, parte de Git para Windows, lo que facilita la ejecución de comandos de Git.

   Nota:

   En Windows, si no ve Git Bash en la lista como una opción, asegúrese de que ha instalado Git y, a continuación, reinicie Visual Studio Code.

4. Ejecute el cd comando para ir al directorio donde desea trabajar. Elija el directorio principal (~) o otro directorio si lo desea.

   cd ~
   

Configuración de Git

Si no está familiarizado con Git y GitHub, ejecute primero algunos comandos para asociar su identidad a Git y autenticarse con GitHub. Para más información, consulte Configuración de Git.

Como mínimo, debe completar los pasos siguientes. Ejecute los comandos desde el terminal integrado.

1. Establezca el nombre de usuario.
2. Establezca la dirección de correo electrónico de confirmación.
3. Almacene en caché la contraseña de GitHub.

Configuración del proyecto en Visual Studio Code

En la ruta de aprendizaje Compilar aplicaciones con Azure DevOps, has bifurcado y clonado un repositorio de Git. El repositorio contiene el código fuente del sitio web de Space Game . La bifurcación se ha conectado a los proyectos de Azure DevOps para que la compilación se ejecute cuando inserte cambios en GitHub.

En esta parte, clonas tu bifurcación localmente para poder cambiar y desarrollar la configuración de tu canalización.

Clona tu fork localmente

Ahora tiene una copia del proyecto web Space Game en su cuenta de GitHub. Ahora descargarás o clonarás una copia en tu equipo para que puedas trabajar con ella.

Un clon, al igual que una bifurcación, es una copia de un repositorio. Al clonar un repositorio, puede realizar cambios, comprobar que funcionan según lo previsto y, a continuación, cargar esos cambios en GitHub. También puede sincronizar la copia local con los cambios realizados por otros usuarios autenticados en la copia de GitHub del repositorio.

Para clonar el proyecto web Space Game en tu equipo:

1. Vaya a la bifurcación del proyecto web Space Game (mslearn-tailspin-spacegame-web-deploy) en GitHub.

2. Seleccione Código. A continuación, en la pestaña HTTPS , seleccione el botón situado junto a la dirección URL que se muestra para copiar la dirección URL en el Portapapeles.

   

3. En Visual Studio Code, vaya a la ventana del terminal.

4. En el terminal, vaya al directorio donde desea trabajar. Elija el directorio principal (~) o otro directorio si lo desea.

   cd ~
   

5. Ejecute el comando git clone. Reemplace la dirección URL que se muestra aquí por el contenido del Portapapeles:

   git clone https://github.com/your-name/mslearn-tailspin-spacegame-web-deploy.git
   

6. Vaya al directorio mslearn-tailspin-spacegame-web-deploy. Este es el directorio raíz del repositorio.

   cd mslearn-tailspin-spacegame-web-deploy
   

Establecimiento del repositorio remoto ascendente

Un repositorio remoto es un repositorio de Git en el que los miembros del equipo colaboran (como un repositorio en GitHub). Aquí enumerará los remotos y agregará un remoto que apunta a la copia de Microsoft del repositorio para que pueda obtener el código de ejemplo más reciente.

1. Ejecute este comando git remote para obtener una lista de los repositorios remotos:

   git remote -v
   

   Verá que tiene acceso tanto de captura (descarga) como de inserción (carga) al repositorio:

   origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
   origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
   

   Origin especifica el repositorio en GitHub. Cuando se bifurca código desde otro repositorio, el repositorio remoto original (desde el que se ha bifurcado) se suele denominar ascendente.

2. Ejecute este git remote add comando para crear un remoto denominado upstream que apunte al repositorio de Microsoft:

   git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git
   

3. Vuelva a ejecutar git remote para ver los cambios:

   git remote -v
   

   Comprobará que todavía tiene acceso de captura (descarga) e inserción (carga) en el repositorio. Ahora también tiene acceso de captura al repositorio de Microsoft:

   origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
   origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
   upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (fetch)
   

Apertura del proyecto en el Explorador de archivos

En Visual Studio Code, la ventana del terminal apunta al directorio raíz del proyecto web Space Game . Ahora abrirá el proyecto desde el Explorador de archivos para poder ver su estructura y trabajar con los archivos.

1. La forma más fácil de abrir el proyecto es reabrir Visual Studio Code en el directorio actual. Para hacerlo, ejecute el comando siguiente en el terminal integrado:

   code -r .
   

   Verá el árbol de directorios y archivos en el Explorador de archivos.

2. Vuelva a abrir el terminal integrado. El terminal le sitúa en la raíz del proyecto web.

Si se produce un error en el comando code, debe agregar Visual Studio Code a la ruta de acceso del sistema. Para ello:

1. En Visual Studio Code, seleccione F1 o Ver>paleta de comandos para acceder a la paleta de comandos.
2. En la paleta de comandos, escriba Shell Command: Install 'code' command in PATH (Comando shell: instalar 'código') en PATH.
3. Repita el procedimiento anterior para abrir el proyecto en el explorador de archivos.

Ahora está configurado para trabajar con el código fuente de Space Game y la configuración de Azure Pipelines desde el entorno de desarrollo local.

Creación de entornos de Azure App Service

Aquí, crearás los entornos que definen las etapas de la canalización. Creará una instancia de App Service que corresponda a cada fase: desarrollo, prueba y ensayo.

En los módulos anteriores, utilizaste la CLI de Azure para crear las instancias de App Service. Aquí, harás lo mismo.

Abrir Cloud Shell a través del Azure Portal

1. Vaya a 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 .

Selección de una región de Azure

Aquí se especifica la región predeterminada o la ubicación geográfica, donde se van a crear los recursos de Azure.

1. En Cloud Shell, ejecute el siguiente az account list-locations comando para enumerar las regiones que están disponibles en la suscripción de Azure.

   az account list-locations \
     --query "[].{Name: name, DisplayName: displayName}" \
     --output table
   

2. En la columna Nombre de la salida, elija una región cercana. Por ejemplo, elija eastasia o westus2.

3. Ejecute az configure para establecer la región predeterminada. Reemplace <REGION> por el nombre de la región que eligió.

   az configure --defaults ___location=<REGION>
   

   Este es un ejemplo que establece westus2 como región predeterminada:

   az configure --defaults ___location=westus2
   

Creación de instancias de App Service

Aquí, creará las instancias de App Service para las tres fases en las que implementará : Desarrollo, Prueba y Ensayo.

1. En Cloud Shell, genere un número aleatorio que haga que el nombre de dominio de la aplicación web sea único.

   webappsuffix=$RANDOM
   

2. Ejecute el siguiente az group create comando para crear un grupo de recursos denominado tailspin-space-game-rg.

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

3. Ejecute el siguiente az appservice plan create comando para crear un plan de App Service denominado tailspin-space-game-asp.

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

   El --sku argumento especifica el plan B1 , que se ejecuta en el nivel Básico . El argumento --is-linux especifica usar trabajadores de Linux.

   Importante

   Si la SKU B1 no está disponible como parte de la suscripción de Azure, elija otro plan, como S1 (Estándar).

4. Ejecute los siguientes az webapp create comandos para crear las tres instancias de App Service, una para cada uno de los entornos de desarrollo, pruebas y ensayo .

   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-test-$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"
   

   Con fines de aprendizaje, aquí se aplica el mismo plan de App Service, B1 Básico, a cada instancia de App Service. En la práctica, asignaría un plan que coincida con la carga de trabajo esperada.

5. Ejecute el siguiente az webapp list comando para enumerar el nombre de host y el estado de cada instancia de App Service.

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

   Anote el nombre de host para cada servicio en ejecución. Necesitará estos nombres de host más adelante cuando compruebe su trabajo. Este es un ejemplo:

   HostName                                                 State
   -------------------------------------------------------  -------
   tailspin-space-game-web-dev-21017.azurewebsites.net      Running
   tailspin-space-game-web-test-21017.azurewebsites.net     Running
   tailspin-space-game-web-staging-21017.azurewebsites.net  Running
   

6. Como paso opcional, vaya a uno o varios de los nombres enumerados para comprobar que se están ejecutando y que aparece la página principal predeterminada.

   Verás esta página:

   

Creación de variables de canalización en Azure Pipelines

En Ejecución de pruebas funcionales en Azure Pipelines, ha agregado una variable para cada una de las instancias de App Service. Las instancias corresponden a las fases de desarrollo, prueba y ensayo de la canalización. Aquí, seguirá el mismo patrón.

Cada fase de la configuración de flujo de trabajo usa las variables para identificar en qué instancia de App Service se implementará.

Para agregar las variables:

1. En Azure DevOps, vaya al proyecto Space Game - web - Pruebas no funcionales .

2. En Canalizaciones, seleccione Biblioteca.

   

3. Seleccione + Grupo de variables.

4. Para el nombre del grupo de variables, en Propiedades, escriba Release.

5. En Variables, seleccione + Agregar.

6. Para el nombre de la variable, escriba WebAppNameDev. Como valor, escriba el nombre de la instancia de App Service que corresponde al entorno de Desarrollo, como tailspin-space-game-web-dev-1234.

7. Repita los pasos 5 y 6 dos veces más para crear variables para los entornos de prueba y ensayo , como se muestra en esta tabla:

   Nombre de la variable	Ejemplo de valor
   WebAppNameTest	tailspin-space-game-web-test-1234
   WebAppNameStaging	tailspin-space-game-web-staging-1234

   Asegúrese de reemplazar cada valor de ejemplo por la instancia de App Service que corresponda a su entorno.

   Importante

   Asegúrese de establecer el nombre de la instancia de App Service, no su nombre de host. En este ejemplo, escribiría tailspin-space-game-web-dev-1234 y no tailspin-space-game-web-dev-1234.azurewebsites.net.

8. Para guardar la variable en la canalización, seleccione Guardar cerca de la parte superior de la página.

   El grupo de variables es similar al siguiente:

   

Creación de los entornos de desarrollo, prueba y ensayo

En Ejecución de pruebas funcionales en Azure Pipelines, ha creado entornos para los entornos de desarrollo, pruebas y ensayo . Aquí, repetirás el proceso.

Para crear los entornos de desarrollo, prueba y ensayo :

1. En Azure Pipelines, seleccione Entornos.

   

2. Para crear el entorno de desarrollo :

   1. Seleccione Crear entorno.
   2. En Nombre, escriba dev.
   3. Deje los campos restantes en sus valores predeterminados.
   4. Seleccione Crear.

3. Para crear el entorno de prueba :

   1. Vuelva a la página Entornos .
   2. Seleccione Nuevo entorno.
   3. En Nombre, escriba test.
   4. Seleccione Crear.

4. Para crear el entorno de ensayo :

   1. Vuelva a la página Entornos .
   2. Seleccione Nuevo entorno.
   3. En Nombre, escriba ensayo.
   4. Seleccione Crear.

Creación de una conexión de servicio

Aquí, creará una conexión de servicio que permite a Azure Pipelines acceder a la suscripción de Azure. Azure Pipelines usa esta conexión de servicio para implementar el sitio web en App Service. Ha creado una conexión de servicio similar en el módulo anterior.

1. En Azure DevOps, vaya al proyecto Space Game - web - Pruebas no funcionales .

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

3. En Canalizaciones, seleccione Conexiones de servicio.

4. Seleccione Nueva conexión de servicio y, a continuación, elija Azure Resource Manager y, después, seleccione Siguiente.

5. Cerca de la parte superior de la página, seleccione Entidad de servicio (automática). A continuación, seleccione Siguiente.

6. Rellene estos campos:

   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

   Durante el proceso, es posible que se le pida que inicie sesión en su cuenta Microsoft.

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

8. Seleccione Guardar.

   Azure DevOps realiza una conexión de prueba para comprobar que puede conectarse a su suscripción de Azure. Si Azure DevOps no se puede conectar, tiene la oportunidad de iniciar sesión una segunda vez.