Planear la instancia de Azure Static Web Apps

3 minutos

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 mientras el 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:

Ubicación	Ejemplo de ubicación	Descripción	Obligatorio
Ubicación de la aplicación	Cliente	Ubicación del código fuente para la aplicación web	Sí
Ubicación del resultado	wwwroot	La ubicación de los artefactos de compilación de la aplicación	No
Ubicación de la API	API	Ubicación del código fuente para la API	No

La ubicación de la salida es una ruta de acceso relativa al directorio de publicación de la aplicación. Por ejemplo, consideremos que tenemos una aplicación en Client que genera sus recursos compilados en una carpeta bin/<build profile>/<framework>/publish/wwwroot. En este caso, solo tiene que especificar wwwroot para esta ubicación, ya que el sistema de publicación se encarga del resto del prefijo.

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

El repositorio de GitHub contiene código fuente, en vez de recursos estáticos, 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. Cada vez que inserte cambios o que cree una solicitud de incorporación de cambios en la rama desde la que se libera, el flujo de trabajo compilará la aplicación. Este proceso convierte el código fuente en recursos estáticos que sirve Azure. 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 y la instancia de Static Web Apps la implementará y hospedará automáticamente. El flujo de trabajo de Acciones de GitHub que compila e implementa la aplicación localiza la API en el repositorio con el nombre de la carpeta especificada en la ruta de acceso Ubicación de la API.

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

Pasos siguientes