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.

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>",
    (...)
  }

Configuración de secretos de GitHub

  1. En GitHub, vaya al repositorio.

  2. Vaya a Configuración en el menú de navegación.

  3. Seleccione Seguridad > Secretos y variables > Acciones.

    Screenshot of adding a secret

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

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

  6. Seleccione Add secret (Agregar secreto).

Agregar el flujo de trabajo

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

    GitHub Actions menu item

  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

on:
    push:
        branches: [ main ]

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

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

  6. 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()

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.

    Log of GitHub Actions run

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