Ejemplos y sugerencias de sitios web estáticos

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

Ejemplos de configuración del sitio web

En las siguientes situaciones, se muestran los objetos que se te entregan cuando intentas acceder a ellos con varias URL.

Depósito de tres objetos

Supongamos que un depósito llamado www.example.com se configuró como un sitio web con la siguiente configuración y archivos:

  • 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 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 la siguiente configuración y archivos:

  • MainPageSuffix = "main.html"
  • NotFoundPage = "404.html"
  • El depósito contiene dos objetos compartidos públicamente: "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 públicamente, 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, deberás hacer lo siguiente:

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

  2. Agrega un registro nuevo CNAME para el subdominio.

    NAME                  TYPE     DATA
    test                  CNAME    c.storage.googleapis.com.
    

Configura parámetros de caché

Cuando configuras los metadatos Cache-Control puedes controlar si los elementos del sitio web se almacenan 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 entregado 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 Vista y edición de 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, una solicitud de www.example.com muestra la página de índice, pero una solicitud equivalente a storage.googleapis.com/www.example.com no lo hace.

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

Aloja elementos estáticos para 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 entrega de contenido (CDN) sin trabajo de tu parte porque 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é, cuando inhabilitas el almacenamiento en caché o configuras la duración de la caché para tus elementos estáticos legibles públicamente con 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 un registro CNAME y señalar un depósito con el mismo nombre que un sitio web estático. Por ejemplo, podrías tener un depósito denominado 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, supongamos que tienes el archivo de JavaScript library.js en el depósito www_example_com_assets que se comparte públicamente, luego puedes acceder a él como http://storage.googleapis.com/www_example_com_assets/library.js.

Supervisa tus cargos de almacenamiento

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 a tu 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.

El ejemplo simple de precios en la página de precios se puede usar como una aproximación para el caso práctico de un sitio web estático de tráfico bajo. Puedes usar la Calculadora de precios para generar una estimación de costos de tu proyecto.

Los usuarios nuevos de Cloud Platform pueden optar por una prueba gratuita.

Si eres un usuario actual de Cloud Platform, 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.

¿Qué sigue?

¿Te sirvió esta página? Envíanos tu opinión:

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.