Tutorial: Creación de una aplicación web estática con Blazor en Azure Static Web Apps

Azure Static Web Apps publica sitios web en entornos de producción mediante la creación de aplicaciones desde un repositorio de GitHub. En este tutorial, se implementa una aplicación web en Azure Static Web Apps mediante Azure Portal.

Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.

Prerrequisitos

Información general de la aplicación

Azure Static Web Apps permite crear aplicaciones web estáticas compatibles con un back-end sin servidor. En el siguiente tutorial, se muestra cómo implementar una aplicación WebAssembly de Blazor en C# que muestra los datos meteorológicos devueltos por una API sin servidor.

Aplicación Blazor completa

La aplicación que se incluye en este tutorial se compone de tres proyectos de Visual Studio diferentes:

  • API: la aplicación de Azure Functions en C# que implementa el punto de conexión de API que proporciona información meteorológica a la aplicación WebAssembly de Blazor. WeatherForecastFunction devuelve una matriz de objetos WeatherForecast.

  • Cliente: el proyecto WebAssembly de Blazor del servidor front-end. Se implementa una ruta de reserva para asegurarse de que el enrutamiento del lado cliente sea funcional.

  • Shared: contiene clases comunes a las que hacen referencia los proyectos de API y cliente, lo que permite que los datos fluyan desde el punto de conexión de la API a la aplicación web de front-end. La clase WeatherForecast se comparte entre ambas aplicaciones.

Juntos, estos proyectos constituyen los elementos necesarios para crear una aplicación WebAssembly de Blazor que se ejecuta en el explorador con el respaldo de un back-end de API de Azure Functions.

Ruta de reserva

La aplicación expone direcciones URL como /counter y /fetchdata que se asignan a rutas específicas de la aplicación. Puesto que esta aplicación se implementa como una aplicación de página única, cada ruta recibe el archivo index.html. Para asegurarse de que la solicitud de cualquier ruta de acceso devuelva index.html, se implementa una ruta de reserva en el archivo staticwebapp.config.json que se encuentra en la carpeta raíz del proyecto del cliente.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

La configuración anterior garantiza que las solicitudes a cualquier ruta de la aplicación devuelvan la página index.html.

Creación de un repositorio

En este artículo se usa un repositorio de plantillas de GitHub para facilitar los primeros pasos. La plantilla incluye una aplicación de inicio que se puede implementar en Azure Static Web Apps.

  1. Asegúrese de que ha iniciado sesión en GitHub y, a continuación, vaya a la siguiente ubicación para crear un repositorio:
  2. Asigne el nombre my-first-static-blazor-app al repositorio.

Creación de una aplicación web estática

Ahora que se ha creado el repositorio, cree una aplicación web estática desde Azure Portal.

  1. Acceda a Azure Portal.

  2. Seleccione Crear un recurso.

  3. Busque Static Web Apps.

  4. Seleccione Static Web Apps.

  5. Seleccione Crear.

  6. En la pestaña Datos básicos, especifique los valores siguientes.

    Propiedad Value
    Suscripción El nombre de la suscripción de Azure.
    Grupos de recursos my-blazor-group
    Nombre my-first-static-blazor-app
    Tipo de plan Gratis
    Región para la API y los entornos de ensayo de Azure Functions Seleccione la región más cercana a la suya.
    Origen GitHub
  7. Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.

  8. Escriba los siguientes valores de GitHub.

    Propiedad Value
    Organización Seleccione la organización de GitHub que quiera.
    Repositorio Seleccione my-first-static-blazor-app.
    Rama Seleccione main (principal).
  9. En la sección Detalles de la compilación, seleccione Blazor en la lista desplegable Valores preestablecidos de compilación y se rellenarán los siguientes valores.

    Propiedad Value Descripción
    Ubicación de la aplicación Cliente Carpeta que contiene la aplicación WebAssembly de Blazor
    Ubicación de la API Api Carpeta que contiene la aplicación de Azure Functions
    Ubicación del resultado wwwroot Carpeta de la salida de la compilación que contiene la aplicación WebAssembly de Blazor publicada

Revisar y crear

  1. Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.

  2. Seleccione Crear para comenzar la creación de la aplicación web estática de App Service y aprovisionar una Acción de GitHub para la implementación.

  3. Cuando se complete la implementación, haga clic en Ir al recurso.

  4. Seleccione Ir al recurso.

    Botón Ir al recurso

Vista del sitio web

Hay dos aspectos para implementar una aplicación estática. 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.

Para poder acceder a la nueva aplicación web estática, debe terminar de ejecutarse la compilación de la implementación.

En la ventana Información general de Static Web Apps se muestran una serie de vínculos que le ayudarán a interactuar con la aplicación web.

Ventana Información general

  1. Al hacer clic en el banner con el texto, Click here to check the status of your GitHub Actions runs (Haga clic aquí para comprobar el estado de las ejecuciones de Acciones de GitHub en su repositorio). Una vez que haya verificado que el trabajo de implementación se ha completado, puede ir a su sitio web a través de la URL generada.

  2. Una vez completado el flujo de trabajo de Acciones de GitHub, puede seleccionar el vínculo con la dirección URL para abrir el sitio web en una pestaña nueva.

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps mediante los siguientes pasos:

  1. Abra Azure Portal.
  2. Busque my-blazor-group en la barra de búsqueda superior.
  3. Seleccione el nombre del grupo.
  4. Seleccione el botón Eliminar.
  5. Seleccione para confirmar la acción de eliminación.

Pasos siguientes