Ejercicio: Crear una instancia de Azure Static Web App

  • 5 minutos

En este ejercicio creará una instancia de Azure Static Web Apps que incluya una acción de GitHub que compile y publique automáticamente la aplicación.

Crear una instancia de Static Web Apps

Ahora que ha creado el repositorio de GitHub, puede crear una instancia de Static Web Apps desde Azure Portal.

En este módulo se usa el espacio aislado de Azure para ofrecerle una suscripción de Azure gratuita y temporal que puede usar para completar el ejercicio. Antes de continuar, asegúrese de activar el espacio aislado en la parte superior de esta página.

  1. Inicie sesión en Azure Portal con la misma cuenta que ha usado para iniciar sesión al activar el espacio aislado.

  2. En la página Inicio de Azure, en Servicios de Azure, seleccione Crear un recurso. Aparecerá el panel Crear un recurso.

  3. En el cuadro de búsqueda Marketplace, busque y seleccione Aplicación web estática. Se abre el panel Aplicación web estática.

  4. Seleccione Crear. Aparece el panel Create Static Web App (Crear aplicación web estática). Configure la nueva aplicación y vincúlela al repositorio de GitHub.

  5. En la pestaña Aspectos básicos, escriba los valores siguientes para cada opción.

    Configuración Value
    Detalles del proyecto
    Suscripción Suscripción de Concierge
    Grupo de recursos [Nombre del grupo de recursos del espacio aislado]
    Detalles de la aplicación web estática
    Nombre Asigne un nombre a la aplicación. Los caracteres válidos son a-z (no se distingue mayúsculas de minúsculas), 0-9 y -.
    Plan de hospedaje
    Plan de tarifa de la aplicación Seleccione Gratis.
    Detalles de almacenamiento provisional y Azure Functions
    Región para la API y los entornos de ensayo de Azure Functions Seleccione la región más cercana a la suya
    Detalles de implementación
    Source Seleccione GitHub.
    Cuenta de GitHub Seleccione Iniciar sesión con GitHub. Se abre el panel Autorizar Azure Static Web Apps. Seleccione Autorizar Azure-App-Service-Static-Web-Apps. Especifique la contraseña.
    Organización Seleccione la organización en la que ha creado el repositorio.
    Repositorio my-static-blazor-app
    Rama main (principal)
    Detalles de la compilación
    Valores preestablecidos de compilación Blazor
    Ubicación de la aplicación Cliente
    Ubicación de la API API
    Ubicación del resultado wwwroot

  6. Seleccione Revisar y crear>Crear.

  7. Una vez finalizada la implementación, seleccione Ir al recurso. Se abre el panel Aplicación web estática.

Revisar la acción de GitHub

En esta fase, se crea en Azure la instancia de Static Web Apps, pero todavía no se ha implementado la aplicación. La acción de GitHub que Azure crea en el repositorio se ejecuta automáticamente para desencadenar la primera compilación e implementación de la aplicación, pero tarda un par de minutos en completarse.

Para comprobar el estado de la acción de compilación e implementación, seleccione el siguiente vínculo para ir a la página Acciones del repositorio de GitHub:

Captura de pantalla que muestra cómo examinar para ver el progreso del flujo de trabajo de Acciones de GitHub.

Una vez que esté aquí:

  1. Seleccione Azure Static Web Apps CI/CD (CI/CD de Azure Static Web Apps).

  2. Seleccione la confirmación titulada ci: agregar archivo de flujo de trabajo de Azure Static Web Apps.

  3. Seleccione el vínculo Build and Deploy Job (Compilar e implementar trabajo).

Desde aquí, puede observar el progreso de la aplicación a medida que se compila.

Visualizar el sitio web

Una vez que la acción de GitHub termine de compilar y publicar la aplicación web, podrá navegar para ver la aplicación en ejecución.

Seleccione el vínculo URL en Azure Portal para visitar la aplicación en el explorador.

Ahora, la aplicación está disponible globalmente, pero sigue diciendo Cargando datos, puesto que aún no hay ningún dato o API. Agregará la API para la aplicación web en la sección siguiente.

Enhorabuena. Ha implementado su primera aplicación en Azure Static Web Apps.

Nota:

No se preocupe si ve una página web que indica que la aplicación aún no se ha compilado e implementado. Pruebe a actualizar el explorador al cabo de un minuto. La acción de GitHub se ejecuta automáticamente cuando se crea la instancia de Azure Static Web Apps. Por lo tanto, si ve la página de presentación, la aplicación todavía se está implementando.

Pasos siguientes

Todavía falta una API en la aplicación para la lista de la compra. A continuación, explorará cómo agregar una API de Azure Functions a la aplicación, que se publica en Azure junto con los recursos estáticos.