Compartir a través de

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

  • Artículo

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.

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.

Para utilizar la acción de inicio de sesión de Azure con OIDC, es necesario configurar una credencial de identidad federada en una aplicación Microsoft Entra o una identidad administrada asignada por el usuario.

Opción 1: aplicaciones de Microsoft Entra

Opción 2: identidad administrada asignada por el usuario

Configuración de secretos de GitHub

Debe proporcionar el d. de cliente de su aplicación, el id. de directorio (inquilino) y el id. de suscripción a 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.

  1. En GitHub, vaya al repositorio.

  2. Seleccione Seguridad > Secretos y variables > Acciones.

    Captura de pantalla de la adición de un secreto

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

    Nota:

    Para mejorar la seguridad del flujo de trabajo en repositorios públicos, use secretos de entorno en lugar de secretos de repositorio. Si el ambiente requiere aprobación, un job no puede acceder a secretos de ambiente hasta que uno de los revisores requeridos lo apruebe.

  4. Cree secretos para AZURE_CLIENT_ID, AZURE_TENANT_ID y AZURE_SUBSCRIPTION_ID. Copie estos valores de la aplicación de Microsoft Entra o identidad administrada asignada por el usuario para los secretos de GitHub:

    Secreto de GitHub Aplicación de Microsoft Entra o identidad administrada asignada por el usuario
    AZURE_CLIENT_ID Id. de cliente
    AZURE_SUBSCRIPTION_ID Id. de suscripción
    AZURE_TENANT_ID Id. de directorio (inquilino)

    Nota:

    Por motivos de seguridad, se recomienda usar secretos de GitHub en lugar de pasar valores directamente al flujo de trabajo.

Agregar el flujo de trabajo

  1. Vaya a Acciones del repositorio de GitHub.

    Elemento de menú de las acciones de GitHub

  2. Seleccione Set up your workflow yourself (Configure el flujo de trabajo usted mismo).

  3. 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 ]

  4. Agregue una sección de permisos.

    name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

  5. 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@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

  6. 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"

  7. 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@v2
      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

  1. Vaya a la opción de Acciones del repositorio de GitHub.

  2. Abra el primer resultado para ver los registros detallados de la ejecución del flujo de trabajo.

    Registro de ejecución de Acciones de GitHub

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