Introducción a Azure Static Web Apps: Despliegue y hosting simplificados

¿Qué son las Azure Static Web Apps?

Azure Static Web Apps es un servicio de Microsoft Azure diseñado para simplificar el despliegue y hosting de aplicaciones web estáticas. Este servicio combina la entrega de contenido estático con funciones dinámicas mediante la integración de APIs basadas en Azure Functions. Además, ofrece una integración nativa con sistemas de control de versiones como GitHub y Azure DevOps para automatizar los flujos de CI/CD.

Note: Las aplicaciones web estáticas son ideales para sitios web con contenido precompilado (HTML, CSS, JavaScript) que no requieren un backend complejo.

Características principales

Hosting global: Distribución de contenido estático a través de una red CDN para garantizar tiempos de carga rápidos.
Integración de APIs: Soporte nativo para Azure Functions, permitiendo agregar lógica dinámica a tu aplicación.
Flujos de trabajo automatizados: Integración con repositorios GitHub y Azure DevOps para despliegues automáticos.
Certificados SSL gratuitos: Configuración automática de HTTPS para garantizar la seguridad del tráfico.
Enrutamiento avanzado: Soporte para rutas personalizadas y redirecciones.

Configuración inicial de Azure Static Web Apps

Requisitos previos

Antes de comenzar, asegúrate de tener:

Una cuenta de Azure activa.
Un repositorio en GitHub o Azure DevOps con tu aplicación web estática.
Azure CLI instalado en tu máquina local.

Creación de una Static Web App desde el portal de Azure

Accede al portal de Azure.
Busca “Static Web Apps” en la barra de búsqueda y selecciona el servicio.
Haz clic en Crear para iniciar el asistente de configuración.

Completa los siguientes campos:

Suscripción: Selecciona la suscripción de Azure que deseas usar.
Grupo de recursos: Crea un nuevo grupo de recursos o utiliza uno existente.
Nombre de la aplicación: Asigna un nombre único a tu aplicación.
Región: Elige la región más cercana a tus usuarios finales.
Fuente de despliegue: Vincula tu repositorio de GitHub o Azure DevOps.

Warning: Asegúrate de que tu repositorio contenga un archivo de configuración staticwebapp.config.json para definir rutas y configuraciones específicas.

Ejemplo de configuración `staticwebapp.config.json`

{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*", "/css/*"]
  }
}

Este archivo define rutas protegidas para APIs y un fallback para aplicaciones SPA (Single Page Applications).

Automatización de despliegues con GitHub Actions

Azure Static Web Apps incluye soporte nativo para GitHub Actions, lo que permite automatizar el proceso de despliegue cada vez que se realiza un push al repositorio.

Configuración del workflow

En tu repositorio de GitHub, crea un archivo llamado .github/workflows/azure-static-web-apps.yml con el siguiente contenido:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Build and deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: $
          repo_token: $
          app_location: "/"
          api_location: "api"
          output_location: "dist"

Note: Reemplaza app_location, api_location y output_location según la estructura de tu proyecto.

Configuración de secretos

En el repositorio de GitHub, ve a Settings > Secrets and variables > Actions y añade los siguientes secretos:

AZURE_STATIC_WEB_APPS_API_TOKEN: Token generado desde el portal de Azure para autenticar el despliegue.
GITHUB_TOKEN: Token integrado de GitHub Actions.

Integración de APIs con Azure Functions

Azure Static Web Apps permite agregar lógica dinámica mediante Azure Functions. Estas funciones se despliegan automáticamente junto con tu aplicación.

Ejemplo de función básica en Python

import logging

import azure.functions as func

def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Solicitud recibida.')

    name = req.params.get('name')
    if not name:
        try:
            req_body = req.get_json()
        except ValueError:
            pass
        else:
            name = req_body.get('name')

    if name:
        return func.HttpResponse(f"Hola, {name}!")
    else:
        return func.HttpResponse(
            "Por favor, proporciona un nombre en la solicitud.",
            status_code=400
        )

Guarda este archivo como HttpTrigger/__init__.py dentro de la carpeta api de tu proyecto.

Note: Las funciones deben estar ubicadas en la carpeta definida como api_location en el archivo de configuración del workflow.

Monitoreo y gestión de tu Static Web App

Azure Static Web Apps incluye herramientas integradas para monitorear el rendimiento y gestionar tu aplicación:

Panel de métricas: Accede a métricas como latencia, uso de ancho de banda y solicitudes fallidas desde el portal de Azure.
Diagnóstico de errores: Usa Azure Application Insights para depurar problemas en tiempo real.
Actualización de configuración: Modifica rutas, roles y otros parámetros directamente desde el portal.

Conclusión

Azure Static Web Apps es una solución poderosa y accesible para desarrollar y desplegar aplicaciones web estáticas con capacidades dinámicas. Su integración nativa con GitHub Actions y Azure Functions simplifica los flujos de trabajo, permitiendo a los desarrolladores centrarse en la creación de experiencias de usuario excepcionales.

Para explorar más detalles y casos de uso avanzados, consulta la documentación oficial de Azure Static Web Apps.