Ejemplos y consejos de sitios web estáticos

En esta página, se muestran ejemplos y consejos sobre cómo 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 los siguientes ajustes 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 los siguientes ajustes 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, sigue estos pasos:

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

  2. Agrega un registro CNAME nuevo 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 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 de 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 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 distribución 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 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 de un sitio web dinámico, no necesitas crear un registro CNAME y señalar un depósito con el mismo nombre, como sucede con los sitios web estáticos. 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 activos 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 públicamente, 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 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.

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 según el uso previsto.

Los usuarios nuevos de Cloud Platform pueden ser aptos para 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.

Pasos siguientes

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

Enviar comentarios sobre…

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