Configuración de un flujo de trabajo de acciones de GitHub para implementar el sitio web estático en Azure Storage

Artículo
02/18/2024

Aprenda a usar las Acciones de GitHub mediante un flujo de trabajo para implementar un sitio estático en una cuenta de Azure Storage. Una vez que haya configurado el flujo de trabajo de acciones de GitHub, podrá implementar automáticamente el sitio en Azure desde GitHub cuando realice cambios en el código del sitio.

Nota:

Si usa Azure Static Web Apps, no es necesario configurar manualmente un flujo de trabajo de acciones de GitHub. Azure Static Web Apps crea automáticamente un flujo de trabajo de Acciones de GitHub.

Requisitos previos

Una cuenta de GitHub y una suscripción de Azure.

Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
Un repositorio de GitHub con el código del sitio web estático. Si no tiene una cuenta de GitHub, regístrese para obtener una gratis.
Un sitio web estático en funcionamiento hospedado en Azure Storage. Aprenda a administrar el hospedaje de sitios web estáticos en Azure Storage. Para seguir este ejemplo, también debe implementar Azure CDN.

Nota:

Normalmente se usa una red de entrega de contenido (CDN) para reducir la latencia a los usuarios de todo el mundo, así como reducir el número de transacciones a su cuenta de almacenamiento. La implementación de contenido estático en un servicio de almacenamiento basado en la nube puede reducir la necesidad de una instancia de proceso potencialmente costosa. Para obtener más información, consulte Patrón Static Content Hosting.

Genere las credenciales de implementación.

Entidad de servicio
OpenID Connect

Cree una entidad de servicio mediante el comando az ad sp create-for-rbac de la CLI de Azure. Puede ejecutar este comando mediante Azure Cloud Shell en Azure Portal o haciendo clic en el botón Probar.

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

El parámetro --json-auth está disponible en las versiones de la CLI de Azure >= 2.51.0. Las versiones anteriores a esta usan --sdk-auth con una advertencia de desuso.

En este ejemplo, reemplace los marcadores de posición por su identificador de suscripción, el nombre del grupo de recursos y el nombre de la aplicación. La salida es un objeto JSON con las credenciales de asignación de roles que proporcionan acceso a la aplicación App Service similar al siguiente. Copie este objeto JSON para más adelante.

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

Open ID Connect es un método de autenticación que usa tokens de corta duración. La configuración de OpenID Connect con Acciones de GitHub es un proceso más complejo que ofrece seguridad reforzada.

Si no tiene una aplicación existente, registre una nueva aplicación de Microsoft Entra y una entidad de servicio que puedan acceder a los recursos.
```
az ad app create --display-name myApp
```
Este comando genera un JSON de salida con un appId que es su client-id. La objectId es APPLICATION-OBJECT-ID y se usará para crear credenciales federadas con llamadas a la Graph API. Guarde el valor que se usará como secreto de GitHub de AZURE_CLIENT_ID más adelante.
Crear una entidad de servicio. Reemplace $appID por el valor de appId de la salida de JSON. Este comando genera una salida de JSON con un objectId diferente y se usará en el siguiente paso. El nuevo objectId es assignee-object-id.

Este comando genera una salida de JSON con un objectId diferente y se usará en el siguiente paso. El nuevo objectId es assignee-object-id.

Copie el appOwnerTenantId para usarlo como secreto de GitHub para AZURE_TENANT_ID más adelante.
```
 az ad sp create --id $appId
```
Cree una asignación de roles por suscripción y objeto. De forma predeterminada, la asignación de roles se vinculará a la suscripción predeterminada. Reemplace $subscriptionId por el ID de suscripción, $resourceGroupName por el nombre del grupo de recursos y $assigneeObjectId por el valor de assignee-object-id generado (el id. de objeto de la entidad de servicio recién creada).
```
az role assignment create --role contributor --subscription $subscriptionId --assignee-object-id  $assigneeObjectId --assignee-principal-type ServicePrincipal --scope /subscriptions/$subscriptionId/resourceGroups/$resourceGroupName
```
Ejecute el siguiente comando para crear una credencial de identidad federada para la aplicación de Microsoft Entra.
- Reemplace APPLICATION-OBJECT-ID por el objectId (generado al crear la aplicación) de la aplicación de Microsoft Entra.
- Establezca un valor para CREDENTIAL-NAME al que haga referencia más adelante.
- Establezca subject. Este valor lo define GitHub en función del flujo de trabajo:
  - Trabajos en el entorno de Acciones de GitHub: repo:< Organization/Repository >:environment:< Name >
  - En el caso de los trabajos no vinculados a un entorno, incluya la ruta de acceso de referencia para una rama o etiqueta en función de la ruta de acceso de referencia usada para desencadenar el flujo de trabajo: repo:< Organization/Repository >:ref:< ref path>. Por ejemplo, repo:n-username/ node_express:ref:refs/heads/my-branch o repo:n-username/ node_express:ref:refs/tags/my-tag.
  - En el caso de los flujos de trabajo desencadenados por un evento de solicitud de incorporación de cambios: repo:< Organization/Repository >:pull_request.
```
az ad app federated-credential create --id <APPLICATION-OBJECT-ID> --parameters credential.json
("credential.json" contains the following content)
{
    "name": "<CREDENTIAL-NAME>",
    "issuer": "https://token.actions.githubusercontent.com",
    "subject": "repo:octo-org/octo-repo:environment:Production",
    "description": "Testing",
    "audiences": [
        "api://AzureADTokenExchange"
    ]
}
```

En GitHub, vaya al repositorio.
Vaya a Configuración en el menú de navegación.
Seleccione Seguridad > Secretos y variables > Acciones.
Seleccione New repository secret (Nuevo secreto del repositorio).
Pegue la salida JSON completa del comando de la CLI de Azure en el campo de valor del secreto. Asigne al secreto el nombre AZURE_CREDENTIALS.
Seleccione Add secret (Agregar secreto).

Debe especificar el identificador de cliente, el identificador de inquilino y el identificador de suscripción en la acción de inicio de sesión. Estos valores se pueden proporcionar directamente en el flujo de trabajo o se pueden almacenar en secretos de GitHub y se puede hacer referencia a ellos en el flujo de trabajo. Guardar los valores como secretos de GitHub es la opción más segura.

En GitHub, vaya al repositorio.
Seleccione Seguridad > Secretos y variables > Acciones.
Seleccione New repository secret (Nuevo secreto del repositorio).
Cree secretos para AZURE_CLIENT_ID, AZURE_TENANT_ID y AZURE_SUBSCRIPTION_ID. Use estos valores de la aplicación de Microsoft Entra para los secretos de GitHub:

Secreto de GitHub Aplicación de Microsoft Entra

AZURE_CLIENT_ID Id. de aplicación (cliente)

AZURE_TENANT_ID Id. de directorio (inquilino)

AZURE_SUBSCRIPTION_ID Id. de suscripción
Guarde todos los secretos, para lo que debe seleccionar Add secret (Agregar secreto).

Secreto de GitHub	Aplicación de Microsoft Entra
AZURE_CLIENT_ID	Id. de aplicación (cliente)
AZURE_TENANT_ID	Id. de directorio (inquilino)
AZURE_SUBSCRIPTION_ID	Id. de suscripción

Agregar el flujo de trabajo

Entidad de servicio
OpenID Connect

Vaya a la opción de Acciones del repositorio de GitHub.
Seleccione Set up your workflow yourself (Configure el flujo de trabajo usted mismo).
Elimine todo lo que aparezca después de la sección on: del archivo de flujo de trabajo. Por ejemplo, el flujo de trabajo restante puede tener el siguiente aspecto.
```
name: CI

on:
    push:
        branches: [ main ]
```
Cambie el nombre del flujo de trabajo Blob storage website CI y agregue las acciones de restauración e inicio de sesión. Estas acciones comprobarán el código de sitio y se autenticarán con Azure mediante el secreto de GitHub AZURE_CREDENTIALS que creó anteriormente.
```
name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}
```
Use la acción de la CLI de Azure para cargar el código en la instancia de Blob Storage y purgar el punto de conexión de la red CDN. En cuanto a az storage blob upload-batch, reemplace el marcador de posición por el nombre de la cuenta de almacenamiento. El script se cargará en el contenedor $web. Para az cdn endpoint purge, reemplace los marcadores de posición por el nombre del perfil de CDN, el nombre del punto de conexión de CDN y el grupo de recursos. Para acelerar la purga de la red CDN, puede agregar la opción --no-wait a az cdn endpoint purge. Para mejorar la seguridad, también puede agregar la opción --account-key con la clave de la cuenta de almacenamiento.
```
    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
```

Complete el flujo de trabajo agregando una acción al cierre de sesión de Azure. Este es el flujo de trabajo completado. El archivo aparecerá en la carpeta .github/workflows del repositorio.

name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

Vaya a Acciones del repositorio de GitHub.
Seleccione Set up your workflow yourself (Configure el flujo de trabajo usted mismo).
Elimine todo lo que aparezca después de la sección on: del archivo de flujo de trabajo. Por ejemplo, el flujo de trabajo restante puede tener el siguiente aspecto.
```
name: CI with OpenID Connect

on:
    push:
        branches: [ main ]
```

Agregue una sección de permisos.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

Agregue acciones de restauración e inicio de sesión. Estas acciones comprobarán el código de sitio y se autenticarán con Azure mediante los secretos de GitHub que creó anteriormente.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

Use la acción de la CLI de Azure para cargar el código en la instancia de Blob Storage y purgar el punto de conexión de la red CDN. En cuanto a az storage blob upload-batch, reemplace el marcador de posición por el nombre de la cuenta de almacenamiento. El script se cargará en el contenedor $web. Para az cdn endpoint purge, reemplace los marcadores de posición por el nombre del perfil de CDN, el nombre del punto de conexión de CDN y el grupo de recursos. Para acelerar la purga de la red CDN, puede agregar la opción --no-wait a az cdn endpoint purge. Para mejorar la seguridad, también puede agregar la opción --account-key con la clave de la cuenta de almacenamiento.
```
    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
```

Complete el flujo de trabajo agregando una acción al cierre de sesión de Azure. Este es el flujo de trabajo completado. El archivo aparecerá en la carpeta .github/workflows del repositorio.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

Revisar la implementación

Vaya a la opción de Acciones del repositorio de GitHub.
Abra el primer resultado para ver los registros detallados de la ejecución del flujo de trabajo.

Limpieza de recursos

Cuando el repositorio de GitHub y el sitio estático ya no sean necesarios, limpie los recursos que implementó eliminando el grupo de recursos y el repositorio de GitHub.

Pasos siguientes

Obtener más información sobre Azure Static Web Apps