Planear la instancia de Azure Static Web Apps

El objetivo final es hospedar la aplicación en Azure. Azure Static Web Apps se encarga de aprovisionar automáticamente todos los recursos necesarios de Azure.

Aun así, para poder hospedar la aplicación, necesita algo para compilar la aplicación a medida que realiza cambios. Estos cambios pueden realizarse a través de confirmaciones o solicitudes de incorporación de cambios en el repositorio. Una característica clave de Azure Static Web Apps es que configura un flujo de trabajo de Acciones de GitHub para compilar y publicar la aplicación.

Al crear el recurso de Azure Static Web Apps, se crea el flujo de trabajo de Acciones de GitHub. El flujo de trabajo se desencadena inmediatamente y se encarga de compilar y publicar la aplicación. También se desencadena cada vez que se realiza un cambio en la rama inspeccionada en el repositorio.

Azure Static Web Apps

Hay dos aspectos automatizados a la hora de implementar una aplicación web. El primero aprovisiona los recursos de Azure subyacentes que componen la aplicación. El segundo es un flujo de trabajo de Acciones de GitHub que compila y publica la aplicación.

Cuando se publica la aplicación en la web con Azure Static Web Apps, se obtiene un hospedaje rápido de la aplicación web y las API escalables. Además, las Acciones de GitHub proporcionan un flujo de trabajo de compilación e implementación unificado.

Conexión de la instancia de Static Web Apps a GitHub

Azure Static Web Apps está diseñado para hospedar aplicaciones cuyo código fuente se encuentra en GitHub. Al crear una instancia de Static Web Apps, iniciará sesión en GitHub y especificará el repositorio que contiene el código de la aplicación.

También debe especificar tres rutas de acceso de carpeta en el repositorio para que la aplicación se pueda compilar e implementar automáticamente:

La salida de compilación de la aplicación es una ruta de acceso relativa al directorio de salida de compilación de la aplicación. Por ejemplo, consideremos que tenemos una aplicación en my-app que genera sus recursos compilados en una carpeta my-app/dist. En este caso, debería especificar dist para esta ubicación.

De código fuente a recursos estáticos con Acciones de GitHub

El repositorio de GitHub contiene código fuente, por lo que debe compilarse antes de que se pueda publicar.

Cuando se crea una instancia de Static Web Apps, Azure crea un flujo de trabajo de Acciones de GitHub en el repositorio. El flujo de trabajo compila la aplicación cada vez que inserta cambios o crea una solicitud de incorporación de cambios en la rama que eligió realizar el seguimiento. Este proceso de compilación convierte el código fuente en recursos estáticos, que Azure sirve. Una vez completada la compilación, la acción implementa los recursos.

La acción de GitHub se agrega al repositorio en la carpeta .github/workflows. Puede revisar o modificar este archivo según sea necesario. La configuración que se especifica al crear el recurso se almacena en el archivo de la acción de GitHub.

API integrada con Azure Functions

Si la aplicación requiere una API, puede implementarla como un proyecto de Azure Functions en el repositorio. La API se implementará automáticamente y se hospedará en la instancia de Static Web Apps. El flujo de trabajo de Acciones de GitHub que compila e implementa la aplicación busca la API en el repositorio por el nombre de la carpeta que especifique.

Normalmente, la aplicación de API se coloca en una carpeta denominada api o functions, pero puede asignarle el nombre que prefiera.

Si no tiene una API, no se preocupe. En caso de que Azure Static Web Apps no encuentre ninguna API en la carpeta que indique, no publicará ninguna API, pero sí la aplicación.

Control de las rutas de reserva

Verá un error 404 al actualizar la página porque el explorador envía una solicitud a la plataforma de hospedaje para servir /products, pero no hay ninguna página en el servidor denominada products que se pueda servir. Afortunadamente, es fácil resolverlo si se crea una ruta de reserva. Una ruta de reserva es aquella que coincide con todas las solicitudes de página no coincidentes en el servidor.

Azure Static Web Apps admite reglas de enrutamiento personalizadas definidas en un archivo staticwebapp.config.json opcional ubicado en la carpeta de salida de la aplicación.

Puede configurar la aplicación para que use reglas que implementen una ruta de reserva, como se muestra en el ejemplo siguiente que usa un carácter comodín de ruta de acceso con filtro de archivo:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

Esta regla le indica a Azure Static Web Apps que sirva index.html cuando no se encuentre una solicitud de recurso, sin incluir las imágenes y los archivos CSS que se muestran en la expresión exclude.

Ubicación del archivo de rutas

Azure Static Web Apps espera que el archivo staticwebapp.config.json esté en output_location de manera predeterminada. Si el proceso de compilación copia el archivo staticwebapp.config.json en output_location, no hay que hacer nada más. Para la mayoría de los proyectos, output_location es relativo a app_location.

Pasos siguientes

¿Qué hace falta para poder publicar la aplicación web en Azure Static Web Apps? Lo único que necesita es tener la aplicación en el repositorio de GitHub.