Ejemplos y sugerencias de sitios web estáticos

En esta página, se muestran ejemplos y sugerencias sobre cómo usar depósitos para alojar un sitio web estático.

Páginas especializadas

Páginas de índice

Una página de índice (también llamada índice de directorio de servidor web) es un archivo que se entrega a los visitantes cuando solicitan una URL que no tiene un archivo asociado. Cuando asignas una propiedad MainPageSuffix, Cloud Storage busca un archivo con ese nombre cuyo prefijo coincida con la URL que solicitó el visitante.

Por ejemplo, supongamos que configuraste el MainPageSuffix de tu sitio web estático como index.html. Además, supongamos que no tienes un archivo llamado directory en tu depósito www.example.com. En esta situación, si un usuario solicita la URL http://www.example.com/directory, Cloud Storage intenta entregar el archivo www.example.com/directory/index.html. Si ese archivo tampoco existe, Cloud Storage muestra una página de error.

El MainPageSuffix también controla el archivo que se entrega cuando los usuarios solicitan el sitio de nivel superior. En el mismo ejemplo anterior, si un usuario solicita http://www.example.com, Cloud Storage intenta entregar el archivo www.example.com/index.html.

Cuando intentas acceder a una URL con una barra diagonal, como http://www.example.com/dir/, consulta Solución de problemas.

Página de error

La página de error es el archivo que se muestra a los visitantes del sitio estático que solicitan una URL que no corresponde a un archivo existente. Si asignaste un MainPageSuffix, Cloud Storage solo muestra la página de error si no hay un archivo con el nombre solicitado ni una página de índice aplicable.

Cuando se muestra una página de error, el código de respuesta HTTP es 404. La propiedad que controla qué archivo actúa como página de error es NotFoundPage. Si no configuras NotFoundPage, los usuarios reciben una página de error genérica.

Ejemplos de configuración del sitio web

Depósito de tres objetos

Supongamos que un depósito llamado www.example.com se configuró como un sitio web con los siguientes archivos y opciones de configuración:

  • MainPageSuffix = “index.html”
  • NotFoundPage = "404.html"
  • El depósito contiene tres objetos compartidos públicamente: "index.html", "404.html" y "dir / index.html"

En la siguiente tabla, se muestra el contenido entregado para las URL seleccionadas:

URL solicitada Contenido entregado Código de respuesta HTTP
http://www.example.com
http://www.example.com/
http://www.example.com/index.html
El objeto "index.html" 200
http://www.example.com/hello El objeto "404.html" 404
http://www.example.com/dir/index.html El objeto "dir / index.html" 200
http://www.example.com/dir El objeto "dir / index.html" 301
http://www.example.com/dir/ El objeto "dir / index.html", si suponemos que no existe ningún objeto de cero bytes para / dir / 200
Un objeto vacío de cero bytes, si existe para /dir/. Consulta el tema sobre la solución de problemas para quitar este objeto de cero bytes. 301

Depósito de dos objetos

Supongamos que un depósito llamado www.example.com se configuró como un sitio web con los siguientes archivos y opciones de configuración:

  • MainPageSuffix = “main.html”
  • NotFoundPage = "404.html"
  • El depósito contiene dos objetos compartidos de manera pública: “main.html” y “404.html”

En la siguiente tabla, se muestra el contenido entregado para las URL seleccionadas:

URL solicitada Contenido entregado Código de respuesta HTTP
http://www.example.com
http://www.example.com/
El objeto "main.html" 200
http://www.example.com/index.html El objeto "404.html" 404

Si un objeto se comparte de manera pública, también puedes ver ese objeto con la siguiente URL:

http://storage.googleapis.com/[BUCKET_NAME]/[OBJECT_NAME]

Por ejemplo, la siguiente sería la URL de un objeto index.html:

http://storage.googleapis.com/www.example.com/index.html

Para obtener más información sobre cómo trabajar con datos de acceso público, consulta Acceso a datos públicos.

Sugerencias para trabajar con un depósito configurado como sitio web

Las siguientes son algunas sugerencias que debes tener en cuenta cuando uses un depósito para alojar un sitio web estático.

Agrega subdominios

Supongamos que también deseas entregar contenido en test.example.com desde un depósito diferente del que entrega contenido en www.example.com. Para ello, sigue estos pasos:

  1. Crea un depósito nuevo llamado test.example.com. Debido a que ya verificaste el dominio example.com, puedes crear depósitos para admitir subdominios sin verificación adicional.

  2. Si seguiste el instructivo en Aloja un sitio web estático para entregar el contenido a través de HTTPS, edita tu balanceador de cargas en Cloud Console de la siguiente manera:

    1. En Configuración de backend, debes seleccionar el depósito test.example.com para crear un depósito de backend test-bucket nuevo.
    2. En Reglas de host y ruta de acceso, agrega una regla nueva de la siguiente manera:
      Hosts                  Paths     Backends
      test.example.com       /*        test-bucket
      
    3. Para la Configuración de frontend, agrega una IP y puerto de frontend nuevos con los mismos valores que la primera configuración, con las siguientes excepciones:

      • En Dirección IP, crea y reserva una dirección IP nueva.
      • En Certificado, crea un certificado SSL nuevo para test.example.com.
  3. Después de actualizar el balanceador de cargas, agrega un registro A nuevo a tu servicio de registro de dominio mediante la dirección IP de la configuración de frontend nueva:

    NAME                  TYPE     DATA
    test                  A        [IP_ADDRESS]
    

Configura parámetros de caché

Cuando configuras los metadatos Cache-Control, puedes controlar si los elementos del sitio web se almacenan en caché o cómo lo hacen. En general, solo configura los metadatos de control de caché con los objetos que son accesibles a todos los usuarios anónimos, lo cual es un requisito para cualquier objeto que se entrega desde un depósito de Cloud Storage como parte de un sitio web estático.

Cloud Storage aplica una configuración de control de caché de 3,600 segundos a los objetos a los que pueden acceder todos los usuarios anónimos, a menos que especifiques una configuración de control de caché explícita. Consulta Ve y edita metadatos para obtener instrucciones sobre cómo configurar metadatos de objetos, como Cache-Control.

Comportamiento de la API

Las configuraciones de los sitios web MainPageSuffix y NotFoundPage solo se usan para solicitudes que llegan a Cloud Storage a través del extremo CNAME o a través de Cloud Load Balancing. Por ejemplo, con una solicitud a www.example.com, se muestra la página de índice, pero con una solicitud equivalente a storage.googleapis.com/www.example.com, no.

Por lo tanto, se conserva el comportamiento de la API para las solicitudes a dominios de Cloud Storage, como storage.googleapis.com/www.example.com. Por ejemplo, puedes continuar enumerando objetos del depósito www.example.com, como lo harías con cualquier otro depósito. En el caso del depósito www.example.com, la lista de objetos que recibes incluye 404.html y index.html.

Aloja elementos estáticos en un sitio web dinámico

Puedes usar Cloud Storage para alojar elementos estáticos en un sitio web dinámico alojado, por ejemplo, en Google App Engine o en Google Compute Engine. Algunos beneficios de alojar tus elementos estáticos, como imágenes o archivos JavaScript, en un depósito incluyen los siguientes:

  • Cloud Storage se comporta esencialmente como una red de distribución de contenidos (CDN) con la que no necesitas encargarte de nada, ya que los objetos legibles públicamente se almacenan en caché en la red de Cloud Storage de manera predeterminada.

  • Generalmente, el costo de los cargos de ancho de banda para acceder al contenido es menor con Cloud Storage.

  • La carga en tus servidores web se reduce cuando se entrega el contenido estático de Cloud Storage.

También puedes controlar el almacenamiento en caché (por ejemplo, inhabilitarlo o determinar su duración) de los elementos estáticos legibles públicamente mediante encabezados de solicitud de control de caché. Para obtener más información, consulta Configura parámetros de caché.

Cuando alojas elementos estáticos para un sitio web dinámico, no necesitas crear registros DNS y apuntar a un depósito o balanceador de cargas como lo haces con un sitio web estático. Por ejemplo, podrías tener un depósito llamado www_example_com_assets con los elementos apropiados configurados como compartidos públicamente y, luego, acceder a esos elementos con el dominio de Cloud Storage. Por ejemplo, si tienes un archivo JavaScript library.js en el depósito www_example_com_assets, el cual se comparte de forma pública, puedes acceder a él como http://storage.googleapis.com/www_example_com_assets/library.js.

Supervisa tus cargos

Si entregas elementos de un depósito configurado como un sitio web estático o entregas elementos estáticos de un depósito para un sitio web dinámico alojado fuera de Cloud Storage, debes supervisar los cargos al proyecto que contiene el depósito. La entrega de contenido genera costos de Cloud Storage por almacenar el contenido, usar la red y realizar operaciones de recuperación. Para obtener más información, consulta la página Precios de Cloud Storage.

También puedes generar cargos de red si usas el balanceo de cargas HTTP(S) para configurar HTTPS. Para obtener más detalles, consulta Precios de red.

El ejemplo simple de precios en la página de precios de Cloud Storage se puede usar como una aproximación para el caso práctico de un sitio web estático con poco tráfico. Puedes usar la calculadora de precios para generar una estimación de costos según el uso previsto.

Los usuarios nuevos de Google Cloud pueden ser aptos para una prueba gratuita.

Si eres un usuario actual de Google Cloud, puedes obtener un desglose detallado de los costos de tu proyecto en la página de facturación.

Solución de problemas

Consulta Solución de problemas a fin de obtener más información sobre problemas comunes asociados con el uso de un depósito configurado para entregar contenido de sitios web estáticos.

Próximos pasos