Ejercicio: Configuración del entorno

  • 4 minutos

Importante

Para realizar este ejercicio, se necesita una suscripción de Azure propia y puede que se apliquen cargos. Si aún no tiene una suscripción de Azure, cree una cuenta gratuita antes de comenzar.

Antes de empezar a trabajar en el flujo de trabajo del sitio web de la empresa de juguetes, debe configurar el entorno. En esta sección, se asegurará de que los entornos de Azure y GitHub están configurados para completar el resto de este módulo.

Para cumplir estos objetivos, hará las siguientes tareas:

  • Configurar un repositorio de GitHub para este módulo.
  • Clonar el repositorio en el equipo.
  • Crear un grupo de recursos en Azure.
  • Crear un secreto en GitHub.

Obtención del repositorio de GitHub

Configure el repositorio de GitHub para completar el resto de este módulo mediante la creación de un nuevo repositorio basado en un repositorio de plantillas. El repositorio de plantillas incluye los archivos que necesita para empezar a trabajar con este módulo.

Los módulos de esta ruta de aprendizaje forman parte de una progresión. Con fines de aprendizaje, cada módulo tiene asociado un repositorio de plantillas de GitHub.

Sugerencia

Incluso si ha completado el módulo anterior de la ruta de aprendizaje, siga estas instrucciones para crear un repositorio y asegúrese de asignarle un nombre nuevo.

Inicio desde el repositorio de plantillas

Ejecute una plantilla que configura el repositorio de GitHub.

Ejecución de la plantilla

En el sitio de GitHub, siga estos pasos para crear un repositorio a partir de la plantilla:

  1. Seleccione Usar esta plantilla>Crear un nuevo repositorio.

    Captura de pantalla de la interfaz de GitHub en la que se muestra el repositorio de plantillas, con el botón

  2. Seleccione el nombre de usuario de GitHub en la lista desplegable Propietario.

  3. Escriba un nombre de repositorio para el nuevo proyecto, como toy-website-test.

  4. Seleccione la opción Público.

    Al crear sus propios repositorios, es posible que quiera hacerlos privados. Sin embargo, este módulo usa algunas características de GitHub que solo funcionan con repositorios públicos y con cuentas de GitHub Enterprise.

  5. Seleccione Create repository (Crear repositorio).

    Captura de pantalla de la interfaz de GitHub en la que se muestra la página de creación del repositorio.

Importante

El último ejercicio de este módulo contiene pasos de limpieza importantes. Asegúrese de realizar los pasos de limpieza, aunque no haya completado este módulo.

Clonación del repositorio

Ya tiene una copia del repositorio de plantillas en su propia cuenta. Clone este repositorio localmente para empezar a trabajar en él.

  1. Seleccione Code (Código) y después el icono de copiar.

    Captura de pantalla de la interfaz de GitHub en la que se muestra el repositorio nuevo, con el botón Copiar la dirección URL del repositorio resaltado.

  2. Abra Visual Studio Code.

  3. Abra una ventana de terminal de Visual Studio Code seleccionando Vista>Terminal. La ventana se suele abrir en la parte inferior de la pantalla.

  4. Navegue en el terminal hasta el directorio donde desea clonar el repositorio de GitHub en el equipo local.

  5. Escriba git clone y pegue la dirección URL que copió antes. El resultado debe ser parecido a lo siguiente:

    git clone https://github.com/mygithubuser/toy-website-test.git

  6. Vuelva a abrir Visual Studio Code en la carpeta del repositorio ejecutando el comando siguiente en el terminal de Visual Studio Code:

    code -r toy-website-test

Inicio de sesión en Azure

Para trabajar con grupos de recursos en Azure, inicie sesión en la cuenta de Azure desde el terminal de Visual Studio Code. Asegúrese de que ha instalado las herramientas de la CLI de Azure.

  1. En el menú Terminal, seleccione Nuevo terminal. Normalmente, la ventana de terminal se abre en la mitad inferior de la pantalla.

    El shell predeterminado suele ser pwsh, como se muestra en el lado derecho de la ventana del terminal.

    Recorte de pantalla de la ventana del terminal de Visual Studio Code, en la que pwsh se muestra como la opción del shell.

  2. Seleccione la lista desplegable Iniciar perfil y, después, Azure Cloud Shell (Bash).

    Recorte de pantalla de la ventana del terminal de Visual Studio Code. Se muestran la lista desplegable del shell del terminal y la opción de menú Azure Cloud Shell (Bash).

    Se abre un nuevo shell.

Inicio de sesión en Azure mediante la CLI de Azure

  1. En el terminal de Visual Studio Code, ejecute el siguiente comando para iniciar sesión en Azure:

    az login

  2. En el explorador que se abre, inicie sesión en su cuenta de Azure.

Para trabajar con grupos de recursos en Azure, inicie sesión en la cuenta de Azure desde el terminal de Visual Studio Code. Asegúrese de que ha instalado Azure PowerShell.

  1. En el menú Terminal, seleccione Nuevo terminal. Normalmente, la ventana de terminal se abre en la mitad inferior de la pantalla.

    El shell predeterminado suele ser pwsh, como se muestra en el lado derecho de la ventana del terminal.

    Recorte de pantalla de la ventana del terminal de Visual Studio Code, en la que pwsh se muestra como la opción del shell.

  2. Seleccione la lista desplegable Perfil de inicio y, después, seleccione Azure Cloud Shell (PowerShell).

    Recorte de pantalla de la ventana del terminal de Visual Studio Code. Se muestran la lista desplegable del shell del terminal y la opción de menú Azure Cloud Shell (PowerShell).

    Se abre un nuevo shell.

Inicio de sesión en Azure mediante Azure PowerShell

  1. En el terminal de Visual Studio Code, ejecute el siguiente comando para iniciar sesión en Azure:

    Connect-AzAccount

  2. En el explorador que se abre, inicie sesión en su cuenta de Azure.

Creación de una identidad de carga de trabajo

A continuación, cree una identidad de carga de trabajo en Microsoft Entra ID para el flujo de trabajo de implementación.

Para crear la identidad de carga de trabajo, los comandos de la CLI de Azure usan jq para analizar los datos de la salida JSON. Si no tiene jq instalado, puede usar Bash en Azure Cloud Shell para crear la identidad de carga de trabajo, el grupo de recursos y la asignación de roles y preparar los secretos de GitHub.

  1. Ejecute el código siguiente para definir variables para el nombre de usuario de GitHub y el nombre del repositorio. Asegúrese de reemplazar <myGithubUser> por el nombre de usuario de GitHub, que anotó anteriormente en este ejercicio. Asegúrese también de especificar el nombre correcto del repositorio de GitHub.

    githubOrganizationName='<myGithubUser>'
githubRepositoryName='toy-website-test'

  2. Cree una identidad de carga de trabajo para el flujo de trabajo de implementaciones. Puede crear dos credenciales federadas para prepararse para un ejercicio más adelante en este módulo.

    applicationRegistrationDetails=$(az ad app create --display-name 'toy-website-test')
applicationRegistrationObjectId=$(echo $applicationRegistrationDetails | jq -r '.id')
applicationRegistrationAppId=$(echo $applicationRegistrationDetails | jq -r '.appId')

az ad app federated-credential create \
   --id $applicationRegistrationObjectId \
   --parameters "{\"name\":\"toy-website-test\",\"issuer\":\"https://token.actions.githubusercontent.com\",\"subject\":\"repo:${githubOrganizationName}/${githubRepositoryName}:environment:Website\",\"audiences\":[\"api://AzureADTokenExchange\"]}"

az ad app federated-credential create \
   --id $applicationRegistrationObjectId \
   --parameters "{\"name\":\"toy-website-test-branch\",\"issuer\":\"https://token.actions.githubusercontent.com\",\"subject\":\"repo:${githubOrganizationName}/${githubRepositoryName}:ref:refs/heads/main\",\"audiences\":[\"api://AzureADTokenExchange\"]}"

  1. Ejecute el código siguiente para definir variables para el nombre de usuario de GitHub y el nombre del repositorio. Asegúrese de reemplazar <myGithubUser> por el nombre de usuario de GitHub, que anotó anteriormente en este ejercicio. Asegúrese también de especificar el nombre correcto del repositorio de GitHub.

    $githubOrganizationName = '<myGithubUser>'
$githubRepositoryName = 'toy-website-test'

  2. Cree una identidad de carga de trabajo para el flujo de trabajo de implementaciones. Puede crear dos credenciales federadas para prepararse para un ejercicio más adelante en este módulo.

    $applicationRegistration = New-AzADApplication -DisplayName 'toy-website-test'
New-AzADAppFederatedCredential `
   -Name 'toy-website-test' `
   -ApplicationObjectId $applicationRegistration.Id `
   -Issuer 'https://token.actions.githubusercontent.com' `
   -Audience 'api://AzureADTokenExchange' `
   -Subject "repo:$($githubOrganizationName)/$($githubRepositoryName):environment:Website"

New-AzADAppFederatedCredential `
   -Name 'toy-website-test-branch' `
   -ApplicationObjectId $applicationRegistration.Id `
   -Issuer 'https://token.actions.githubusercontent.com' `
   -Audience 'api://AzureADTokenExchange' `
   -Subject "repo:$($githubOrganizationName)/$($githubRepositoryName):ref:refs/heads/main"

Creación de un grupo de recursos en Azure y concesión del acceso a la identidad de la carga de trabajo

A continuación, cree un grupo de recursos para el sitio web. Este proceso también concede a la identidad de carga de trabajo el rol Colaborador en el grupo de recursos, lo que permite que el flujo de trabajo se implemente en dicho grupo de recursos.

Ejecute los siguientes comandos de la CLI de Azure en el terminal de Visual Studio Code:

resourceGroupResourceId=$(az group create --name ToyWebsiteTest --location westus3 --query id --output tsv)

az ad sp create --id $applicationRegistrationObjectId
az role assignment create \
  --assignee $applicationRegistrationAppId \
  --role Contributor \
  --scope $resourceGroupResourceId

Ejecute los siguientes comandos de Azure PowerShell en el terminal de Visual Studio Code:

$resourceGroup = New-AzResourceGroup -Name ToyWebsiteTest -Location westus3

New-AzADServicePrincipal -AppId $($applicationRegistration.AppId)
New-AzRoleAssignment `
  -ApplicationId $($applicationRegistration.AppId) `
  -RoleDefinitionName Contributor `
  -Scope $($resourceGroup.ResourceId)

Preparación de secretos de GitHub

Ejecute el código siguiente para mostrar los valores que necesita crear como secretos de GitHub:

echo "AZURE_CLIENT_ID: $applicationRegistrationAppId"
echo "AZURE_TENANT_ID: $(az account show --query tenantId --output tsv)"
echo "AZURE_SUBSCRIPTION_ID: $(az account show --query id --output tsv)"

$azureContext = Get-AzContext
Write-Host "AZURE_CLIENT_ID: $($applicationRegistration.AppId)"
Write-Host "AZURE_TENANT_ID: $($azureContext.Tenant.Id)"
Write-Host "AZURE_SUBSCRIPTION_ID: $($azureContext.Subscription.Id)"

Creación de secretos de GitHub

Ha creado una identidad de carga de trabajo y un grupo de recursos en el que se puede implementar. Ahora, cree un secreto en Acciones de GitHub.

  1. En el explorador, vaya al repositorio de GitHub.

  2. Seleccione Configuración>Secretos y variables>Acciones.

  3. Seleccione New repository secret (Nuevo secreto del repositorio).

    Captura de pantalla de la interfaz de GitHub que muestra la página

  4. Asigne el nombre AZURE_CLIENT_ID_TEST al secreto.

  5. En el campo Valor, pegue el GUID de la primera línea de la salida del terminal. No incluya AZURE_CLIENT_ID, los dos puntos ni los espacios en el valor.

  6. Seleccione Add secret (Agregar secreto).

    Captura de pantalla de la interfaz de GitHub que muestra la página

  7. Repita el proceso para crear los secretos para AZURE_TENANT_ID y AZURE_SUBSCRIPTION_ID, copiando los valores de los campos correspondientes en la salida del terminal.

  8. Compruebe que en la lista de secretos se muestran ahora los tres secretos.

    Captura de pantalla de la interfaz de GitHub en la que se muestra la lista de secretos.