Inicio rápido: creación del primer sitio estático mediante la CLI de Azure

Artículo
04/09/2024

Azure Static Web Apps publica sitios web en un entorno de producción mediante la creación de aplicaciones desde un repositorio de código.

En este inicio rápido, se implementa una aplicación web en Azure Static Web Apps mediante la CLI de Azure.

Requisitos previos

Cuenta de GitHub.
Cuenta de Azure.
- Si no tiene una suscripción a Azure, puede crear una cuenta de evaluación gratuita.
La CLI de Azure instalada, (versión 2.29.0 o posterior).
Configuración de Git.

Definición de las variables de entorno

El primer paso de este inicio rápido es definir variables de entorno.

export RANDOM_ID="$(openssl rand -hex 3)"
export MY_RESOURCE_GROUP_NAME="myStaticWebAppResourceGroup$RANDOM_ID"
export REGION=EastUS2
export MY_STATIC_WEB_APP_NAME="myStaticWebApp$RANDOM_ID"

Creación de un repositorio (opcional)

(Opcional) En este artículo se usa un repositorio de plantillas de GitHub como otra manera de facilitar la introducción. La plantilla incluye una aplicación de inicio que se implementa en Azure Static Web Apps.

Vaya a la siguiente ubicación para crear un repositorio: https://github.com/staticwebdev/vanilla-basic/generate.
Asigne un nombre al repositorio my-first-static-web-app.

Nota:

Azure Static Web Apps requiere al menos un archivo HTML para crear una aplicación web. El repositorio que se crea en este paso incluye un solo archivo index.html.

Seleccione Create repository (Crear repositorio).

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

Implemente la aplicación como una aplicación web estática desde la CLI de Azure.

Cree un grupo de recursos.

az group create \
  --name $MY_RESOURCE_GROUP_NAME \
  --location $REGION

Resultados:

{
  "id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
  "location": "eastus2",
  "managedBy": null,
  "name": "my-swa-group",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": "Microsoft.Resources/resourceGroups"
}

Implemente una aplicación web estática desde el repositorio.

az staticwebapp create \
    --name $MY_STATIC_WEB_APP_NAME \
    --resource-group $MY_RESOURCE_GROUP_NAME \
    --location $REGION

Hay dos aspectos para implementar una aplicación estática. La primera operación crea los recursos de Azure subyacentes que componen la aplicación. El segundo es un flujo de trabajo que crea y publica la aplicación.

Para poder ir a un nuevo sitio estático, primero la compilación de implementación debe terminar de ejecutarse.

Vuelva a la ventana de la consola y ejecute el siguiente comando para enumerar la dirección URL del sitio web.

export MY_STATIC_WEB_APP_URL=$(az staticwebapp show --name  $MY_STATIC_WEB_APP_NAME --resource-group $MY_RESOURCE_GROUP_NAME --query "defaultHostname" -o tsv)

runtime="1 minute";
endtime=$(date -ud "$runtime" +%s);
while [[ $(date -u +%s) -le $endtime ]]; do
    if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then 
        curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
        break
    else 
        sleep 10
    fi;
done

Resultados:

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8 />
<meta name=viewport content="width=device-width, initial-scale=1.0" />
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<title>Azure Static Web Apps - Welcome</title>
<link rel="shortcut icon" href=https://appservice.azureedge.net/images/static-apps/v3/favicon.svg type=image/x-icon />
<link rel=stylesheet href=https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css crossorigin=anonymous />

echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"

Uso de una plantilla de GitHub

Ha implementado correctamente una aplicación web estática en Azure Static Web Apps mediante la CLI de Azure. Ahora que tiene conocimientos básicos sobre cómo implementar una aplicación web estática, puede explorar características y funcionalidades más avanzadas de Azure Static Web Apps.

En caso de que quiera usar el repositorio de plantillas de GitHub, siga estos pasos:

Vaya a https://github.com/login/device y escriba el código que obtiene de GitHub para activar y recuperar el token de acceso personal de GitHub.

Ir a https://github.com/login/device.
Escriba el código de usuario como se muestra en el mensaje de la consola.
Seleccione Continue.
Seleccione Authorize AzureAppServiceCLI.

Visualización del sitio web a través de Git

Cuando obtenga la dirección URL del repositorio mientras ejecuta el script, copie la dirección URL del repositorio y péguela en el explorador.
Seleccione la pestaña Actions.

En este momento, Azure crea los recursos para admitir la aplicación web estática. Espere hasta que el icono situado junto al flujo de trabajo en ejecución se convierta en una marca de verificación con fondo verde. Esta operación puede tardar varios minutos en ejecutarse.
Una vez que aparezca el icono de acción correcta, el flujo de trabajo se completa y puede volver a la ventana de la consola.
Ejecute el siguiente comando para consultar la dirección URL del sitio web.

   az staticwebapp show \
     --name $MY_STATIC_WEB_APP_NAME \
     --query "defaultHostname"

Copie la dirección URL en el explorador y vaya al sitio web.

Limpieza de recursos (opcional)

Si no va a seguir usando esta aplicación, elimine el grupo de recursos y la aplicación web estática mediante el comando az group delete.

Pasos siguientes

Adición de una API

Share via