Nota: Actualmente los ejecutores hospedados en GitHub no se admiten en GitHub Enterprise Server. Puede ver más información sobre la compatibilidad futura planeada en GitHub public roadmap.
Introducción
En esta guía se explica cómo usar GitHub Actions para compilar e implementar una aplicación web en Azure Static Web Apps.
Nota: Si tus flujos de trabajo de GitHub Actions necesitan acceder a los recursos de un proveedor de servicios en la red que sea compatible con OpenID Connect (OIDC), puedes configurarlos para que se autentiquen directamente con dicho proveedor. Esto te permitirá dejar de almacenar estas credenciales como secretos de duración larga y te proporcionará otros beneficios de seguridad. Para más información, consulta "Acerca del fortalecimiento de seguridad con OpenID Connect". y "Configura OpenID Connect en Azure".
Requisitos previos
Antes de crear tu flujo de trabajo de GitHub Actions, primero necesitarás completar los siguientes pasos de configuración:
-
Crea una Azure Static Web App utilizando la opción 'Other' como fuente de despliegue. Para más información, vea "Inicio rápido: Creación del primer sitio estático en Azure Portal" en la documentación de Azure.
-
Cree un secreto llamado
AZURE_STATIC_WEB_APPS_API_TOKENcon el valor del token de implementación de la aplicación web estática. Para más información sobre cómo encontrar el token de implementación, vea "Restablecimiento de tokens de implementación en Azure Static Web Apps" en la documentación de Azure.
Crear un flujo de trabajo
Una vez que hayas completado los prerequisitos, puedes proceder con la creación del flujo de trabajo.
En el siguiente flujo de trabajo de ejemplo se muestra cómo compilar e implementar una aplicación web estática de Azure cuando se produce una inserción en la rama main o cuando se abre, se sincroniza o se vuelve a abrir una solicitud de incorporación de cambios destinada a main. El flujo de trabajo también desglosa la implementación de pre-producción correspondiente cuando se cierra una solicitud de incorporación de cambios destinada a main.
Debajo de la clave env del flujo de trabajo, cambie los valores siguientes:
APP_LOCATIONpor la ubicación del código de clienteAPI_LOCATIONpor la ubicación del código fuente de la API. SiAPI_LOCATIONno es relevante, puedes borrar la variable y las líneas en las que se usa.OUTPUT_LOCATIONpor la ubicación de la salida de compilación del código de cliente
Para más información sobre estos valores, vea "Configuración de compilación para Azure Static Web Apps" en la documentación de Azure.
# Este flujo de trabajo usa acciones que no GitHub no certifica.
# Estas las proporcionan entidades terceras y las gobiernan
# condiciones de servicio, políticas de privacidad y documentación de soporte
# en línea.
# GitHub recomienda anclar acciones a un SHA de confirmación.
# Para obtener una versión más reciente, debes actualizar el SHA.
# También puedes hacer referencia a una etiqueta o rama, pero la acción puede cambiar sin ninguna advertencia.
name: Deploy web app to Azure Static Web Apps
env:
APP_LOCATION: "/" # location of your client code
API_LOCATION: "api" # location of your api source code - optional
OUTPUT_LOCATION: "build" # location of client code build output
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
permissions:
issues: write
contents: read
pull-requests: write
jobs:
build_and_deploy:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy
steps:
- uses: actions/checkout@v4
with:
submodules: true
- name: Build And Deploy
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: ${{ env.APP_LOCATION }}
api_location: ${{ env.API_LOCATION }}
output_location: ${{ env.OUTPUT_LOCATION }}
close_pull_request:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request
steps:
- name: Close Pull Request
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
action: "close"
# Este flujo de trabajo usa acciones que no GitHub no certifica.
# Estas las proporcionan entidades terceras y las gobiernan
# condiciones de servicio, políticas de privacidad y documentación de soporte
# en línea.
# GitHub recomienda anclar acciones a un SHA de confirmación.
# Para obtener una versión más reciente, debes actualizar el SHA.
# También puedes hacer referencia a una etiqueta o rama, pero la acción puede cambiar sin ninguna advertencia.
name: Deploy web app to Azure Static Web Apps
env:
APP_LOCATION: "/" # location of your client code
API_LOCATION: "api" # location of your api source code - optional
OUTPUT_LOCATION: "build" # location of client code build output
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
permissions:
issues: write
contents: read
pull-requests: write
jobs:
build_and_deploy:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy
steps:
- uses: actions/checkout@v4
with:
submodules: true
- name: Build And Deploy
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: ${{ env.APP_LOCATION }}
api_location: ${{ env.API_LOCATION }}
output_location: ${{ env.OUTPUT_LOCATION }}
close_pull_request:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request
steps:
- name: Close Pull Request
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
action: "close"
Recursos adicionales
Los siguientes recursos también pueden ser útiles:
- Para obtener la plantilla de flujo de trabajo original, vea
azure-staticwebapp.ymlen el repositoriostarter-workflowsde GitHub Actions. - La acción que se usa para implementar la aplicación web es la acción
Azure/static-web-apps-deployoficial de Azure. - Para obtener más ejemplos de flujos de trabajo de acción de GitHub que se implementan en Azure, vea el repositorio actions-workflow-samples.