Configuración de un flujo de trabajo de acciones de GitHub para implementar el sitio web estático en Azure Storage
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.
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
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).
Agregar el flujo de trabajo
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 GitHubAZURE_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
. Paraaz 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
aaz 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()
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
Comentarios
https://aka.ms/ContentUserFeedback.
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea:Enviar y ver comentarios de