Creación de una aplicación web HTML estática en Azure

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático. En este inicio rápido se explica cómo implementar un sitio HTML+CSS básico en Azure App Service. Completará esta guía de inicio rápido en Cloud Shell, pero también puede ejecutar estos comandos localmente con la CLI de Azure.

Nota:

Para obtener información sobre cómo hospedar archivos HTML estáticos en un entorno sin servidor, consulte Static Web Apps.

Home page of sample app

Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.

Requisitos previos

Descarga del ejemplo

En Cloud Shell, cree un directorio de inicio rápido y luego cambie a él.

mkdir quickstart

cd $HOME/quickstart

A continuación, ejecute el comando siguiente para clonar el repositorio de la aplicación de ejemplo en el directorio de inicio rápido.

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

Creación de una aplicación web

Cambie al directorio que contiene el código de ejemplo y ejecute el comando az webapp up. En el siguiente ejemplo, reemplace <app-name> por un nombre de aplicación único. El contenido estático se indica mediante la marca de --html.

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

El comando az webapp up realiza las acciones siguientes:

  • Crear un grupo de recursos predeterminado.

  • 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.

Este comando puede tardar varios minutos en ejecutarse. Durante la ejecución, muestra información similar a la del ejemplo siguiente:

{
  "app_url": "https://&lt;app_name&gt;.azurewebsites.net",
  "location": "westeurope",
  "name": "&lt;app_name&gt;",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/&lt;username&gt;/quickstart/html-docs-hello-world ",
  &lt; JSON data removed for brevity. &gt;
}

Anote el valor resourceGroup. Lo necesitará en la sección de limpieza de recursos.

Navegación hasta la aplicación

En un explorador, vaya a la dirección URL de la aplicación: http://<app_name>.azurewebsites.net.

La página se ejecuta como una aplicación web de Azure App Service.

Sample app home page

¡Enhorabuena! Ha implementado la primera aplicación HTML en App Service.

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

En Cloud Shell, escriba nano index.html para abrir el editor de texto nano. En la etiqueta del encabezado <h1>, cambie "Azure App Service - Sample Static HTML Site" por "Azure App Service", como se muestra a continuación.

Nano index.html

Guarde los cambios y salga de nano. Use el comando ^O para guardar y ^X para salir.

Ahora podrá volver a implementar la aplicación con el mismo comando az webapp up.

az webapp up --location westeurope --name <app_name> --html

Una vez que la implementación haya finalizado, vuelva a la ventana del explorador que abrió en el paso Navegación hasta la aplicación y actualice la página.

Updated sample app home page

Administración de la nueva aplicación de Azure

Para administrar la aplicación web que ha creado, en Azure Portal, busque y seleccione App Services.

Select App Services in the Azure portal

En la página App Services, seleccione el nombre de la aplicación de Azure.

Portal navigation to Azure app

Podrá ver la página de información general de la aplicación web. En este caso, puede realizar tareas de administración básicas como examinar, detener, iniciar, reiniciar y eliminar.

App Service blade in Azure portal

El menú izquierdo proporciona distintas páginas para configurar la aplicación.

Limpieza de recursos

En los pasos anteriores, creó recursos de Azure en un grupo de recursos. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell. Recuerde que el nombre del grupo de recursos se generó automáticamente para el usuario en el paso Creación de una aplicación web.

az group delete --name appsvc_rg_Windows_westeurope

Este comando puede tardar varios segundos en ejecutarse.

Pasos siguientes