Creación de una aplicación web HTML estática en AzureCreate a static HTML web app in Azure

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático.Azure App Service provides a highly scalable, self-patching web hosting service. En este inicio rápido se explica cómo implementar un sitio HTML+CSS básico en Azure App Service.This quickstart shows how to deploy a basic HTML+CSS site to 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.You'll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Página principal de la aplicación de ejemplo

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Uso de Azure Cloud ShellUse Azure Cloud Shell

En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Puede usar Bash o PowerShell con Cloud Shell para trabajar con los servicios de Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo sin tener que instalar nada en su entorno local.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Para iniciar Azure Cloud Shell:To start Azure Cloud Shell:

OpciónOption Ejemplo o vínculoExample/Link
Seleccione Pruébelo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Solo con seleccionar Pruébelo no se copia automáticamente el código en Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell en una nueva ventanaLaunch Cloud Shell in a new window
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Botón Cloud Shell en Azure Portal

Para ejecutar el código de este artículo en Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Inicie Cloud Shell.Start Cloud Shell.

  2. Seleccione el botón Copiar de un bloque de código para copiar el código.Select the Copy button on a code block to copy the code.

  3. Pegue el código en la sesión de Cloud Shell. Para ello, seleccione Ctrl+Mayús+V en Windows y Linux, o bien seleccione Cmd+Mayús+V en macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Seleccione Entrar para ejecutar el código.Select Enter to run the code.

Descarga del ejemploDownload the sample

En Cloud Shell, cree un directorio de inicio rápido y luego cambie a él.In the Cloud Shell, create a quickstart directory and then change to it.

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.Next, run the following command to clone the sample app repository to your quickstart directory.

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

Creación de una aplicación webCreate a web app

Cambie al directorio que contiene el código de ejemplo y ejecute el comando az webapp up.Change to the directory that contains the sample code and run the az webapp up command.

En el siguiente ejemplo, reemplace <app_name > por un nombre único.In the following example, replace <app_name> with a unique app name.

cd html-docs-hello-world
az webapp up --location westeurope --name <app_name> --html

El comando az webapp up realiza las acciones siguientes:The az webapp up command does the following actions:

  • Crear un grupo de recursos predeterminado.Create a default resource group.

  • Crear un plan de App Service predeterminado.Create a default app service plan.

  • Crear una aplicación con el nombre especificado.Create an app with the specified name.

  • Implementar con ZIP archivos desde el directorio de trabajo actual a la aplicación web.Zip deploy files from the current working directory to the web app.

Este comando puede tardar varios minutos en ejecutarse.This command may take a few minutes to run. Durante la ejecución, muestra información similar a la del ejemplo siguiente:While running, it displays information similar to the following example:

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

Anote el valor resourceGroup.Make a note of the resourceGroup value. Lo necesitará en la sección de limpieza de recursos.You need it for the clean up resources section.

Navegación hasta la aplicaciónBrowse to the app

En un explorador, vaya a la dirección URL de la aplicación: http://<app_name>.azurewebsites.net.In a browser, go to the app URL: http://<app_name>.azurewebsites.net.

La página se ejecuta como una aplicación web de Azure App Service.The page is running as an Azure App Service web app.

Página de inicio de la aplicación de ejemplo

¡Enhorabuena!Congratulations! Ha implementado la primera aplicación HTML en App Service.You've deployed your first HTML app to App Service.

Actualización de la aplicación y nueva implementaciónUpdate and redeploy the app

En Cloud Shell, escriba nano index.html para abrir el editor de texto nano.In the Cloud Shell, type nano index.html to open the nano text editor. En la etiqueta del encabezado <h1>, cambie "Azure App Service - Sample Static HTML Site" por "Azure App Service", como se muestra a continuación.In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service", as shown below.

Nano index.html

Guarde los cambios y salga de nano.Save your changes and exit nano. Use el comando ^O para guardar y ^X para salir.Use the command ^O to save and ^X to exit.

Ahora podrá volver a implementar la aplicación con el mismo comando az webapp up.You'll now redeploy the app with the same az webapp up command.

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.Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Página de inicio de la aplicación de ejemplo actualizada

Administración de la nueva aplicación de AzureManage your new Azure app

Para administrar la aplicación web que ha creado, en Azure Portal, busque y seleccione App Services.To manage the web app you created, in the Azure portal, search for and select App Services.

Selección de App Services en Azure Portal

En la página App Services, seleccione el nombre de la aplicación de Azure.On the App Services page, select the name of your Azure app.

Navegación en el portal a la aplicación de Azure

Podrá ver la página de información general de la aplicación web.You see your web app's Overview page. En este caso, puede realizar tareas de administración básicas como examinar, detener, iniciar, reiniciar y eliminar.Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Hoja de App Service en Azure Portal

El menú izquierdo proporciona distintas páginas para configurar la aplicación.The left menu provides different pages for configuring your app.

Limpieza de recursosClean up resources

En los pasos anteriores, creó recursos de Azure en un grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell.If you don't expect to need these resources in the future, delete the resource group by running the following command in the 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.Remember that the resource group name was automatically generated for you in the create a web app step.

az group delete --name appsvc_rg_Windows_westeurope

Este comando puede tardar varios segundos en ejecutarse.This command may take a minute to run.

Pasos siguientesNext steps