Microsoft Azure: Introducción a las aplicaciones web estáticas de Azure

Azure Static Web App es una aplicación web sin servidor ofrecida por Azure para alojar contenido de sitio estático como imágenes, videos y archivos de código como HTML, CSS, JavaScript, Markdown, archivos de texto, JSON, archivos XML con alta eficiencia y está prerenderizado el contenido se distribuye globalmente.

No se requieren servicios web para la implementación, por lo que es rentable. Así que no hay necesidad de preocuparse por el mantenimiento del servidor.

Comencemos por crear una aplicación web estática en Azure. Siga el paso para comenzar creando uno.

Proceso 1 utilizando otra fuente de implementación

Paso 1:   Abra su navegador y vaya a https://portal.azure.com/

Paso 2: inicie sesión en su cuenta de suscripción de Microsoft Azure.

Paso 3: una vez que haya iniciado sesión, busque «Aplicaciones web estáticas» y seleccione el servicio.

Paso 4: haga clic en Crear para crear una aplicación web estática de Azure. 

• Para empezar, debe seleccionar su suscripción activa válida de Azure.
• Para el grupo de recursos, puede crear un nuevo grupo de recursos haciendo clic en Crear nuevo o puede elegir uno existente si tiene uno.
• Proporcione un nombre único para su aplicación web estática. En mi caso le hemos dado “Static-Web-App-01”

Paso 5:   elegir un tipo de plan de alojamiento. Puede elegir un plan de la siguiente captura de pantalla de acuerdo con las necesidades de su aplicación.

• Gratis y Estándar

Paso 6: para Ubicación , puede preferir cualquiera de las ubicaciones admitidas del menú desplegable.

Paso 7: elegir los detalles de implementación.

Paso 8: una vez que haya terminado su implementación. Puede hacer clic en «Ir al recurso» para la configuración de la aplicación web estática.

Paso 9: antes de establecer la configuración de la aplicación web estática. Navegue para verificar el estado activo de su sitio.

Paso 10: La salida predeterminada «Static-Web-App-01» se parece a la siguiente captura de pantalla a continuación:

Paso 11: asignación de dominio personalizado para «Azure Static-Web-App-01»

• Vaya a «Azure Static-Web-App-01» , desde el menú de la izquierda, vaya a Configuración >> Dominio personalizado >> Haga clic en «+ Agregar»
• Agregue su nombre de dominio personalizado y haga clic en » Siguiente «
• Después de este paso, tendrá dos opciones para verificar la propiedad del dominio >> Tipo de registro de nombre de host : TXT o CNAME para validar su dominio. (Tú eliges cualquiera)

Usando la cuenta de origen de Github:

Paso 1 a Paso 6: puede consultar el paso del Proceso 1. Siga los pasos que se mencionan.

Nota: cambie el nombre web de la aplicación estática como «Static-Web-App-02» (consulte el proceso 1, paso 4)

Paso 7: si tiene su fuente en GitHub, puede seleccionar «GitHub» y luego hacer clic en «Iniciar sesión con GitHub» para seleccionar su repositorio de código fuente.

Paso 8: Autorice Azure Static Web Apps con su cuenta de GitHub.

Paso 9: Confirme el acceso ingresando su contraseña de GitHub.

Paso 10: Ingrese los detalles de su nombre de organización o nombre de cuenta de Github en el menú desplegable. 

• Luego, elija el Repositorio de  código fuente seleccionado en el menú desplegable.
• Selecciona tu Sucursal.

Paso 11: para los detalles de compilación , he seleccionado >> Otro >> Personalizado , ya que estamos implementando su propio código fuente.

Paso 12: Seleccione la raíz de la ubicación de la aplicación   «/» y deje el resto de los pasos como están. (Consulte la imagen de abajo):

Paso 13: haga clic en «Revisar + crear» y una vez que se complete su implementación. Puede hacer clic en «Ir al recurso» para la configuración de la aplicación web estática. 

Paso 14:  vaya a «Static-Web-App-02» y navegue a Configuración >> Entorno y verifique la rama y el estado de  implementación

Paso 15: si no tiene ningún archivo de índice en su repositorio de Github seleccionado, el resultado se parece a la siguiente captura de pantalla:

Paso 16: si tiene un archivo de índice existente en su repositorio de Github seleccionado, el resultado será el siguiente

Donde tenemos el archivo de índice con el siguiente código de muestra.

<!DOCTYPE html>
<html>
<title>Azure Static Web App</title>
<body>
  
<h1>Static Web App 02</h1>
  
<p>This a Azure Static App Demo</p>
  
  
</body>
</html>

¡Eso es todo! Hemos terminado.