Consejos y ejemplos de sitios web estáticos

En esta página se muestran ejemplos y consejos para usar los contenedores para alojar un sitio web estático.

Páginas de especialidad

Páginas de índice

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

Por ejemplo, supongamos que define el MainPageSuffix de su sitio web estático como index.html. Además, supongamos que no tiene ningún archivo llamado directory en el cubo www.example.com. En esta situación, si un usuario solicita la URL http://www.example.com/directory, Cloud Storage intenta servir el archivo www.example.com/directory/index.html. Si ese archivo tampoco existe, Cloud Storage devuelve una página de error.

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

Si intentas acceder a una URL con una barra al final, como http://www.example.com/dir/, consulta la sección Solución de problemas.

Página de error

La página de error es el archivo que se devuelve a los visitantes de tu sitio estático que solicitan una URL que no se corresponde con ningún archivo. Si has asignado un MainPageSuffix, Cloud Storage solo devuelve la página de error si no hay ningún archivo con el nombre solicitado ni ninguna página de índice aplicable.

Cuando se devuelve 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 lo haces, los usuarios verán una página de error genérica.NotFoundPage

Ejemplos de configuración de sitios web

Segmento de tres objetos

Supongamos que se ha configurado un segmento llamado www.example.com como sitio web con los siguientes ajustes y archivos:

  • MainPageSuffix = "index.html"
  • NotFoundPage = "404.html"
  • El contenedor contiene tres objetos compartidos públicamente: "index.html", "404.html" y "dir/index.html".

En la siguiente tabla se muestra el contenido servido para las URLs seleccionadas:

URL solicitada Contenido servido 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 Una respuesta con un cuerpo vacío y un encabezado Location que apunta a "dir/index.html". 301
http://www.example.com/dir/ El objeto "dir/index.html", suponiendo que no haya ningún objeto de cero bytes en /dir/ 200
Un objeto vacío de cero bytes, si existe para /dir/. Consulta el tema Solución de problemas para eliminar este objeto de cero bytes. 301

Segmento de dos objetos

Supongamos que se ha configurado un segmento llamado www.example.com como sitio web con los siguientes ajustes y archivos:

  • MainPageSuffix = "main.html"
  • NotFoundPage = "404.html"
  • El contenedor contiene dos objetos compartidos públicamente: "main.html" y "404.html".

En la siguiente tabla se muestra el contenido servido para las URLs seleccionadas:

URL solicitada Contenido servido 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 verlo con la URL:

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

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

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 Acceder a datos públicos.

Consejos para trabajar con un segmento configurado como sitio web

A continuación, se indican algunos consejos que debes tener en cuenta al usar un segmento para alojar un sitio web estático.

Añadir subdominios

Supongamos que también quieres servir contenido en test.example.com desde un contenedor diferente al que sirve contenido en www.example.com. Para ello:

  1. Crea un nuevo contenedor para alojar el contenido adicional.

  2. Si has seguido el tutorial Alojar un sitio web estático para servir tu contenido a través de HTTPS, edita tu balanceador de carga en la Google Cloud consola de la siguiente manera:

    1. En Configuración del backend, crea un nuevo contenedor de backend test-bucket seleccionando el contenedor que has creado.
    2. En Reglas de host y ruta, añade una regla nueva de la siguiente manera:
      Hosts                  Paths     Backends
      test.example.com       /*        test-bucket
      
    3. En Configuración del frontend, añade una nueva IP de frontend y un puerto con los mismos valores que la primera configuración, con las siguientes excepciones:

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

    NAME                  TYPE     DATA
    test                  A        IP_ADDRESS
    

Comportamiento de la API

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

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

Alojar recursos estáticos de un sitio web dinámico

Puedes usar Cloud Storage para alojar recursos estáticos de un sitio web dinámico alojado, por ejemplo, en Google App Engine o en Google Compute Engine. Algunas de las ventajas de alojar tus recursos estáticos, como imágenes o archivos JavaScript, en un segmento son las siguientes:

  • Cloud Storage se comporta como una red de distribución de contenido (CDN) porque los objetos legibles públicamente se almacenan en caché en la red de Cloud Storage de forma predeterminada.

  • Las tarifas de ancho de banda para acceder al contenido suelen ser más bajas con Cloud Storage.

  • La carga de tus servidores web se reduce al servir el contenido estático desde Cloud Storage.

Cuando alojas recursos estáticos de un sitio web dinámico, no tienes que crear registros DNS ni apuntar a un contenedor o a un balanceador de carga, como sí debes hacer en el caso de un sitio web estático. Por ejemplo, puedes tener un segmento llamado www_example_com_assets con los recursos adecuados configurados como compartidos públicamente y, a continuación, acceder a esos recursos mediante el dominio de Cloud Storage. Por ejemplo, supongamos que tienes el archivo JavaScript library.js en el contenedor www_example_com_assets, que se comparte públicamente. En ese caso, puedes acceder a él como http://storage.googleapis.com/www_example_com_assets/library.js.

Definir parámetros de caché

Puedes controlar cómo o si se almacenan en caché los recursos de tu sitio web configurando los metadatos Cache-Control. Por lo general, solo se deben definir metadatos de control de caché para los objetos a los que puedan acceder todos los usuarios anónimos, lo cual es un requisito para cualquier objeto que se sirva desde un segmento de Cloud Storage como parte de un sitio web estático.

Cloud Storage aplica un ajuste de control de caché de 3600 segundos a los objetos a los que pueden acceder todos los usuarios anónimos, a menos que especifiques ajustes de control de caché explícitos. Consulta Ver y editar metadatos para obtener instrucciones sobre cómo definir metadatos de objetos, como Cache-Control.

También puedes usar Cloud CDN para almacenar en caché el contenido externo HTTP o HTTPS con balanceo de carga cerca de tus usuarios, lo que suele reducir los costes de servicio. Para obtener más información, consulta Almacenamiento en caché.

Monitorizar los cargos

Si sirve recursos desde un segmento configurado como sitio web estático o recursos estáticos desde un segmento de un sitio web dinámico alojado fuera de Cloud Storage, debe monitorizar los cargos de su proyecto que contiene el segmento. Al servir contenido, se incurre en costes de Cloud Storage por almacenar el contenido, usar la red y realizar operaciones de obtención. Para obtener más información, consulta la página de precios de Cloud Storage.

También se pueden aplicar cargos por redes si usas un balanceador de carga de aplicaciones externo para configurar HTTPS. Para obtener más información, consulta los precios de red.

El ejemplo de precios sencillo de la página de ejemplos de precios se puede usar como aproximación para el caso práctico de un sitio web estático con poco tráfico. Sin embargo, ten en cuenta que en el ejemplo no se tienen en cuenta los cargos asociados al balanceador de carga de aplicaciones externo, que a menudo puede ser el cargo más elevado del alojamiento de sitios web estáticos. Puedes usar la calculadora de precios para generar una estimación de costes basada en el uso previsto.

Los usuarios nuevos Google Cloud pueden disfrutar de una prueba gratuita.

Si ya eres usuario de Google Cloud , puedes consultar un desglose detallado de los costes de tu proyecto en la página de facturación.

Solución de problemas

Consulta la sección Solución de problemas para ver los problemas habituales asociados al uso de un segmento configurado para publicar contenido de un sitio web estático.

Siguientes pasos

Pruébalo

Si es la primera vez que utilizas Google Cloud, crea una cuenta para evaluar el rendimiento de Cloud Storage en situaciones reales. Los nuevos clientes también reciben 300 USD en crédito gratuito para ejecutar, probar y desplegar cargas de trabajo.

Probar Cloud Storage gratis