Ejercicio: Configuración del entorno

  • 15 minutos

El equipo ha integrado progresivamente una estrategia de DevOps en sus procesos. En esta sección, se asegurará de que en el entorno se reflejen los esfuerzos del equipo realizados hasta ahora.

Para ello, puede:

  • Agregar un usuario para asegurarse de que Azure DevOps pueda conectarse a la suscripción a Azure.
  • Configurar un proyecto de Azure DevOps para este módulo.
  • Agregar la canalización de compilación.

Agregar un usuario a Azure DevOps.

Para completar este módulo, hay que tener una suscripción a Azure propia. Puede comenzar a trabajar con Azure de forma gratuita.

Aunque no necesita una suscripción para usar Azure DevOps para trabajar en él, aquí usará Azure DevOps para realizar la implementación en recursos de Azure que existen en la suscripción a Azure. Para simplificar el proceso, inicie sesión en la suscripción a Azure y en la organización de Azure DevOps con la misma cuenta de Microsoft.

Si usa cuentas de Microsoft diferentes para iniciar sesión en Azure y Azure DevOps, agregue un usuario a la organización de DevOps en la cuenta de Microsoft que use para iniciar sesión en Azure. Para más información, consulte Adición de usuarios de la organización y administración del acceso. Cuando agregue el usuario, elija el nivel de acceso Básico.

Después, cierre la sesión de Azure DevOps e iníciela de nuevo con la cuenta de Microsoft que usa para iniciar sesión en la suscripción a Azure.

Obtención del proyecto de Azure DevOps

Asegúrese de que la organización de Azure DevOps esté configurada para completar el resto de este módulo. Para ello, debe ejecutar una plantilla que cree un proyecto automáticamente en Azure DevOps.

Los módulos de esta ruta de aprendizaje forman una progresión a medida que sigue el recorrido del equipo web de Tailspin en DevOps. Con fines de aprendizaje, cada módulo tiene asociado un proyecto de Azure DevOps.

Ejecución de la plantilla

Ejecutar una plantilla que configure todo el entorno en la organización de Azure DevOps.

Ejecución de la plantilla

En el sitio del generador de demostraciones de Azure DevOps, siga estos pasos para ejecutar la plantilla:

  1. Seleccione Sign In (Iniciar sesión) y acepte los términos de uso.

  2. En la página Create New Project (Crear proyecto), seleccione la organización de Azure DevOps y escriba un nombre de proyecto, como Space Game - web - Release.

    Screenshot of the Azure DevOps Demo Generator web site showing the process to create the project.

  3. Seleccione Yes, I want to fork this repository (Sí, quiero bifurcar este repositorio)>Authorize (Autorizar). Si aparece una ventana, autorice el acceso a su cuenta de GitHub.

    Importante

    Esta opción debe seleccionarse para que la plantilla se conecte al repositorio de GitHub. Selecciónela incluso si ya ha bifurcado el proyecto del sitio web de Space Game. La plantilla usa la bifurcación existente.

  4. Seleccione Crear un proyecto. La plantilla tarda unos minutos en ejecutarse.

  5. Seleccione Navegar al proyecto para ir al proyecto de Azure DevOps.

Importante

La página Limpiar el entorno de Azure DevOps de este módulo contiene pasos de limpieza importantes. La limpieza ayuda a garantizar que no se queda sin minutos de compilación libres. No olvide realizar los pasos de limpieza, aunque no haya completado este módulo.

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:

Preparación de Visual Studio Code

Configure Visual Studio Code para poder compilar el sitio web localmente y usar los archivos de origen.

Visual Studio Code incluye un terminal integrado para que pueda editar archivos y trabajar desde la línea de comandos, todo desde el mismo lugar.

  1. Inicie Visual Studio Code.

  2. Seleccione Terminal y, después, Nuevo terminal.

  3. En la lista desplegable, seleccione Git Bash. Si está familiarizado con otro shell de Unix que prefiera usar, como Zsh, seleccione ese shell en su lugar. Git para Windows proporciona Git Bash, que permite ejecutar comandos de Git fácilmente.

    Nota:

    En Windows, si no ve Git Bash como opción, asegúrese de que ha instalado Git y, después, reinicie Visual Studio Code.

  4. Ejecute el comando siguiente para ir al directorio principal.

    cd ~

Configuración de Git

Si es la primera vez que usa Git y GitHub, primero tendrá que ejecutar algunos comandos para asociar su identidad a Git y autenticarse en GitHub. Para obtener más información, vea Configuración de Git.

Como mínimo, deberá completar los pasos siguientes:

  1. Descargue e instale la versión más reciente de Git.
  2. Establezca el nombre de usuario.
  3. Establezca la dirección de correo electrónico de confirmación.

Nota:

Si ya usa la autenticación en dos fases con GitHub, cree un token de acceso personal. Use el token en lugar de la contraseña cuando se le solicite más tarde.

Trate el token de acceso igual que una contraseña y guárdelo en un lugar seguro.

Configuración del proyecto en Visual Studio Code

Al ejecutar la plantilla para configurar el proyecto de Azure DevOps, el proceso ha bifurcado el repositorio mslearn-tailspin-spacegame-web-deploy de forma automática. Ahora, descargará (o clonará) una copia en su equipo para poder trabajar con ella.

Clonación de la bifurcación localmente

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

  2. Seleccione Código y, después, en la pestaña HTTPS, el botón Copiar para copiar la dirección URL en el Portapapeles.

    Screenshot that shows how to locate the URL and copy button from the GitHub repository.

  3. En Visual Studio Code, vaya a la ventana de terminal que ha abierto anteriormente.

  4. 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

  5. Desplácese al directorio mslearn-tailspin-spacegame-web-deploy. Este directorio es la raíz del repositorio.

    cd mslearn-tailspin-spacegame-web-deploy

Establecimiento del repositorio remoto ascendente

Un repositorio remoto es un repositorio de Git donde colaboran los miembros del equipo (como uno de 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 el comando siguiente 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 (Origen) especifica cuál es su repositorio en GitHub. Cuando se bifurca código desde otro repositorio, el repositorio remoto original (desde el que se ha bifurcado) se suele denominar upstream (ascendente).

  2. Ejecute el comando siguiente para crear un repositorio remoto denominado upstream que apunte al repositorio de Microsoft:

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

  3. Ejecute git remote una segunda vez para ver los cambios:

    git remote -v

    Vemos que seguimos teniendo acceso de captura (descarga) y e inserción (carga) en el repositorio, y ahora también de captura en el 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)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (push)

Apertura del proyecto en Visual Studio Code

  1. Ejecute el comando siguiente desde el directorio raíz del proyecto.

    code .

  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, presione F1 o seleccione Ver>Paleta de comandos para acceder a la paleta de comandos.
  2. Escriba shell command y busque el comando Shell Command: Install 'code' command in PATH.
  3. Reinicie el terminal para que el nuevo elemento PATH surta efecto.

Ya lo tiene todo preparado para trabajar con el código fuente de Space Game y la configuración de Azure Pipelines desde el entorno de desarrollo local.

Captura de la rama de GitHub

  1. En Visual Studio Code, abra el terminal integrado.

  2. Ejecute los comandos siguientes para capturar la rama de canalización de versión del repositorio MicrosoftDocs y consulte una nueva rama ascendente o de canalización de versión.

    git fetch upstream release-pipeline
git checkout -B release-pipeline upstream/release-pipeline

  3. Como paso opcional, en Visual Studio Code, abra el archivo azure-pipelines.yml y familiarícese con la configuración inicial de la canalización YAML.

Ejecución de la canalización

En este punto, debe tener:

  • Una bifurcación del repositorio mslearn-tailspin-spacegame-web-deploy en la cuenta de GitHub.
  • El repositorio mslearn-tailspin-spacegame-web-deploy clonado localmente.
  • Rama denominada release-pipeline que contiene el código fuente del sitio web y una configuración inicial de Azure Pipelines.

Después, desencadenará manualmente la canalización que se va a ejecutar. Este paso garantiza que el proyecto está configurado para realizar la compilación desde el repositorio de GitHub. La configuración inicial de canalización compila la aplicación y genera un artefacto de compilaciones.

  1. Vaya al proyecto en Azure Devops y luego seleccione Canalizaciones.

  2. Seleccione la canalización mslearn-tailspin-spacegame-web-deploy. Si se le solicita, asegúrese de seleccionar Autorizar recursos para autorizar la conexión del servicio.

    Screenshot of Azure Pipelines showing the pipeline for this project. The pipeline has no runs.

  3. Seleccione Ejecutar canalización y, después, la rama de canalización de versión en el menú desplegable Rama/Etiqueta. Seleccione Ejecutar.

    Screenshot of Azure Pipelines showing the location of the Run pipeline button.

  4. En la página Resumen, seleccione el trabajo de canalización para ver los registros.

    Screenshot of Azure Pipelines showing the running job.

  5. Una vez que finalice la compilación, seleccione el botón Atrás para volver a la página de resumen.

    Screenshot of Azure Pipelines showing how to navigate to the summary page.

  6. Seleccione el artefacto publicado.

    Screenshot of Azure Pipelines showing the location of the link to the published artifact.

  7. Tailspin.Space.Game.Web.zip es el artefacto de compilación. Este archivo contiene la aplicación compilada y sus dependencias.

    Screenshot of Azure Pipelines showing the published artifact. The artifact includes a .zip file.

Ahora tiene una canalización de compilación para el proyecto web de Space Game. Después, agregará una fase de implementación para implementar el artefacto de compilación en Azure App Service.