Hospedaje de un sitio web estático en Azure Storage

Puede proporcionar contenido estático (HTML, CSS, JavaScript y archivos de imagen) directamente desde un contenedor en una cuenta de uso general V2 o BlockBlobStorage . Para más información, consulte Hospedaje de sitios web estáticos en Azure Storage.

En este artículo se muestra cómo habilitar el hospedaje de sitios web estáticos mediante Azure Portal, la CLI de Azure o PowerShell.

Habilitación del hospedaje de sitios web estáticos

El hospedaje de sitios web estáticos es una característica que tiene que habilitar en la cuenta de almacenamiento.

Portal

1. Inicie sesión en Azure Portal para empezar.

2. Busque la cuenta de almacenamiento y selecciónela para mostrar el panel Información general de la cuenta.

3. En el panel Información general , seleccione la pestaña Funcionalidades . A continuación, seleccione Sitio web estático para mostrar la página de configuración del sitio web estático.

   

4. Seleccione Habilitado para habilitar el hospedaje de sitios web estáticos para la cuenta de almacenamiento.

5. En el campo Nombre del documento de índice, especifique una página de índice predeterminada (por ejemplo: index.html).

   La página de índice predeterminada se muestra cuando un usuario navega a la raíz del sitio web estático.

6. En el campo Ruta de acceso del documento de error, especifique una página de error predeterminada (por ejemplo: 404.html).

   La página de error predeterminada se muestra cuando un usuario intenta navegar a una página que no existe en el sitio web estático.

7. Haga clic en Guardar para finalizar la configuración del sitio estático.

   

8. Se muestra un mensaje de confirmación. Los puntos de conexión del sitio web estático y otra información de configuración se muestran en el panel Información general .

   

Azure CLI

Puede habilitar el hospedaje de sitios web estáticos mediante la CLI de Azure.

1. En primer lugar, abra Azure Cloud Shell o, si ha instalado la CLI de Azure localmente, abra una aplicación de consola de comandos como Windows PowerShell.

2. Si su identidad se asocia a más de una suscripción, establezca su suscripción activa en la suscripción de la cuenta de almacenamiento que hospedará el sitio web estático.

   az account set --subscription <subscription-id>
   

   Reemplace el valor de marcador de posición <subscription-id> por el identificador de la suscripción.

3. Habilite el hospedaje de sitios web estáticos.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • Reemplace el valor de marcador de posición <storage-account-name> por el nombre de la cuenta de almacenamiento.

   • Reemplace el <error-document-name> marcador de posición por el nombre del documento de error que aparecerá a los usuarios cuando un explorador solicite una página en el sitio que no existe.

   • Reemplace el <index-document-name> marcador de posición por el nombre del documento de índice. Este documento suele ser "index.html".

PowerShell

Puede habilitar el hospedaje de sitios web estáticos mediante el módulo de Azure PowerShell.

1. Abra una ventana de comando de Windows PowerShell.

2. Compruebe que tiene el módulo Az de Azure PowerShell versión 0.7 o posterior.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   Si necesita instalar o actualizar, consulte Instalación del módulo de Azure PowerShell.

3. Inicie sesión en la suscripción a Azure con el comando Connect-AzAccount y siga las instrucciones de la pantalla.

   Connect-AzAccount
   

4. Si su identidad se asocia a más de una suscripción, establezca su suscripción activa en la suscripción de la cuenta de almacenamiento que hospedará el sitio web estático.

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   Reemplace el valor de marcador de posición <subscription-id> por el identificador de la suscripción.

5. Obtenga el contexto de la cuenta de almacenamiento que define la cuenta de almacenamiento que desea usar.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • Reemplace el marcador de posición <resource-group-name> por el nombre del grupo de recursos.

   • Reemplace el valor de marcador de posición <storage-account-name> por el nombre de la cuenta de almacenamiento.

6. Habilite el hospedaje de sitios web estáticos.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Reemplace el <error-document-name> marcador de posición por el nombre del documento de error que aparecerá a los usuarios cuando un explorador solicite una página en el sitio que no existe.

   • Reemplace el <index-document-name> marcador de posición por el nombre del documento de índice. Este documento suele ser "index.html".

Cargar archivos

Portal

En las instrucciones siguientes se muestra cómo cargar archivos mediante Azure Portal. También puede usar AzCopy, PowerShell, la CLI o cualquier aplicación personalizada que pueda cargar archivos en el contenedor de $web de la cuenta. Para ver un tutorial paso a paso que cargue archivos mediante Visual Studio Code, consulte Tutorial: Hospedaje de un sitio web estático en Blob Storage.

1. En Azure Portal, vaya a la cuenta de almacenamiento que contiene el sitio web estático. Seleccione Contenedores en el panel de navegación izquierdo para mostrar la lista de contenedores.

2. En el panel Contenedores , seleccione el contenedor $web para abrir el panel Información general del contenedor.

   

3. En el panel Información general , seleccione el icono Cargar para abrir el panel Cargar blob . A continuación, seleccione el campo Archivos en el panel Cargar blob para abrir el explorador de archivos. Vaya al archivo que desea cargar, selecciónelo y, a continuación, seleccione Abrir para rellenar el campo Archivos . Opcionalmente, active la casilla Sobrescribir si los archivos ya existen .

   

4. Si piensa que el explorador muestre el contenido del archivo, asegúrese de que el tipo de contenido de ese archivo está establecido text/htmlen . Para comprobarlo, seleccione el nombre del blob que cargó en el paso anterior para abrir su panel Información general . Asegúrese de que el valor está establecido en el campo de propiedad CONTENT-TYPE .

   

   Nota:

   Esta propiedad se establece text/html automáticamente en para extensiones comúnmente reconocidas como .html. Sin embargo, en algunos casos, tendrá que establecer esto usted mismo. Si no establece esta propiedad text/htmlen , el explorador pedirá a los usuarios que descarguen el archivo en lugar de representar el contenido. Esta propiedad se puede establecer en el paso anterior.

Azure CLI

Cargue objetos en el contenedor $web desde un directorio de origen.

En este ejemplo se supone que está ejecutando comandos desde la sesión de Azure Cloud Shell.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

Nota:

Si el explorador solicita a los usuarios que descarguen el archivo en lugar de representar el contenido, puede anexar --content-type 'text/html; charset=utf-8' al comando .

• Reemplace el valor de marcador de posición <storage-account-name> por el nombre de la cuenta de almacenamiento.

• Reemplace el <source-path> marcador de posición por una ruta de acceso a la ubicación de los archivos que desea cargar.

Nota:

Si usa una instalación de ubicación de la CLI de Azure, puede usar la ruta de acceso a cualquier ubicación del equipo local (por ejemplo: C:\myFolder.

Si usa Azure Cloud Shell, tendrá que hacer referencia a un recurso compartido de archivos que sea visible para Cloud Shell. Esta ubicación podría ser el recurso compartido de archivos del propio recurso compartido en la nube o un recurso compartido de archivos existente que monte desde Cloud Shell. Para obtener información sobre cómo hacerlo, consulte Conservación de archivos en Azure Cloud Shell.

PowerShell

Cargue objetos en el contenedor $web desde un directorio de origen.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

Nota:

Si el explorador solicita a los usuarios que descarguen el archivo en lugar de representar el contenido, puede anexar -Properties @{ ContentType = "text/html; charset=utf-8";} al comando .

• Reemplace el valor del <path-to-file> marcador de posición por la ruta de acceso completa al archivo que desea cargar (por ejemplo: C:\temp\index.html).

• Reemplace el valor del <blob-name> marcador de posición por el nombre que desea asignar al blob resultante (por ejemplo: index.html).

Búsqueda de la dirección URL del sitio web

Puede ver las páginas del sitio desde un explorador mediante la dirección URL pública del sitio web.

Portal

En el panel que aparece junto a la página de información general de la cuenta de almacenamiento, seleccione Sitio web estático. La dirección URL del sitio aparece en el campo Punto de conexión principal .

Azure CLI

Busque la dirección URL pública del sitio web estático mediante el comando siguiente:

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• Reemplace el valor de marcador de posición <storage-account-name> por el nombre de la cuenta de almacenamiento.

• Reemplace el marcador de posición <resource-group-name> por el nombre del grupo de recursos.

PowerShell

Busque la dirección URL pública del sitio web estático mediante el comando siguiente:

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• Reemplace el marcador de posición <resource-group-name> por el nombre del grupo de recursos.

• Reemplace el valor de marcador de posición <storage-account-name> por el nombre de la cuenta de almacenamiento.

Habilitación de métricas en páginas de sitios web estáticos

Después de habilitar las métricas, las estadísticas de tráfico de los archivos en el contenedor $web aparecen en el panel de métricas.

1. Haga clic en Métricas en la sección Supervisión del menú de la cuenta de almacenamiento.

   

   Nota:

   Los datos de métricas se generan mediante el enlace a diferentes API de métricas. El portal solo muestra los miembros de la API usados en un período de tiempo determinado para centrarse solo en los miembros que devuelven datos. Para asegurarse de que puede seleccionar el miembro de API necesario, el primer paso es expandir el período de tiempo.

2. Haga clic en el botón período de tiempo, elija un período de tiempo y, a continuación, haga clic en Aplicar.

   

3. Seleccione Blob en la lista desplegable Espacio de nombres .

   

4. A continuación, seleccione la métrica Salida .

   

5. Seleccione Sum en el selector Agregación .

   

6. Haga clic en el botón Agregar filtro y elija Nombre de API en el selector de propiedades .

   

7. Active la casilla situada junto a GetWebContent en el selector Valores para rellenar el informe de métricas.

   

   Nota:

   La casilla GetWebContent solo aparece si ese miembro de API se usó dentro de un período de tiempo determinado. El portal solo muestra los miembros de la API usados en un período de tiempo determinado para centrarse solo en los miembros que devuelven datos. Si no encuentra un miembro de API específico en esta lista, expanda el período de tiempo.

Pasos siguientes

• Aprenda a configurar un dominio personalizado con el sitio web estático. Consulte Asignación de un dominio personalizado a un punto de conexión de Azure Blob Storage.