Deploying to Azure Static Web App

Introducción

This guide explains how to use GitHub Actions to build and deploy a web app to Azure Static Web Apps.

Prerrequisitos

Antes de crear tu flujo de trabajo de GitHub Actions, primero necesitarás completar los siguientes pasos de configuración:

1. Create an Azure Static Web App using the 'Other' option for deployment source. For more information, see "Quickstart: Building your first static site in the Azure portal" in the Azure documentation.

2. Create a secret called AZURE_STATIC_WEB_APPS_API_TOKEN with the value of your static web app deployment token. For more information about how to find your deployment token, see "Reset deployment tokens in Azure Static Web Apps" in the Azure documentation.

Crear un flujo de trabajo

Una vez que hayas completado los prerequisitos, puedes proceder con la creación del flujo de trabajo.

The following example workflow demonstrates how to build and deploy an Azure static web app when there is a push to the main branch or when a pull request targeting main is opened, synchronized, or reopened. The workflow also tears down the corresponding pre-production deployment when a pull request targeting main is closed.

Under the workflow env key, change the following values:

• APP_LOCATION to the location of your client code
• API_LOCATION to the location of your API source code. If API_LOCATION is not relevant, you can delete the variable and the lines where it is used.
• APP_ARTIFACT_LOCATION to the location of your client code build output

For more information about these values, see "Build configuration for Azure Static Web Apps" in the Azure documentation.

# This workflow uses actions that are not certified by GitHub.
# Estas las proporcionan entidades terceras y las gobiernan
# condiciones de servicio, políticas de privacidad y documentación de soporte
# documentación.

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

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@v2
        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 encontrar el flujo de trabajo inicial original, consulta el archivo azure-staticwebapp.yml en el repositorio starter-workflows de GitHub Actions.
• The action used to deploy the web app is the official Azure Azure/static-web-apps-deploy action.
• Para encontrar más ejemplos de flujos de trabajo de GitHub Actions que desplieguen a Azure, consulta el repositorio actions-workflow-samples.