Ejercicio: Creación de una aplicación web HTML estática mediante Azure Cloud Shell

  • 15 minutos

El espacio aislado gratuito permite crear recursos en un subconjunto de las regiones globales de Azure. Seleccione una región de la lista siguiente al crear los recursos:

  • Oeste de EE. UU. 2
  • Centro-sur de EE. UU.
  • Centro de EE. UU.
  • Este de EE. UU.
  • Oeste de Europa
  • Sudeste de Asia
  • Japón Oriental
  • Sur de Brasil
  • Sudeste de Australia
  • Centro de la India

En este ejercicio, va a implementar un sitio de HTML y CSS básico en Azure App Service mediante el comando az webapp up de la CLI de Azure. Después, actualizará el código y lo volverá a implementar con el mismo comando.

El comando az webapp up facilita la creación y actualización de aplicaciones web. Cuando se ejecuta, realiza las siguientes acciones:

  • Cree un grupo de recursos predeterminado si no se especifica uno.
  • Crear un plan de App Service predeterminado.
  • Crear una aplicación con el nombre especificado.
  • Implementar con ZIP archivos desde el directorio de trabajo actual a la aplicación web.

Importante

Para completar este ejercicio, debe cambiar Cloud Shell a la versión clásica. Una vez que Cloud Shell termine de cargarse, seleccione Configuración en el menú de la parte superior de Cloud Shell y, después, seleccione Ir a la versión clásica.

Descarga de la aplicación de ejemplo

En esta sección, usará el espacio aislado para descargar la aplicación de ejemplo y establecer variables para que algunos de los comandos sean más fáciles de escribir.

  1. En el espacio aislado, cree un directorio y, después, navegue hasta él.

    mkdir htmlapp

cd htmlapp

  2. Ejecute el siguiente comando git para clonar el repositorio de aplicaciones de ejemplo en el directorio htmlapp.

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git

  3. Establezca variables para contener el grupo de recursos y los nombres de la aplicación mediante la ejecución de los comandos siguientes.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

Creación de la aplicación web

  1. Cambie al directorio que contiene el código de ejemplo y ejecute el comando az webapp up.

    cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

    Este comando puede tardar unos minutos en ejecutarse. Mientras el comando se ejecuta, muestra información similar a la del ejemplo siguiente.

    {
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

  2. Abra una pestaña nueva en el explorador, vaya a la dirección URL de la aplicación (https://<myAppName>.azurewebsites.net) y compruebe que la aplicación está en ejecución; anote el título de la parte superior de la página. Deje el explorador abierto en la aplicación para la sección siguiente.

    Nota

    Puede copiar <myAppName>.azurewebsites.net desde la salida del comando anterior, o bien seleccionar la dirección URL de la salida para abrir el sitio en una pestaña nueva.

Actualización de la aplicación y nueva implementación

  1. En Cloud Shell, escriba code index.html para abrir el editor. En la etiqueta de encabezado <h1>, cambie Azure App Service - Sample Static HTML Site a Azure App Service Updated - o a cualquier otra cosa que desee.

  2. Use los comandos ctrl-s para guardar y ctrl-q para salir.

  3. Vuelva a implementar la aplicación con el mismo comando az webapp up que ha usado antes.

    az webapp up -g $resourceGroup -n $appName --html

    Sugerencia

    Puede usar la flecha arriba del teclado para desplazarse por los comandos anteriores.

  4. Una vez que se complete la implementación, vuelva al explorador del paso 2 de la sección "Creación de la aplicación web" y actualice la página.