Desplegar a Azure Static Web App

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.

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_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, 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_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.
APP_ARTIFACT_LOCATION por 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.

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
  APP_ARTIFACT_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

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@v3
        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 }}
          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}

  close:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close
    steps:
      - name: Close
        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 el flujo de trabajo de inicio 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.

Desplegar a Azure Static Web App

En este artículo

Introducción

Requisitos previos

Crear un flujo de trabajo

Recursos adicionales