Tutorial: Hospedaje de un sitio web estático en Blob Storage

En este tutorial, aprenderá a compilar e implementar un sitio web estático en Azure Storage. Cuando haya terminado, tendrá un sitio web estático al que los usuarios pueden acceder públicamente.

En este tutorial, aprenderá a:

• Configuración del hospedaje de sitios web estáticos
• Implementación de un sitio web Hello World

Los sitios web estáticos tienen algunas limitaciones. Por ejemplo, si desea configurar encabezados, tendrá que usar Azure Content Delivery Network (Azure CDN). No hay forma de configurar encabezados como parte de la propia característica de sitio web estático. Además, no se admiten AuthN ni AuthZ.

Si estas características son importantes para su escenario, considere la posibilidad de usar Azure Static Web Apps. Es una excelente alternativa a los sitios web estáticos y también es adecuada en los casos en los que no se requiere un servidor web para representar contenido. Puede configurar encabezados y AuthN/AuthZ es totalmente compatible. Azure Static Web Apps también proporciona un flujo de trabajo de integración continua y entrega continua (CI/CD) totalmente administrado desde el origen de GitHub a la implementación global.

En este vídeo se muestra cómo hospedar un sitio web estático en Blob Storage.

Los pasos del vídeo también se describen en las secciones siguientes.

Prerrequisitos

Para acceder a Azure Storage, necesitará una suscripción de Azure. Si todavía no tiene una suscripción, cree una cuenta gratuita antes de empezar.

Todo el acceso a Azure Storage tiene lugar a través de una cuenta de almacenamiento. Para este inicio rápido, cree una cuenta de almacenamiento mediante Azure Portal, Azure PowerShell o la CLI de Azure. Para obtener ayuda para crear una cuenta de almacenamiento, consulte Creación de una cuenta de almacenamiento.

Nota:

Los sitios web estáticos ahora están disponibles para cuentas de almacenamiento estándar de uso general v2, así como para cuentas de almacenamiento con espacio de nombres jerárquico habilitado.

En este tutorial se usa Visual Studio Code, una herramienta gratuita para programadores, para compilar el sitio web estático e implementarlo en una cuenta de Azure Storage.

Después de instalar Visual Studio Code, instale la extensión de versión preliminar de Azure Storage. Esta extensión integra la funcionalidad de administración de Azure Storage con Visual Studio Code. Usará la extensión para implementar el sitio web estático en Azure Storage. Para instalar la extensión:

1. Inicie Visual Studio Code.

2. En la barra de herramientas, haga clic en Extensiones. Busque Azure Storage y seleccione la extensión de Azure Storage en la lista. A continuación, haga clic en el botón Instalar para instalar la extensión.

   

Configuración del hospedaje de sitios web estáticos

El primer paso es configurar la cuenta de almacenamiento para hospedar un sitio web estático en Azure Portal. Al configurar la cuenta para el hospedaje de sitios web estáticos, Azure Storage crea automáticamente un contenedor denominado $web. El contenedor $web contendrá los archivos del sitio web estático.

1. Inicie sesión en Azure Portal en el explorador web.

2. Busque la cuenta de almacenamiento y muestre la información general de la cuenta.

3. Seleccione Sitio web estático para mostrar la página de configuración de sitios web estáticos.

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 de 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 de 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. Haz clic en Guardar. Azure Portal ahora muestra el punto de conexión del sitio web estático.

   

Implementación de un sitio web Hello World

A continuación, cree una página web Hola mundo con Visual Studio Code e impleméntela en el sitio web estático hospedado en la cuenta de Azure Storage.

1. Cree una carpeta vacía denominada mywebsite en el sistema de archivos local.

2. Inicie Visual Studio Code y abra la carpeta que acaba de crear desde el panel Explorador .

   

3. Cree el archivo de índice predeterminado en la carpeta mywebsite y asígnale el nombre index.html.

   

4. Abra index.html en el editor, pegue el texto siguiente en el archivo y guárdelo:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>Hello World!</h1>
     </body>
   </html>
   

5. Cree el archivo de error predeterminado y asígnele el nombre 404.html.

6. Abra 404.html en el editor, pegue el texto siguiente en el archivo y guárdelo:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>404</h1>
     </body>
   </html>
   

7. Haga clic con el botón derecho en la carpeta mywebsite en el panel Explorador y seleccione Implementar en sitio web estático... para implementar el sitio web. Se le pedirá que inicie sesión en Azure para recuperar una lista de suscripciones.

8. Seleccione la suscripción que contiene la cuenta de almacenamiento para la que ha habilitado el hospedaje de sitios web estáticos. A continuación, seleccione la cuenta de almacenamiento cuando se le solicite.

Visual Studio Code ahora cargará tus archivos en el punto de conexión web y mostrará la barra de estado de éxito. Inicie el sitio web para verlo en Azure.

Ha completado correctamente el tutorial e implementado un sitio web estático en Azure.

Soporte de funcionalidades

La compatibilidad con esta característica puede verse afectada al habilitar Data Lake Storage Gen2, el protocolo Network File System (NFS) 3.0 o el Protocolo de transferencia de archivos SSH (SFTP). Si ha habilitado cualquiera de estas funcionalidades, consulte Compatibilidad con características de Blob Storage en cuentas de Azure Storage para evaluar la compatibilidad con esta característica.

Pasos siguientes

En este tutorial, ha aprendido a configurar la cuenta de Azure Storage para el hospedaje de sitios web estáticos y a crear e implementar un sitio web estático en un punto de conexión de Azure.

A continuación, aprenda a configurar un dominio personalizado con el sitio web estático.

Asignación de un dominio personalizado a un punto de conexión de Azure Blob Storage