Hospedaje de un sitio web estático en Azure StorageHost a static website in 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.You can serve static content (HTML, CSS, JavaScript, and image files) directly from a container in a general-purpose V2 or BlockBlobStorage account. Para obtener más información, consulte Hospedaje de sitios web estáticos en Azure Storage.To learn more, see Static website hosting in 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.This article shows you how to enable static website hosting by using the Azure portal, the Azure CLI, or PowerShell.

Habilitación del hospedaje de sitios web estáticosEnable static website hosting

El hospedaje de sitios web estáticos es una característica que permite habilitar la cuenta de almacenamiento.Static website hosting is a feature that you have to enable on the storage account.

  1. Inicie sesión en Azure Portal para empezar a trabajar.Sign in to the Azure portal to get started.

  2. Busque la cuenta de almacenamiento y muestre la información general de la cuenta.Locate your storage account and display the account overview.

  3. Seleccione Sitio web estático para mostrar la página de configuración de los sitios web estáticos.Select Static website to display the configuration page for static websites.

  4. Seleccione Habilitado para habilitar el hospedaje del sitio web estático para la cuenta de almacenamiento.Select Enabled to enable static website hosting for the storage account.

  5. En el campo Index document name (Nombre del documento de índice), especifique una página de índice predeterminada (por ejemplo: index.html).In the Index document name field, specify a default index page (For example: index.html).

    La página de índice predeterminada se muestra cuando un usuario navega hasta la raíz del sitio web estático.The default index page is displayed when a user navigates to the root of your static website.

  6. En el campo Error document path (Ruta de acceso del documento de error), especifique una página de error predeterminada (por ejemplo: 404.html).In the Error document path field, specify a default error page (For example: 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.The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.

  7. Haga clic en Save(Guardar).Click Save. Azure Portal ahora muestra el punto de conexión estático del sitio web.The Azure portal now displays your static website endpoint.

    Habilitación del hospedaje del sitio web estático para una cuenta de almacenamiento

Carga de archivosUpload files

En estas instrucciones se muestra cómo cargar archivos mediante la versión del Explorador de Storage que aparece en Azure Portal.These instructions show you how to upload files by using the version of Storage Explorer that appears in the Azure portal. No obstante, también se puede usar la versión del Explorador de Storage que se ejecuta fuera de Azure Portal.However, you can also use the version of Storage Explorer that runs outside of the Azure portal. Puede usar AzCopy, PowerShell, CLI o cualquier aplicación personalizada que pueda cargar archivos en el contenedor $web de su cuenta.You could use AzCopy, PowerShell, CLI, or any custom application that can upload files to the $web container of your account. 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.For a step-by-step tutorial that uploads files by using Visual Studio code, see Tutorial: Host a static website on Blob Storage.

  1. Seleccione el Explorador de Storage (versión preliminar) .Select Storage Explorer (preview).

  2. Expanda el nodo BLOB CONTAINERS (CONTENEDORES DE BLOBS) y seleccione el contenedor $web.Expand the BLOB CONTAINERS node, and then select the $web container.

  3. Elija el botón Upload (Cargar) para cargar los archivos.Choose the Upload button to upload files.

    Carga de archivos

  4. 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.If you intend for the browser to display the contents of file, make sure that the content type of that file is set to text/html.

    Comprobar los tipos de contenido

    Nota

    El Explorador de Storage establece automáticamente esta propiedad en text/html para las extensiones que se reconocen habitualmente, como .html.Storage Explorer automatically sets this property to text/html for commonly recognized extensions such as .html. Sin embargo, en algunos casos, el usuario es quien debe realizar la operación.However, in some cases, you'll have to set this yourself. Si no establece esta propiedad en text/html, el explorador solicitará a los usuarios que descarguen el archivo, en lugar representar el contenido.If you don't set this property to text/html, the browser will prompt users to download the file instead of rendering the contents. Para establecer esta propiedad, haga clic con el botón derecho en el archivo y, después, haga clic en Propiedades.To set this property, right-click the file, and then click Properties.

Búsqueda de la dirección URL del sitio webFind the website URL

Para ver las páginas de un sitio web desde un explorador, use la dirección URL pública del sitio.You can view the pages of your site from a browser by using the public URL of the website.

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.In the pane that appears beside the account overview page of your storage account, select Static Website. La dirección URL del sitio aparece en el campo Punto de conexión principal.The URL of your site appears in the Primary endpoint field.

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

Habilitación de métricas en páginas del sitio web estáticoEnable metrics on static website pages

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.Once you've enabled metrics, traffic statistics on files in the $web container are reported in the metrics dashboard.

  1. Haga clic en métricas en la sección monitor del menú de la cuenta de almacenamiento.Click Metrics under the Monitor section of the storage account menu.

    Vínculo de métricasMetrics link

    Nota

    Los datos de las métricas se generan al enlazarse en diferentes API de métricas.Metrics data are generated by hooking into different metrics APIs. 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.The portal only displays API members used within a given time frame in order to only focus on members that return data. Para asegurarse de que puede seleccionar el miembro de API necesario, el primer paso es expandir el período de tiempo.In order to ensure you're able to select the necessary API member, the first step is to expand the time frame.

  2. Haga clic en el botón de marco de tiempo y seleccione un plazo de tiempo y luego haga clic en Aplicar.Click on the time frame button, choose a time frame, and then click Apply.

    Intervalo de tiempo de las métricas de sitios web estáticos de Azure Storage

  3. A continuación, seleccione Blob en el menú desplegable Espacio de nombres.Select Blob from the Namespace drop down.

    Espacio de nombres de métricas de sitios web estáticos de Azure Storage

  4. A continuación, seleccione la métrica Egress.Then select the Egress metric.

    Captura de pantalla que muestra la métrica de salida de sitios web estáticos de Azure Storage.

  5. Seleccione Sum del selector Aggregation (Agregación).Select Sum from the Aggregation selector.

    Agregación de métricas de sitios web estáticos de Azure Storage

  6. Haga clic en el botón Agregar filtro y elija Nombre de API en el selector Propiedad.Click the Add filter button and choose API name from the Property selector.

    Nombre de API de métricas de sitios web estáticos de Azure Storage

  7. Active la casilla junto a GetWebContent en el selector Valores para completar el informe de métricas.Check the box next to GetWebContent in the Values selector to populate the metrics report.

    GetWebContent de métricas de sitios web de Azure Storage

    Nota

    La casilla GetWebContent solo aparece si ese miembro de la API se usó dentro de un período de tiempo determinado.The GetWebContent checkbox appears only if that API member was used within a given time frame. 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.The portal only displays API members used within a given time frame in order to only focus on members that return data. Si no encuentra un miembro específico de la API en esta lista, expanda el período de tiempo.If you can't find a specific API member in this list, expand the time frame.

Pasos siguientesNext steps