Hospedaje de un sitio web estático en Azure Storage

1. Inicie sesión en Azure Portal.

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 de nombre del documento Índice , introduzca una página de índice predeterminada (por ejemplo, index.html).

   La página de índice predeterminada aparece cuando navegas a la raíz de tu sitio web estático.

6. En el campo de ruta del documento de error , introduzca una página de error predeterminada (por ejemplo, 404.html).

   La página de error predeterminada aparece cuando navegas a una página que no existe en tu sitio web estático.

7. Selecciona Guardar para terminar la configuración estática del sitio.

   

8. Después de guardar la configuración, aparece un mensaje de confirmación. El panel de Resumen muestra los endpoints estáticos de tu sitio web y otra información de configuración.

   

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 tu identidad está asociada a más de una suscripción, configura tu suscripción activa a la suscripción de la cuenta de almacenamiento que aloja tu sitio web estático. Sustituya el valor del marcador de posición <subscription-id> por el ID de su suscripción.

   az account set --subscription <subscription-id>
   

   Sustituya el valor del marcador de posición <subscription-id> por el ID 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.

   • Sustituye el <error-document-name> marcador de posición por el nombre del documento de error que aparece cuando un navegador solicita una página de tu sitio que no existe.

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

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-Object 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 tu identidad está asociada a más de una suscripción, configura tu suscripción activa a la suscripción de la cuenta de almacenamiento que aloja tu sitio web estático.

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

   Sustituya el valor del marcador de posición <subscription-id> por el identificador de su 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>
   

   • Sustituye el <error-document-name> marcador de posición por el nombre del documento de error que aparece cuando un navegador solicita una página de tu sitio que no existe.

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

En las instrucciones siguientes se muestra cómo cargar archivos mediante Azure Portal. También puedes usar AzCopy, Azure PowerShell, CLI de Azure o una aplicación personalizada para subir archivos al $web contenedor de tu cuenta. Para un tutorial paso a paso que sube archivos usando Visual Studio Code, consulta Tutorial: Aloja 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 de Contenedores , selecciona el $web contenedor para abrir el panel de Resumen del contenedor.

   

3. En el panel de Resumen , selecciona Subir. En el panel Cargar blob, selecciona el campo Archivos para abrir el explorador de archivos. Ve al archivo, selecciona y luego Abrir. Opcionalmente, selecciona Sobrescribir si ya existen archivos.

   

4. Si pretendes que el navegador muestre el contenido del archivo, asegúrate de que el tipo de contenido de ese archivo esté configurado en text/html. Para verificar esta configuración, selecciona el nombre del blob que subiste en el paso anterior para abrir su panel de Resumen . 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 reconocidas habitualmente, como .html. Sin embargo, en algunos casos, puede que necesites configurarlo tú mismo. Si no configuras esta propiedad en text/html, el navegador pide a los usuarios que descarguen el archivo en lugar de renderizar el contenido. Puedes establecer esta propiedad en el paso anterior.

Sube objetos al $web contenedor desde un directorio de origen.

Este ejemplo asume que estás ejecutando comandos desde una sesión de Azure Cloud Shell.

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

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

Sube objetos al $web contenedor desde un directorio de origen.

# Upload a file
Set-AzStorageBlobContent -File "<path-to-file>" `
   -Container '$web' `
   -Blob "<blob-name>" `
   -Context $ctx

• Sustituye el <path-to-file> valor marcador por la ruta totalmente calificada hacia el archivo que quieres subir (por ejemplo, C:\temp\index.html).

• Sustituye el <blob-name> valor marcador por el nombre que quieres dar al blob resultante (por ejemplo, index.html).

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 .

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.

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.