Hospedaje de un sitio web estático en Azure Storage

Artículo
05/11/2023

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 obtener más información, consulte Hospedaje de sitios web estáticos en Azure Storage.

En este artículo se le muestra cómo habilitar el hospedaje de sitios web estáticos con 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 permite habilitar la cuenta de almacenamiento.

Inicie sesión en Azure Portal para empezar a trabajar.
Busque la cuenta de almacenamiento y selecciónela para mostrar el panel Información general de la cuenta.
En el panel Información general, seleccione la pestaña Funciones. A continuación, seleccione Sitio web estático para mostrar la página de configuración del sitio web estático.
Seleccione Habilitado para habilitar el hospedaje del sitio web estático para la cuenta de almacenamiento.
En el campo Index document name (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 hasta la raíz del sitio web estático.
En el campo Error document path (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.
Haga clic en Guardar para finalizar la configuración del sitio web estático.
Se muestra un mensaje de confirmación. Los puntos de conexión del sitio web estáticos y otra información de configuración se muestran en el panel Información general.

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

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.
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.
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 marcador de posición <error-document-name> por el nombre del documento de error que verán los usuarios cuando un explorador solicite una página en el sitio que no existe.
- Reemplace el marcador de posición <index-document-name> por el nombre del documento de índice. Este documento suele ser "index.html".

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

Abra una ventana de comando de Windows PowerShell.
Compruebe que tiene la versión 0.7 o posterior del módulo Az de Azure PowerShell.
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
Si necesita instalarla o actualizarla, consulte el artículo sobre cómo instalar el módulo de Azure PowerShell.
Inicie sesión en la suscripción a Azure con el comando Connect-AzAccount y siga las instrucciones de la pantalla.
```
Connect-AzAccount
```
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.
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.
Habilite el hospedaje de sitios web estáticos.
```
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
```
- Reemplace el marcador de posición <error-document-name> por el nombre del documento de error que verán los usuarios cuando un explorador solicite una página en el sitio que no existe.
- Reemplace el marcador de posición <index-document-name> por el nombre del documento de índice. Este documento suele ser "index.html".

Carga de archivos

Las instrucciones siguientes muestran cómo cargar archivos mediante Azure Portal. También puede usar AzCopy, PowerShell, CLI o cualquier aplicación personalizada que pueda cargar archivos en el contenedor $web de su cuenta. Para ver un tutorial detallado sobre la carga de archivos mediante Visual Studio Code, consulte Tutorial: Hospedaje de un sitio web estático en Blob Storage.

En el 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.
En el panel Contenedores, seleccione el contenedor $web para abrir el panel Información general del contenedor.
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.
Si pretende que el explorador muestre el contenido de un archivo, asegúrese de que el tipo de contenido del mismo está establecido en text/html. 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 automáticamente en text/html para las extensiones que se reconocen habitualmente, como .html. Sin embargo, en algunos casos, el usuario es quien debe realizar la operación. Si no establece esta propiedad en text/html, el explorador solicitará a los usuarios que descarguen el archivo, en lugar representar el contenido. Esta propiedad se puede establecer en el paso anterior.

Cargue los objetos al contenedor $web desde un directorio de origen.

En este ejemplo se da por hecho que ejecuta 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 marcador de posición <source-path> 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 en el equipo local (por ejemplo: C:\myFolder).

Si usa Azure Cloud Shell, tendrá que hacer referencia a un recurso compartido de archivos 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 monta desde Cloud Shell. Para obtener información sobre cómo hacerlo, consulte Persistencia de archivos en Azure Cloud Shell.

Cargue los objetos al 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 de marcador de posición <path-to-file> por la ruta de acceso absoluta al archivo que desea cargar (por ejemplo: C:\temp\index.html).
Reemplace el valor de marcador de posición <blob-name> por el nombre que desea dar al blob resultante (por ejemplo: index.html).

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

Para ver las páginas de un sitio web desde un explorador, use la dirección URL pública del sitio.

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

Métrica de métricas de sitios web estáticos de Azure Storage

Para buscar la dirección URL pública de un sitio web estático, use el siguiente comando:

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.

Para buscar la dirección URL pública de un sitio web estático, use el siguiente comando:

 $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 del sitio web estático

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.

Haga clic en métricas en la sección monitor del menú de la cuenta de almacenamiento.

Nota:

Los datos de las métricas se generan al enlazarse en diferentes API de métricas. El portal solo muestra los miembros de API que se usan en un período de tiempo determinado, para centrarse únicamente 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.
Haga clic en el botón de marco de tiempo y seleccione un plazo de tiempo y luego haga clic en Aplicar.
A continuación, seleccione Blob en el menú desplegable Espacio de nombres.
A continuación, seleccione la métrica Egress.
Seleccione Sum del selector Aggregation (Agregación).
Haga clic en el botón Agregar filtro y elija Nombre de API en el selector Propiedad.
Active la casilla junto a GetWebContent en el selector Valores para completar el informe de métricas.

Nota:

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