Desplegar a Azure Static Web App

Puedes desplegar tu app web a Azure Static Web App como parte de tus flujos de trabajo de despliegue continuo (DC).

En este artículo

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.

Note

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:

  1. Crea una Azure Static Web App utilizando la opción 'Other' como fuente de despliegue. Para más información, consulta Inicio rápido: Creación del primer sitio estático en Azure Portal en la documentación de Azure.

  2. Cree un secreto llamado AZURE_STATIC_WEB_APPS_API_TOKEN con 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, consulta 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_LOCATION por la ubicación del código de cliente
  • API_LOCATION por la ubicación del código fuente de la API. Si API_LOCATION no es relevante, puedes borrar la variable y las líneas en las que se usa.
  • OUTPUT_LOCATION por la ubicación de la salida de compilación del código de cliente

Para más información sobre estos valores, consulta Configuración de compilación para Azure Static Web Apps en la documentación de Azure.

YAML
# 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.yml en el repositorio starter-workflows de GitHub Actions.
  • La acción que se usa para implementar la aplicación web es la acción Azure/static-web-apps-deploy oficial 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.